useweb/drizzli
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finish animations and add elevation

Browse Source
This commit is contained in:
Vincent van der Wal
2026-08-06 22:19:17 +02:00
parent d0f94094ca
commit 83b0e46e64
21 changed files with 328 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/weather/compare/[location]/+page.svelte
+56 -3
View File
@@ -143,7 +143,7 @@
// components persist across refetches; entries are null while unmounted
let liveCharts = $derived(chartComponents.filter((chart) => chart != null));
// ─── Zoom range controls (mirrors the 7-day meteograms) ─────────────────────
// ─── Zoom range controls (mirrors the week-page meteograms) ─────────────────────
const SECONDS_PER_DAY = 24 * 3600;
@@ -321,9 +321,62 @@
});
</script>
<!-- the zoom controls ride in the layout's location row (see weather/+layout) -->
<!-- the models button and zoom controls ride in the layout's location row -->
{#snippet heroActions()}
<!-- Range / zoom controls, aligned with the title like the other pages -->
<!-- Hero models control: same footprint and look as the model selector on
the other pages, so the title row lines up everywhere. Model selection
here is a multi-select grid further down, so this hands over to it. -->
<div class="flex w-full min-w-0 items-center gap-3 sm:w-auto">
<button
type="button"
class="group flex h-auto min-h-12 w-full min-w-0 flex-1 cursor-pointer items-center gap-2.5 rounded-xl border-2 border-primary/35 bg-card py-1.5 ps-2.5 pe-3 text-left shadow-sm transition-colors hover:border-primary/70 hover:shadow-md sm:min-h-14 sm:w-80 sm:flex-none sm:gap-3 sm:py-2"
onclick={() =>
document.getElementById('models')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}
>
<div
class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary sm:size-9"
>
<!-- layered-globe icon, matching the model selector -->
<svg
class="size-4.5 sm:size-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.75"
>
<circle cx="12" cy="12" r="9" />
<path
stroke-linecap="round"
d="M3.6 9h16.8M3.6 15h16.8M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18"
/>
</svg>
</div>
<div class="flex min-w-0 flex-1 flex-col items-start gap-0 overflow-hidden">
<span class="text-[11px] font-semibold tracking-wide text-primary uppercase">
{m.compare_models_heading()}
</span>
<span class="max-w-full truncate text-[13px] font-bold text-foreground sm:text-sm">
{params.models?.length || 0} / {models.flat().length}
</span>
<span
class="hidden max-w-full truncate text-[11px] leading-tight text-muted-foreground sm:block"
>
{m.compare_models_choose()}
</span>
</div>
<svg
class="size-4 shrink-0 text-muted-foreground"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
</svg>
</button>
</div>
<!-- Range / zoom controls, floated over the chart area on lg -->
<div class="lg:absolute lg:right-0 lg:top-20 z-40 flex flex-wrap items-center gap-3">
<span class="hidden text-xs text-muted-foreground lg:inline">
{m.meteograms_zoom_hint()}