graham/prop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

smaller screen optimization on prop path calculation
Some checks failed
Build and Push / Build and Push Docker Image (push) Failing after 4m54s
Details

Browse source
This commit is contained in:
Graham McIntire 2026-08-02 12:30:37 -05:00
parent fe06f5f77c
commit ffbaa6230f
No known key found for this signature in database
GPG key ID: F4ABF488E6029E59
1 changed files with 99 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
lib/microwaveprop_web/live/path_live.ex
View file

@ -523,7 +523,8 @@ defmodule MicrowavepropWeb.PathLive do
class="btn btn-sm btn-outline gap-1" class="btn btn-sm btn-outline gap-1"
title="Use device GPS" title="Use device GPS"
> >
<.icon name="hero-map-pin" class="size-3.5" /> My Location <.icon name="hero-map-pin" class="size-3.5" />
<span class="hidden sm:inline">My Location</span>
</button> </button>
</div> </div>
</div> </div>
@ -678,11 +679,11 @@ defmodule MicrowavepropWeb.PathLive do
<div class="grid grid-cols-2 md:grid-cols-5 gap-3 text-sm"> <div class="grid grid-cols-2 md:grid-cols-5 gap-3 text-sm">
<div> <div>
<span class="opacity-60">Distance</span> <span class="opacity-60">Distance</span>
<div class="font-mono text-lg">{format_km_mi(@result.dist_km)}</div> <div class="font-mono text-base sm:text-lg">{format_km_mi(@result.dist_km)}</div>
</div> </div>
<div> <div>
<span class="opacity-60">Bearing</span> <span class="opacity-60">Bearing</span>
<div class="font-mono text-lg">{format_number(@result.bearing)}&deg;</div> <div class="font-mono text-base sm:text-lg">{format_number(@result.bearing)}&deg;</div>
</div> </div>
<%= if @result.terrain do %> <%= if @result.terrain do %>
<div> <div>
@ -697,7 +698,10 @@ defmodule MicrowavepropWeb.PathLive do
<%= if @result.scoring do %> <%= if @result.scoring do %>
<div> <div>
<span class="opacity-60">Propagation</span> <span class="opacity-60">Propagation</span>
<div class="font-mono text-lg" style={"color: #{tier_color(@result.scoring.score)}"}> <div
class="font-mono text-base sm:text-lg"
style={"color: #{tier_color(@result.scoring.score)}"}
>
{@result.scoring.score}/100 {@result.scoring.score}/100
</div> </div>
<div class="text-xs" style={"color: #{tier_color(@result.scoring.score)}"}> <div class="text-xs" style={"color: #{tier_color(@result.scoring.score)}"}>
@ -820,14 +824,16 @@ defmodule MicrowavepropWeb.PathLive do
<div class="grid grid-cols-2 gap-x-6 gap-y-3"> <div class="grid grid-cols-2 gap-x-6 gap-y-3">
<div> <div>
<span class="text-xs opacity-60">Temperature</span> <span class="text-xs opacity-60">Temperature</span>
<div class="font-mono text-xl">{format_number(@result.conditions.temp_f)}&deg;F</div> <div class="font-mono text-lg sm:text-xl">
{format_number(@result.conditions.temp_f)}&deg;F
</div>
<div class="font-mono text-xs opacity-50"> <div class="font-mono text-xs opacity-50">
{format_number(@result.conditions.temp_c)}&deg;C {format_number(@result.conditions.temp_c)}&deg;C
</div> </div>
</div> </div>
<div> <div>
<span class="text-xs opacity-60">Dewpoint</span> <span class="text-xs opacity-60">Dewpoint</span>
<div class="font-mono text-xl"> <div class="font-mono text-lg sm:text-xl">
{format_number(@result.conditions.dewpoint_f)}&deg;F {format_number(@result.conditions.dewpoint_f)}&deg;F
</div> </div>
<div class="font-mono text-xs opacity-50"> <div class="font-mono text-xs opacity-50">
@ -836,37 +842,37 @@ defmodule MicrowavepropWeb.PathLive do
</div> </div>
<div> <div>
<span class="text-xs opacity-60">T/Td Gap</span> <span class="text-xs opacity-60">T/Td Gap</span>
<div class="font-mono text-xl"> <div class="font-mono text-lg sm:text-xl">
{format_number(@result.conditions.temp_f - @result.conditions.dewpoint_f)}&deg;F {format_number(@result.conditions.temp_f - @result.conditions.dewpoint_f)}&deg;F
</div> </div>
</div> </div>
<div> <div>
<span class="text-xs opacity-60">Abs Humidity</span> <span class="text-xs opacity-60">Abs Humidity</span>
<div class="font-mono text-xl"> <div class="font-mono text-lg sm:text-xl">
{format_number(@result.conditions.abs_humidity)} g/m&sup3; {format_number(@result.conditions.abs_humidity)} g/m&sup3;
</div> </div>
</div> </div>
<div> <div>
<span class="text-xs opacity-60">Pressure</span> <span class="text-xs opacity-60">Pressure</span>
<div class="font-mono text-xl"> <div class="font-mono text-lg sm:text-xl">
{format_number(@result.conditions.pressure_mb || 0)} mb {format_number(@result.conditions.pressure_mb || 0)} mb
</div> </div>
</div> </div>
<div> <div>
<span class="text-xs opacity-60">PWAT</span> <span class="text-xs opacity-60">PWAT</span>
<div class="font-mono text-xl"> <div class="font-mono text-lg sm:text-xl">
{format_number(@result.conditions.pwat_mm || 0)} mm {format_number(@result.conditions.pwat_mm || 0)} mm
</div> </div>
</div> </div>
<div> <div>
<span class="text-xs opacity-60">BL Depth</span> <span class="text-xs opacity-60">BL Depth</span>
<div class="font-mono text-xl"> <div class="font-mono text-lg sm:text-xl">
{format_number(@result.conditions.bl_depth_m || 0)} m {format_number(@result.conditions.bl_depth_m || 0)} m
</div> </div>
</div> </div>
<div> <div>
<span class="text-xs opacity-60">Refrac Gradient</span> <span class="text-xs opacity-60">Refrac Gradient</span>
<div class="font-mono text-xl"> <div class="font-mono text-lg sm:text-xl">
{format_number(@result.conditions.min_refractivity_gradient || 0)} N/km {format_number(@result.conditions.min_refractivity_gradient || 0)} N/km
</div> </div>
</div> </div>
@ -1036,9 +1042,9 @@ defmodule MicrowavepropWeb.PathLive do
defp ionosphere_readout(assigns) do defp ionosphere_readout(assigns) do
~H""" ~H"""
<div class="bg-base-200 rounded-box p-4 mb-6"> <div class="bg-base-200 rounded-box p-4 mb-6">
<div class="flex items-center justify-between mb-2"> <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-2">
<div class="text-xs opacity-60">Ionosphere &middot; Sporadic-E Potential</div> <div class="text-xs opacity-60">Ionosphere &middot; Sporadic-E Potential</div>
<div class="text-[10px] opacity-50"> <div class="text-[10px] opacity-50 mt-1 sm:mt-0">
{@readout.station_code} · {Calendar.strftime(@readout.valid_time, "%Y-%m-%d %H:%M UTC")} {@readout.station_code} · {Calendar.strftime(@readout.valid_time, "%Y-%m-%d %H:%M UTC")}
</div> </div>
</div> </div>
@ -1127,7 +1133,8 @@ defmodule MicrowavepropWeb.PathLive do
{Phoenix.HTML.raw(@trend)} {Phoenix.HTML.raw(@trend)}
</div> </div>
</div> </div>
<svg viewBox="0 0 1200 240" class="w-full aspect-[5/1]"> <div class="overflow-x-auto">
<svg viewBox="0 0 1200 240" class="min-w-[720px] w-full h-auto">
<%= for s <- [0, 25, 50, 75, 100] do %> <%= for s <- [0, 25, 50, 75, 100] do %>
<% y = 20 + (100 - s) / 100 * 185 %> <% y = 20 + (100 - s) / 100 * 185 %>
<line <line
@ -1211,7 +1218,8 @@ defmodule MicrowavepropWeb.PathLive do
</text> </text>
<% end %> <% end %>
</svg> </svg>
<div class="flex justify-between text-xs mt-2"> </div>
<div class="flex flex-col sm:flex-row sm:justify-between gap-1 text-xs mt-2">
<span> <span>
Best: Best:
<span class="font-bold" style={"color: #{tier_color(@best_pt.score)}"}> <span class="font-bold" style={"color: #{tier_color(@best_pt.score)}"}>