moved gradient calculation to backend
This commit is contained in:
@@ -693,30 +693,20 @@ data:
|
||||
template: |
|
||||
{{ $loc := .JSON.String "location.name" }}
|
||||
{{ if eq $loc "" }}{{ $loc = .JSON.String "place" }}{{ end }}
|
||||
|
||||
{{ $curTemp := .JSON.Float "current.temp_c" }}
|
||||
{{ $curIcon := .JSON.String "current.icon_url" }}
|
||||
|
||||
{{ $daily := .JSON.Array "daily" }}
|
||||
{{ $hourly := .JSON.Array "hourly" }}
|
||||
|
||||
<div class="idokep">
|
||||
<div class="idokep-top">
|
||||
<div class="idokep-top-left">
|
||||
{{ if $curIcon }}
|
||||
<img class="idokep-icon" src="{{ $curIcon }}" alt="" />
|
||||
{{ end }}
|
||||
<div class="idokep-temp">
|
||||
{{ printf "%.0f" $curTemp }}°C
|
||||
</div>
|
||||
{{ if $curIcon }}<img class="idokep-icon" src="{{ $curIcon }}" alt="" />{{ end }}
|
||||
<div class="idokep-temp">{{ printf "%.0f" $curTemp }}°C</div>
|
||||
</div>
|
||||
|
||||
<div class="idokep-top-right">
|
||||
<div class="idokep-loc">{{ $loc }}</div>
|
||||
<div class="idokep-src">
|
||||
Forrás:
|
||||
<a href="{{ .JSON.String "source.url" }}" target="_blank" rel="noreferrer">Időkép</a>
|
||||
</div>
|
||||
<div class="idokep-src">Forrás: <a href="{{ .JSON.String "source.url" }}" target="_blank">Időkép</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -725,66 +715,35 @@ data:
|
||||
{{ range $i, $h := $hourly }}
|
||||
<div class="idokep-hour">
|
||||
<div class="idokep-hour-time">{{ $h.String "time" }}</div>
|
||||
{{ $hicon := $h.String "icon_url" }}
|
||||
{{ if $hicon }}
|
||||
<img class="idokep-hour-icon" src="{{ $hicon }}" alt="" />
|
||||
{{ end }}
|
||||
{{ if $h.String "icon_url" }}<img class="idokep-hour-icon" src="{{ $h.String "icon_url" }}" alt="" />{{ end }}
|
||||
<div class="idokep-hour-temp">{{ printf "%.0f" ($h.Float "temp_c") }}°</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="idokep-muted">No hourly data returned by scraper yet.</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if gt (len $daily) 0 }}
|
||||
{{/* compute global min/max */}}
|
||||
{{ $gmin := 9999.0 }}
|
||||
{{ $gmax := -9999.0 }}
|
||||
{{ range $daily }}
|
||||
{{ $tmin := .Float "tmin_c" }}
|
||||
{{ $tmax := .Float "tmax_c" }}
|
||||
{{ if lt $tmin $gmin }}{{ $gmin = $tmin }}{{ end }}
|
||||
{{ if gt $tmax $gmax }}{{ $gmax = $tmax }}{{ end }}
|
||||
{{ end }}
|
||||
{{ $span := sub $gmax $gmin }}
|
||||
{{ if eq $span 0.0 }}{{ $span = 1.0 }}{{ end }}
|
||||
|
||||
{{/* CALCULATE GRADIENT POSITIONS RELATIVE TO CURRENT RANGE */}}
|
||||
{{ $p_wht := printf "%.1f" (mul (div (sub -10.0 $gmin) $span) 100.0) }}
|
||||
{{ $p_blu := printf "%.1f" (mul (div (sub 0.0 $gmin) $span) 100.0) }}
|
||||
{{ $p_pur := printf "%.1f" (mul (div (sub 15.0 $gmin) $span) 100.0) }}
|
||||
{{ $p_pnk := printf "%.1f" (mul (div (sub 25.0 $gmin) $span) 100.0) }}
|
||||
{{ $p_red := printf "%.1f" (mul (div (sub 35.0 $gmin) $span) 100.0) }}
|
||||
|
||||
{{/* Generate the dynamic CSS gradient string */}}
|
||||
{{ $grad := printf "linear-gradient(90deg, #ffffff %s%%, #60a5fa %s%%, #a78bfa %s%%, #fb7185 %s%%, #ef4444 %s%%)" $p_wht $p_blu $p_pur $p_pnk $p_red }}
|
||||
|
||||
<div class="idokep-daily">
|
||||
{{ range $daily }}
|
||||
{{ $tmin := .Float "tmin_c" }}
|
||||
{{ $tmax := .Float "tmax_c" }}
|
||||
{{ $left := mul (div (sub $tmin $gmin) $span) 100.0 }}
|
||||
{{ $wid := mul (div (sub $tmax $tmin) $span) 100.0 }}
|
||||
<div class="idokep-row">
|
||||
<div class="idokep-dow">
|
||||
<span class="idokep-downame">{{ .String "dow" }}</span>
|
||||
<span class="idokep-daynum">{{ .String "daynum" }}</span>
|
||||
</div>
|
||||
{{ $dicon := .String "icon_url" }}
|
||||
<div class="idokep-dayicon">
|
||||
{{ if $dicon }}<img src="{{ $dicon }}" alt="" />{{ end }}
|
||||
{{ if .String "icon_url" }}<img src="{{ .String "icon_url" }}" alt="" />{{ end }}
|
||||
</div>
|
||||
<div class="idokep-min">{{ printf "%.0f" $tmin }}°</div>
|
||||
<div class="idokep-min">{{ printf "%.0f" (.Float "tmin_c") }}°</div>
|
||||
|
||||
<div class="idokep-bar">
|
||||
<div class="idokep-bar-track"></div>
|
||||
{{/* Pass calculated offset and gradient to CSS variables */}}
|
||||
<div class="idokep-bar-fill" style="left: {{ printf "%.1f" $left }}%; width: {{ printf "%.1f" $wid }}%;">
|
||||
<div class="idokep-bar-gradient" style="--off: {{ printf "%.1f" $left }}; --grad: {{ $grad }};"></div>
|
||||
{{/* Use the Python-calculated styles directly */}}
|
||||
<div class="idokep-bar-fill" style="{{ .String "bar_style" }}">
|
||||
<div class="idokep-bar-gradient" style="{{ .String "grad_style" }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="idokep-max">{{ printf "%.0f" $tmax }}°</div>
|
||||
|
||||
<div class="idokep-max">{{ printf "%.0f" (.Float "tmax_c") }}°</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
@@ -2058,7 +2017,7 @@ data:
|
||||
.idokep-bar {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
container-type: inline-size; /* Allows children to know the full track width */
|
||||
/* container-type removed - not needed with Python approach */
|
||||
}
|
||||
.idokep-bar-track {
|
||||
position: absolute;
|
||||
@@ -2071,7 +2030,7 @@ data:
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
overflow: hidden; /* Clips the inner gradient to this bar's size */
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.08) inset;
|
||||
}
|
||||
.idokep-min, .idokep-max { text-align: right; font-weight: 700; opacity: 0.8; }
|
||||
@@ -2092,14 +2051,7 @@ data:
|
||||
.idokep-bar-gradient {
|
||||
position: absolute;
|
||||
top: 0; bottom: 0;
|
||||
width: 100cqw; /* Forces width to match the PARENT TRACK, not the fill */
|
||||
|
||||
/* Shift left by the percentage the fill was pushed right.
|
||||
1cqw equals 1% of the track width.
|
||||
So we multiple the offset variable by -1cqw to realign perfectly. */
|
||||
left: calc(var(--off) * -1cqw);
|
||||
|
||||
background: var(--grad);
|
||||
/* Width and margin are calculated in Python to match the track width exactly */
|
||||
}
|
||||
---
|
||||
apiVersion: apps/v1
|
||||
|
||||
Reference in New Issue
Block a user