static routing fixed
This commit is contained in:
Vincent van der Wal
@@ -1,7 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
import { storedLocation } from '$lib/stores/settings';
|
||||
import { storedLocation, storedModel, storedTheme } from '$lib/stores/settings';
|
||||
|
||||
import { mapsDomainForModel } from '$lib/utils/maps-domain';
|
||||
|
||||
// Hash piping, both directions:
|
||||
// - inbound: a #zoom/lat/lng(/bearing/pitch) hash on OUR url seeds the
|
||||
@@ -10,6 +12,16 @@
|
||||
// we mirror it into our url with replaceState. hashOverride is only set
|
||||
// once on mount, so these mirror updates never reload the iframe.
|
||||
let hashOverride = $state<string | null>(null);
|
||||
let iframeEl = $state<HTMLIFrameElement | null>(null);
|
||||
let mapReady = $state(false);
|
||||
|
||||
const postToMap = (message: Record<string, unknown>) => {
|
||||
iframeEl?.contentWindow?.postMessage(message, MAPS_ORIGIN);
|
||||
};
|
||||
|
||||
// Local maps dev server (open-meteo/maps); production: https://maps.open-meteo.com
|
||||
// Run drizzli on a different port so the map keeps 5173 to itself.
|
||||
const MAPS_ORIGIN = 'http://localhost:5173';
|
||||
|
||||
const MAP_HASH_RE = /^#\d+(\.\d+)?\/-?\d+(\.\d+)?\/-?\d+(\.\d+)?/;
|
||||
|
||||
@@ -18,10 +30,24 @@
|
||||
hashOverride = MAP_HASH_RE.test(initialHash) ? initialHash : null;
|
||||
|
||||
const onMessage = (event: MessageEvent) => {
|
||||
if (event.origin !== 'https://maps.open-meteo.com') return;
|
||||
const { type, hash } = (event.data ?? {}) as { type?: string; hash?: string };
|
||||
if (type !== 'om-maps:hash' || !hash || !MAP_HASH_RE.test(hash)) return;
|
||||
history.replaceState(history.state, '', hash);
|
||||
if (event.origin !== MAPS_ORIGIN) return;
|
||||
const { type, hash, domains } = (event.data ?? {}) as {
|
||||
type?: string;
|
||||
hash?: string;
|
||||
domains?: string[];
|
||||
};
|
||||
if (type === 'om-maps:hash') {
|
||||
if (!hash || !MAP_HASH_RE.test(hash)) return;
|
||||
history.replaceState(history.state, '', hash);
|
||||
} else if (type === 'om-maps:ready' && Array.isArray(domains)) {
|
||||
// The map is loaded and advertises which domains it can render;
|
||||
// switch it to the selected model and our theme. The domain is
|
||||
// omitted for best_match and models the map does not serve,
|
||||
// keeping the map's own default. Re-fires on iframe reloads.
|
||||
mapReady = true;
|
||||
const domain = mapsDomainForModel($storedModel, new Set(domains));
|
||||
postToMap({ type: 'om-maps:set', ...(domain && { domain }), theme: $storedTheme });
|
||||
}
|
||||
};
|
||||
window.addEventListener('message', onMessage);
|
||||
return () => window.removeEventListener('message', onMessage);
|
||||
@@ -31,11 +57,19 @@
|
||||
// opens focused on the selected location (zoomed out to regional scale);
|
||||
// picking a new location while on this page recenters the map
|
||||
const iframeSrc = $derived(
|
||||
`https://maps.open-meteo.com/${
|
||||
`${MAPS_ORIGIN}/${
|
||||
hashOverride ??
|
||||
`#6/${$storedLocation.latitude.toFixed(3)}/${$storedLocation.longitude.toFixed(3)}`
|
||||
}`
|
||||
);
|
||||
|
||||
// forward theme switches live; the initial theme travels with the
|
||||
// ready response above (the map ignores no-op updates)
|
||||
$effect(() => {
|
||||
const theme = $storedTheme;
|
||||
if (!mapReady) return;
|
||||
postToMap({ type: 'om-maps:set', theme });
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -51,6 +85,7 @@
|
||||
map; it only takes effect when this site itself is served with
|
||||
COOP/COEP headers (see README, Deployment) -->
|
||||
<iframe
|
||||
bind:this={iframeEl}
|
||||
src={iframeSrc}
|
||||
title="Open-Meteo Interactive Map"
|
||||
loading="lazy"
|
||||
|
||||
@@ -150,7 +150,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex w-full min-w-0 items-center gap-3 sm:w-auto">
|
||||
<ModelSelector
|
||||
selectedModel={params.models?.[0] ?? 'best_match'}
|
||||
onModelChange={(model) => {
|
||||
|
||||
@@ -210,7 +210,11 @@
|
||||
{#if cellData.length > 0}
|
||||
{@const hourly = data.hourly}
|
||||
{@const iconPx = is3h ? 38 : 26}
|
||||
<section class="overflow-hidden rounded-2xl border border-border/70 bg-card shadow-sm">
|
||||
<!-- Full-bleed to the viewport edges on mobile (main has p-5 = 1.25rem);
|
||||
a contained rounded card on md+ -->
|
||||
<section
|
||||
class="-mx-5 overflow-hidden border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border"
|
||||
>
|
||||
<!-- Card toolbar -->
|
||||
<div
|
||||
class="flex flex-wrap items-center justify-between gap-2 border-b border-border/70 bg-muted/40 px-4 py-2.5"
|
||||
@@ -244,248 +248,265 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative" bind:clientWidth={tableWidth}>
|
||||
<table class="w-full table-fixed border-collapse whitespace-nowrap">
|
||||
<caption class="sr-only">Hourly weather details for {locationName}</caption>
|
||||
<colgroup>
|
||||
<col class="w-16 md:w-20" />
|
||||
{#each cellData as _ (_.idx)}
|
||||
<col />
|
||||
{/each}
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<!-- Time + Daylight bar (merged) -->
|
||||
<tr class="row">
|
||||
<th class="hdr" scope="row" bind:clientWidth={headerColWidth}>
|
||||
<span class="text-[10px] font-semibold text-muted-foreground">Time</span>
|
||||
</th>
|
||||
<td colspan={cellData.length} class="relative h-10 overflow-visible p-0">
|
||||
<!-- Daylight background -->
|
||||
{#if sunTimes && sunrisePercent != null && sunsetPercent != null}
|
||||
<div
|
||||
class="absolute inset-y-0 left-0 bg-indigo-950/10 dark:bg-indigo-950/40"
|
||||
style="width:{sunrisePercent}%"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-y-0 bg-amber-400/15 dark:bg-amber-300/10"
|
||||
style="left:{sunrisePercent}%;width:{sunsetPercent - sunrisePercent}%"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 bg-indigo-950/10 dark:bg-indigo-950/40"
|
||||
style="width:{100 - sunsetPercent}%"
|
||||
></div>
|
||||
<!-- Sunrise marker + label -->
|
||||
<div class="absolute inset-y-0 w-px bg-amber-500/70" style="left:{sunrisePercent}%">
|
||||
<span
|
||||
class="absolute bottom-0.5 left-1 text-[10px] leading-none font-semibold whitespace-nowrap text-amber-700 dark:text-amber-300"
|
||||
<!-- Below the min-width the table scrolls sideways instead of squeezing;
|
||||
1h needs far more room than 3h (24 vs 8 columns) -->
|
||||
<div class="overflow-x-auto">
|
||||
<div
|
||||
class="relative {is3h ? 'min-w-[560px]' : 'min-w-[1100px]'}"
|
||||
bind:clientWidth={tableWidth}
|
||||
>
|
||||
<table class="w-full table-fixed border-collapse whitespace-nowrap">
|
||||
<caption class="sr-only">Hourly weather details for {locationName}</caption>
|
||||
<colgroup>
|
||||
<col class="w-16 md:w-20" />
|
||||
{#each cellData as _ (_.idx)}
|
||||
<col />
|
||||
{/each}
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<!-- Time + Daylight bar (merged) -->
|
||||
<tr class="row">
|
||||
<th class="hdr" scope="row" bind:clientWidth={headerColWidth}>
|
||||
<span class="text-[10px] font-semibold text-muted-foreground">Time</span>
|
||||
</th>
|
||||
<td colspan={cellData.length} class="relative h-10 overflow-visible p-0">
|
||||
<!-- Daylight background -->
|
||||
{#if sunTimes && sunrisePercent != null && sunsetPercent != null}
|
||||
<div
|
||||
class="absolute inset-y-0 left-0 bg-indigo-950/10 dark:bg-indigo-950/40"
|
||||
style="width:{sunrisePercent}%"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-y-0 bg-amber-400/15 dark:bg-amber-300/10"
|
||||
style="left:{sunrisePercent}%;width:{sunsetPercent - sunrisePercent}%"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 bg-indigo-950/10 dark:bg-indigo-950/40"
|
||||
style="width:{100 - sunsetPercent}%"
|
||||
></div>
|
||||
<!-- Sunrise marker + label -->
|
||||
<div
|
||||
class="absolute inset-y-0 w-px bg-amber-500/70"
|
||||
style="left:{sunrisePercent}%"
|
||||
>
|
||||
<svg
|
||||
class="inline-block fill-foreground"
|
||||
width="12px"
|
||||
height="12px"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use
|
||||
class="stroke-2"
|
||||
xlink:href="/images/weather-icons/wi-sunrise.svg#Layer_1"
|
||||
></use>
|
||||
</svg>
|
||||
<span class="align-middle">{formatTime(sunTimes.sunrise)}</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Sunset marker + label -->
|
||||
<div class="absolute inset-y-0 w-px bg-indigo-400/70" style="left:{sunsetPercent}%">
|
||||
<span
|
||||
class="absolute right-1 bottom-0.5 inline-flex items-center gap-1 text-[10px] leading-none font-semibold whitespace-nowrap text-indigo-600 dark:text-indigo-300"
|
||||
>
|
||||
<svg
|
||||
class="inline-block fill-foreground"
|
||||
width="12px"
|
||||
height="12px"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use class="stroke-2" xlink:href="/images/weather-icons/wi-sunset.svg#Layer_1"
|
||||
></use>
|
||||
</svg>
|
||||
<span class="align-middle">{formatTime(sunTimes.sunset)}</span>
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Hour labels -->
|
||||
{#each cellData as cell, i (cell.idx)}
|
||||
{@const leftPct = (i / cellData.length) * 100}
|
||||
{@const widthPct = 100 / cellData.length}
|
||||
<span
|
||||
class="absolute top-0 flex items-start pt-1.5 pl-1 text-sm font-bold
|
||||
{cell.isNow ? 'text-red-600 dark:text-red-400' : ''}"
|
||||
style="left:{leftPct}%;width:{widthPct}%"
|
||||
>
|
||||
{#if is3h}
|
||||
{formatZoned(cell.date, data.timezone, 'HH')}
|
||||
{:else}
|
||||
<span class="inline-flex items-baseline gap-1">
|
||||
<span class="text-[11px] font-semibold"
|
||||
>{formatZoned(cell.date, data.timezone, 'HH')}</span
|
||||
>
|
||||
<sup
|
||||
class="align-baseline text-[9px] leading-none font-semibold text-muted-foreground"
|
||||
>00</sup
|
||||
>
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
{/each}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Weather Icons -->
|
||||
{#if showRow('icons')}
|
||||
<tr class="row">
|
||||
{@render rowHeader('wi-day-cloudy')}
|
||||
{#each cellData as cell, i (cell.idx)}
|
||||
{@const wCode = hourly.weather_code[cell.idx]}
|
||||
<td
|
||||
class="cell leading-0 {is3h ? 'h-14' : 'h-11'}"
|
||||
class:icon-day={cell.isDaytime}
|
||||
class:icon-night={!cell.isDaytime}
|
||||
class:icon-dawn={!cell.isDaytime && cellData[i + 1]?.isDaytime}
|
||||
class:icon-dusk={cell.isDaytime && cellData[i + 1] && !cellData[i + 1].isDaytime}
|
||||
>
|
||||
{@render weatherIcon(getWeatherIconName(wCode, cell.isDaytime), iconPx)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
<!-- Temperature -->
|
||||
{#if showRow('temperature')}
|
||||
<tr class="row">
|
||||
{@render rowHeader('wi-thermometer', tempUnit, 'Temp')}
|
||||
{#each cellData as cell (cell.idx)}
|
||||
{@const temp = hourly.temperature_2m[cell.idx]}
|
||||
{@const style = getTempStyle(temp, String(units.temperature_unit))}
|
||||
<td
|
||||
class="cell h-10 font-bold {is3h ? 'text-lg' : 'text-[15px]'}"
|
||||
style="background-color:{style.bg};color:{style.fg}"
|
||||
>
|
||||
{formatTemp(temp)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
<!-- Feels Like -->
|
||||
{#if showRow('feels')}
|
||||
<tr class="row">
|
||||
{@render rowHeader(undefined, tempUnit, 'Feels')}
|
||||
{#each cellData as cell (cell.idx)}
|
||||
{@const temp = hourly.apparent_temperature[cell.idx]}
|
||||
<td class="cell h-8 text-muted-foreground {is3h ? 'text-[13px]' : 'text-[11px]'}">
|
||||
{formatTemp(temp)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
<!-- Wind -->
|
||||
{#if showRow('wind')}
|
||||
<tr class="row">
|
||||
{@render rowHeader('wi-strong-wind', windUnit, 'Wind')}
|
||||
{#each cellData as cell (cell.idx)}
|
||||
{@const wind = hourly.windspeed_10m[cell.idx]}
|
||||
{@const windDir = hourly.winddirection_10m[cell.idx]}
|
||||
<td class="cell h-13 align-middle leading-tight">
|
||||
{#if windDir != null && !isNaN(windDir)}
|
||||
<span
|
||||
class="inline-block leading-0"
|
||||
style="transform:{getWindArrowRotation(windDir)}"
|
||||
class="absolute bottom-0.5 left-1 text-[10px] leading-none font-semibold whitespace-nowrap text-amber-700 dark:text-amber-300"
|
||||
>
|
||||
{@render weatherIcon('wi-direction-down', 22)}
|
||||
<svg
|
||||
class="inline-block fill-foreground"
|
||||
width="12px"
|
||||
height="12px"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use
|
||||
class="stroke-2"
|
||||
xlink:href="/images/weather-icons/wi-sunrise.svg#Layer_1"
|
||||
></use>
|
||||
</svg>
|
||||
<span class="align-middle">{formatTime(sunTimes.sunrise)}</span>
|
||||
</span>
|
||||
{/if}
|
||||
<span class="block font-semibold {is3h ? 'text-sm' : 'text-xs'}">
|
||||
{formatValue(wind)}
|
||||
</div>
|
||||
<!-- Sunset marker + label -->
|
||||
<div
|
||||
class="absolute inset-y-0 w-px bg-indigo-400/70"
|
||||
style="left:{sunsetPercent}%"
|
||||
>
|
||||
<span
|
||||
class="absolute right-1 bottom-0.5 inline-flex items-center gap-1 text-[10px] leading-none font-semibold whitespace-nowrap text-indigo-600 dark:text-indigo-300"
|
||||
>
|
||||
<svg
|
||||
class="inline-block fill-foreground"
|
||||
width="12px"
|
||||
height="12px"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use
|
||||
class="stroke-2"
|
||||
xlink:href="/images/weather-icons/wi-sunset.svg#Layer_1"
|
||||
></use>
|
||||
</svg>
|
||||
<span class="align-middle">{formatTime(sunTimes.sunset)}</span>
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Hour labels -->
|
||||
{#each cellData as cell, i (cell.idx)}
|
||||
{@const leftPct = (i / cellData.length) * 100}
|
||||
{@const widthPct = 100 / cellData.length}
|
||||
<span
|
||||
class="absolute top-0 flex items-start pt-1.5 pl-1 text-sm font-bold
|
||||
{cell.isNow ? 'text-red-600 dark:text-red-400' : ''}"
|
||||
style="left:{leftPct}%;width:{widthPct}%"
|
||||
>
|
||||
{#if is3h}
|
||||
{formatZoned(cell.date, data.timezone, 'HH')}
|
||||
{:else}
|
||||
<span class="inline-flex items-baseline gap-1">
|
||||
<span class="text-[11px] font-semibold"
|
||||
>{formatZoned(cell.date, data.timezone, 'HH')}</span
|
||||
>
|
||||
<sup
|
||||
class="align-baseline text-[9px] leading-none font-semibold text-muted-foreground"
|
||||
>00</sup
|
||||
>
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
</td>
|
||||
{/each}
|
||||
{/each}
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
<!-- Humidity -->
|
||||
{#if showRow('humidity')}
|
||||
<tr class="row">
|
||||
{@render rowHeader('wi-humidity', '%', 'Humidity')}
|
||||
{#each cellData as cell (cell.idx)}
|
||||
{@const hum = hourly.relative_humidity_2m[cell.idx]}
|
||||
<td class="cell h-8" style="background:{getHumidityBg(hum ?? 0)}">
|
||||
{formatValue(hum)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
<!-- Weather Icons -->
|
||||
{#if showRow('icons')}
|
||||
<tr class="row">
|
||||
{@render rowHeader('wi-day-cloudy')}
|
||||
{#each cellData as cell, i (cell.idx)}
|
||||
{@const wCode = hourly.weather_code[cell.idx]}
|
||||
<td
|
||||
class="cell leading-0 {is3h ? 'h-14' : 'h-11'}"
|
||||
class:icon-day={cell.isDaytime}
|
||||
class:icon-night={!cell.isDaytime}
|
||||
class:icon-dawn={!cell.isDaytime && cellData[i + 1]?.isDaytime}
|
||||
class:icon-dusk={cell.isDaytime &&
|
||||
cellData[i + 1] &&
|
||||
!cellData[i + 1].isDaytime}
|
||||
>
|
||||
{@render weatherIcon(getWeatherIconName(wCode, cell.isDaytime), iconPx)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
<!-- Cloud Cover -->
|
||||
{#if showRow('clouds')}
|
||||
<tr class="row">
|
||||
{@render rowHeader('wi-cloud', '%', 'Clouds')}
|
||||
{#each cellData as cell (cell.idx)}
|
||||
{@const cloud = hourly.cloud_cover[cell.idx]}
|
||||
<td
|
||||
class="cell h-8"
|
||||
style="background:rgba(140,160,180,{getCloudOpacity(cloud ?? 0)})"
|
||||
>
|
||||
{formatValue(cloud)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
<!-- Temperature -->
|
||||
{#if showRow('temperature')}
|
||||
<tr class="row">
|
||||
{@render rowHeader('wi-thermometer', tempUnit, 'Temp')}
|
||||
{#each cellData as cell (cell.idx)}
|
||||
{@const temp = hourly.temperature_2m[cell.idx]}
|
||||
{@const style = getTempStyle(temp, String(units.temperature_unit))}
|
||||
<td
|
||||
class="cell h-10 font-bold {is3h ? 'text-lg' : 'text-[15px]'}"
|
||||
style="background-color:{style.bg};color:{style.fg}"
|
||||
>
|
||||
{formatTemp(temp)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
<!-- Precipitation -->
|
||||
{#if showRow('precipitation')}
|
||||
<tr class="row">
|
||||
{@render rowHeader('wi-raindrop', precipUnit, 'Precip')}
|
||||
{#each cellData as cell (cell.idx)}
|
||||
{@const precip = hourly.precipitation[cell.idx]}
|
||||
{@const prob = hourly.precipitation_probability[cell.idx]}
|
||||
<td
|
||||
class="cell precip-cell {is3h ? 'h-14' : 'h-11'}"
|
||||
style="background:{getPrecipProbBg(prob ?? 0)}"
|
||||
title={formatPrecipTooltip(precip, prob)}
|
||||
>
|
||||
{#if precip > 0}
|
||||
<div class="precip-bar" style="height:{getPrecipBarHeight(precip)}%"></div>
|
||||
<span class="precip-label {is3h ? 'text-[13px]' : 'text-[10px]'}">
|
||||
{precip.toFixed(1)}
|
||||
<!-- Feels Like -->
|
||||
{#if showRow('feels')}
|
||||
<tr class="row">
|
||||
{@render rowHeader(undefined, tempUnit, 'Feels')}
|
||||
{#each cellData as cell (cell.idx)}
|
||||
{@const temp = hourly.apparent_temperature[cell.idx]}
|
||||
<td class="cell h-8 text-muted-foreground {is3h ? 'text-[13px]' : 'text-[11px]'}">
|
||||
{formatTemp(temp)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
<!-- Wind -->
|
||||
{#if showRow('wind')}
|
||||
<tr class="row">
|
||||
{@render rowHeader('wi-strong-wind', windUnit, 'Wind')}
|
||||
{#each cellData as cell (cell.idx)}
|
||||
{@const wind = hourly.windspeed_10m[cell.idx]}
|
||||
{@const windDir = hourly.winddirection_10m[cell.idx]}
|
||||
<td class="cell h-13 align-middle leading-tight">
|
||||
{#if windDir != null && !isNaN(windDir)}
|
||||
<span
|
||||
class="inline-block leading-0"
|
||||
style="transform:{getWindArrowRotation(windDir)}"
|
||||
>
|
||||
{@render weatherIcon('wi-direction-down', 22)}
|
||||
</span>
|
||||
{/if}
|
||||
<span class="block font-semibold {is3h ? 'text-sm' : 'text-xs'}">
|
||||
{formatValue(wind)}
|
||||
</span>
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
<!-- "Now" column highlight + exact-time line -->
|
||||
{#if nowLeftPx != null}
|
||||
{@const colWidth = (tableWidth - headerColWidth) / cellData.length}
|
||||
{@const nowIdx = cellData.findIndex((c) => c.isNow)}
|
||||
{#if nowIdx >= 0}
|
||||
<!-- Humidity -->
|
||||
{#if showRow('humidity')}
|
||||
<tr class="row">
|
||||
{@render rowHeader('wi-humidity', '%', 'Humidity')}
|
||||
{#each cellData as cell (cell.idx)}
|
||||
{@const hum = hourly.relative_humidity_2m[cell.idx]}
|
||||
<td class="cell h-8" style="background:{getHumidityBg(hum ?? 0)}">
|
||||
{formatValue(hum)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
<!-- Cloud Cover -->
|
||||
{#if showRow('clouds')}
|
||||
<tr class="row">
|
||||
{@render rowHeader('wi-cloud', '%', 'Clouds')}
|
||||
{#each cellData as cell (cell.idx)}
|
||||
{@const cloud = hourly.cloud_cover[cell.idx]}
|
||||
<td
|
||||
class="cell h-8"
|
||||
style="background:rgba(140,160,180,{getCloudOpacity(cloud ?? 0)})"
|
||||
>
|
||||
{formatValue(cloud)}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
<!-- Precipitation -->
|
||||
{#if showRow('precipitation')}
|
||||
<tr class="row">
|
||||
{@render rowHeader('wi-raindrop', precipUnit, 'Precip')}
|
||||
{#each cellData as cell (cell.idx)}
|
||||
{@const precip = hourly.precipitation[cell.idx]}
|
||||
{@const prob = hourly.precipitation_probability[cell.idx]}
|
||||
<td
|
||||
class="cell precip-cell {is3h ? 'h-14' : 'h-11'}"
|
||||
style="background:{getPrecipProbBg(prob ?? 0)}"
|
||||
title={formatPrecipTooltip(precip, prob)}
|
||||
>
|
||||
{#if precip > 0}
|
||||
<div class="precip-bar" style="height:{getPrecipBarHeight(precip)}%"></div>
|
||||
<span class="precip-label {is3h ? 'text-[13px]' : 'text-[10px]'}">
|
||||
{precip.toFixed(1)}
|
||||
</span>
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- "Now" column highlight + exact-time line -->
|
||||
{#if nowLeftPx != null}
|
||||
{@const colWidth = (tableWidth - headerColWidth) / cellData.length}
|
||||
{@const nowIdx = cellData.findIndex((c) => c.isNow)}
|
||||
{#if nowIdx >= 0}
|
||||
<div
|
||||
class="pointer-events-none absolute inset-y-0 z-10 border-x border-red-500/30 bg-red-500/5"
|
||||
style="left:{headerColWidth + nowIdx * colWidth}px;width:{colWidth}px"
|
||||
></div>
|
||||
{/if}
|
||||
<div
|
||||
class="pointer-events-none absolute inset-y-0 z-10 border-x border-red-500/30 bg-red-500/5"
|
||||
style="left:{headerColWidth + nowIdx * colWidth}px;width:{colWidth}px"
|
||||
></div>
|
||||
{/if}
|
||||
<div
|
||||
class="pointer-events-none absolute inset-y-0 z-10 w-0.5 -translate-x-1/2 bg-red-500/80"
|
||||
style="left:{nowLeftPx}px"
|
||||
>
|
||||
<span
|
||||
class="absolute top-1 left-1/2 -translate-x-1/2 rounded-full bg-red-500 px-1.5 py-px text-[9px] font-bold tracking-wide text-white uppercase shadow-sm"
|
||||
class="pointer-events-none absolute inset-y-0 z-10 w-0.5 -translate-x-1/2 bg-red-500/80"
|
||||
style="left:{nowLeftPx}px"
|
||||
>
|
||||
Now
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
<span
|
||||
class="absolute top-1 left-1/2 -translate-x-1/2 rounded-full bg-red-500 px-1.5 py-px text-[9px] font-bold tracking-wide text-white uppercase shadow-sm"
|
||||
>
|
||||
Now
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
@@ -511,11 +532,16 @@
|
||||
|
||||
/* ── Row header ─────────────────────────────────────────────── */
|
||||
.hdr {
|
||||
/* sticky + opaque background: stays readable while the table is
|
||||
scrolled sideways (z above the "now" overlay, which is z-10) */
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
padding: 4px 2px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
background: color-mix(in oklab, var(--color-muted) 45%, transparent);
|
||||
background: color-mix(in oklab, var(--color-muted) 45%, var(--color-card));
|
||||
border-right: 1px solid var(--color-border);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
>
|
||||
<Select.Trigger
|
||||
aria-label="{label} selection"
|
||||
class="group h-auto min-w-64 cursor-pointer gap-3 rounded-xl border-2 border-primary/35 bg-card py-2 ps-2.5 shadow-sm transition-colors hover:border-primary/70 hover:shadow-md data-[size=default]:h-auto data-[state=open]:border-primary sm:min-w-72"
|
||||
class="group h-auto min-w-0 flex-1 cursor-pointer gap-3 rounded-xl border-2 border-primary/35 bg-card py-2 ps-2.5 shadow-sm transition-colors hover:border-primary/70 hover:shadow-md data-[size=default]:h-auto data-[state=open]:border-primary sm:min-w-72 sm:flex-none"
|
||||
>
|
||||
<div
|
||||
class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary"
|
||||
|
||||
Reference in New Issue
Block a user