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

layout shifts

Browse Source
This commit is contained in:
Vincent van der Wal
2026-08-01 13:37:04 +02:00
parent 792da49cac
commit fe961a27ae
24 changed files with 427 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.mcp.json
View File
src/lib/charts/CanvasChart.svelte
+4 -1
View File
@@ -1086,7 +1086,10 @@
for (let i = 0; i < xs.length; i++) {
const pos = Math.max(0, Math.min(1, (xs[i] - first) / span));
const cover = smoothed[i];
fill.addColorStop(pos, withAlpha(s.color, base + (peak - base) * Math.pow(cover / 100, curve)));
fill.addColorStop(
pos,
withAlpha(s.color, base + (peak - base) * Math.pow(cover / 100, curve))
);
if (edge) {
const above = Math.max(0, (cover - EDGE_FLOOR) / (100 - EDGE_FLOOR));
edge.addColorStop(pos, withAlpha(s.color, 0.85 * Math.pow(above, 1.6)));
src/lib/components/location/location-search.svelte
+22 -4
View File
@@ -48,6 +48,12 @@
);
}
/** Drop a single entry from the recent list (favourites are unaffected). */
function removeRecent(loc: GeoLocation) {
const key = locationKey(loc);
storedRecentLocations.update((list) => list.filter((l) => locationKey(l) !== key));
}
function toggleFavorite(loc: GeoLocation) {
const key = locationKey(loc);
storedFavoriteLocations.update((list) =>
@@ -126,7 +132,7 @@
})();
</script>
{#snippet locationRow(location: GeoLocation)}
{#snippet locationRow(location: GeoLocation, removable: boolean)}
{@const fav = favKeys.has(locationKey(location))}
<div
class="group flex items-center rounded-md border border-transparent transition-[background,border-color] duration-150 hover:border-border hover:bg-accent"
@@ -172,6 +178,18 @@
/>
</svg>
</button>
{#if removable}
<button
class="mr-1 flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground/50 hover:bg-background hover:text-destructive"
onclick={() => removeRecent(location)}
aria-label="Remove {location.name} from recent locations"
title="Remove from recent"
>
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" d="M6 6l12 12M18 6L6 18" />
</svg>
</button>
{/if}
</div>
{/snippet}
@@ -262,7 +280,7 @@
</div>
<div class="space-y-0.5">
{#each $storedFavoriteLocations as loc (locationKey(loc))}
{@render locationRow(loc)}
{@render locationRow(loc, false)}
{/each}
</div>
{/if}
@@ -276,7 +294,7 @@
</div>
<div class="space-y-0.5">
{#each recentToShow as loc (locationKey(loc))}
{@render locationRow(loc)}
{@render locationRow(loc, true)}
{/each}
</div>
{/if}
@@ -305,7 +323,7 @@
{:else if results.results && results.results.length > 0}
<div class="space-y-0.5">
{#each results.results as location, i (i)}
{@render locationRow(location)}
{@render locationRow(location, false)}
{/each}
</div>
{:else if results.results}
src/lib/components/navigation/footer.svelte
+6 -2
View File
@@ -1,6 +1,8 @@
<script lang="ts">
import { resolve } from '$app/paths';
import LogoMark from './logo-mark.svelte';
// A hand-picked set of the prerendered city pages (see
// routes/weather/locations/city-names100.json) — instant navigation targets
// that double as SEO entry points.
@@ -37,9 +39,11 @@
<!-- Brand -->
<div class="max-w-xs">
<div class="flex items-center gap-2">
<span class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-lg"
>☔</span
<span
class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground"
>
<LogoMark />
</span>
<span class="text-lg font-bold tracking-tight">Drizz.li</span>
</div>
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">
src/lib/components/navigation/header.svelte
+17 -6
View File
@@ -74,16 +74,26 @@
<header
class="topbar flex h-14 shrink-0 items-center gap-3 border-b border-topbar-border bg-topbar px-3 md:px-4"
>
<!-- Mobile menu toggle -->
<!-- Mobile menu toggle. On phones this side and the settings side both take
an equal share of the leftover width, which lands the search box dead
centre; on md+ they collapse and the spacer below does the work. -->
<div class="flex flex-1 items-center md:flex-none">
<button
class="-ms-1 flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground md:hidden"
onclick={onMenuToggle}
aria-label="Toggle menu"
>
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
<svg
class="h-5 w-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.75"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<!-- Current location display -->
{#if location}
@@ -109,8 +119,8 @@
</div>
{/if}
<!-- Spacer -->
<div class="flex-1"></div>
<!-- Spacer (md+ only: on phones the equal side columns centre the search) -->
<div class="hidden flex-1 md:block"></div>
<!-- Location search: primary way to switch places, so keep it loud -->
<div class="w-full max-w-sm md:max-w-md">
@@ -123,8 +133,9 @@
</div>
<!-- Phones only have room for one control, so units, theme and supporter
status collapse into a single settings menu below md. -->
<div class="md:hidden">
status collapse into a single settings menu below md. This side mirrors
the menu-button column so the search lands dead centre. -->
<div class="flex flex-1 justify-end md:hidden">
<SettingsMenu />
</div>
src/lib/components/navigation/logo-mark.svelte
+21
View File
@@ -0,0 +1,21 @@
<script lang="ts">
// umbrella-with-rain mark (matches the favicon); shared by the sidebar home
// link and the footer so the brand reads the same in both places
interface Props {
class?: string;
}
let { class: className = 'h-5 w-5' }: Props = $props();
</script>
<svg class={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
<!-- rain falls from above onto the canopy -->
<path stroke-linecap="round" d="M4.5 3v.01M19.5 3v.01M8.5 1.5v.01M15.5 2.5v.01" />
<path stroke-linecap="round" d="M12 4.5V6" />
<path
fill="currentColor"
stroke="none"
d="M4 14a8 8 0 0 1 16 0c-.66-1-1.99-1-2.66 0-.67-1-2-1-2.67 0-.67-1-2-1-2.67 0-.67-1-2-1-2.67 0C8.66 13 7.33 13 6.66 14 6 13 4.66 13 4 14Z"
/>
<path stroke-linecap="round" d="M12 14v5a1.9 1.9 0 0 1-3.8 0" />
</svg>
src/lib/components/navigation/weather-nav.svelte
+3 -18
View File
@@ -2,6 +2,8 @@
import { resolve } from '$app/paths';
import { page } from '$app/stores';
import LogoMark from './logo-mark.svelte';
interface Props {
collapsed?: boolean;
onToggle?: () => void;
@@ -78,24 +80,7 @@
<div
class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground"
>
<!-- umbrella-with-rain logo mark (matches favicon) -->
<svg
class="h-5 w-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.75"
>
<!-- rain falls from above onto the canopy -->
<path stroke-linecap="round" d="M4.5 3v.01M19.5 3v.01M8.5 1.5v.01M15.5 2.5v.01" />
<path stroke-linecap="round" d="M12 4.5V6" />
<path
fill="currentColor"
stroke="none"
d="M4 14a8 8 0 0 1 16 0c-.66-1-1.99-1-2.66 0-.67-1-2-1-2.67 0-.67-1-2-1-2.67 0-.67-1-2-1-2.67 0C8.66 13 7.33 13 6.66 14 6 13 4.66 13 4 14Z"
/>
<path stroke-linecap="round" d="M12 14v5a1.9 1.9 0 0 1-3.8 0" />
</svg>
<LogoMark />
</div>
{#if !collapsed}
<span class="text-sm font-bold tracking-tight whitespace-nowrap text-sidebar-foreground">
src/lib/paywall/PaywallGate.svelte
+2 -2
View File
@@ -2,8 +2,8 @@
import { onMount } from 'svelte';
import UnlockDialog from './UnlockDialog.svelte';
import { SUPPORTER_PERKS, SIGNUP_URL, getSupporterPrice } from './config';
import { isSupporter, supporterState, refreshSupporter } from './supporter';
import { SIGNUP_URL, SUPPORTER_PERKS, getSupporterPrice } from './config';
import { isSupporter, refreshSupporter, supporterState } from './supporter';
interface Props {
/** Short feature name shown in the locked panel headline. */
src/lib/paywall/UnlockDialog.svelte
+7 -1
View File
@@ -7,7 +7,13 @@
import { Label } from '$lib/components/ui/label';
import { SIGNUP_URL, getSupporterPrice } from './config';
import { clearLicense, isSupporter, supporterState, storedLicenseKey, verifyKey } from './supporter';
import {
clearLicense,
isSupporter,
storedLicenseKey,
supporterState,
verifyKey
} from './supporter';
interface Props {
open?: boolean;
src/lib/stores/settings.ts
+9
View File
@@ -138,6 +138,15 @@ export const defaultChartLayout: ChartPanel[] = [
export const storedChartLayout = persisted<ChartPanel[]>('chart_layout_v1', defaultChartLayout);
/**
* Time range the meteograms open on. 'auto' narrows to three days on a phone,
* where a full week of hours is too dense to read, and shows everything on
* roomier screens.
*/
export type ChartRangePref = 'auto' | 'today' | '3d' | '5d' | 'all';
export const storedChartRange = persisted<ChartRangePref>('chart_range_v1', 'auto');
/** Selected ensemble model for the 14-day spread forecast. */
export const storedEnsembleModel = persisted<string>('ensemble_model', 'ncep_gefs_seamless');
src/routes/+layout.svelte
+21 -4
View File
@@ -17,12 +17,22 @@
// keep the .dark class in sync with the persisted theme; in 'system' mode
// follow the OS preference live
let themeSettled = false;
let themeTimer = 0;
$effect(() => {
const theme = $storedTheme;
const mq = window.matchMedia('(prefers-color-scheme: dark)');
const apply = () => {
const dark = theme === 'dark' || (theme === 'system' && mq.matches);
document.documentElement.classList.toggle('dark', dark);
const root = document.documentElement;
// The very first application is just painting the stored theme - only
// an actual switch afterwards is worth cross-fading.
if (themeSettled) {
root.classList.add('theme-transition');
clearTimeout(themeTimer);
themeTimer = window.setTimeout(() => root.classList.remove('theme-transition'), 400);
}
themeSettled = true;
root.classList.toggle('dark', theme === 'dark' || (theme === 'system' && mq.matches));
};
apply();
mq.addEventListener('change', apply);
@@ -83,15 +93,22 @@
<div class="flex min-w-0 flex-1 flex-col h-full">
<Header onMenuToggle={toggleMobileMenu} />
<!-- The padding stays on <main> itself: the day strip sticks with a
negative offset that exactly cancels it, so moving it to an inner
wrapper would dock the strip too high and clip its top row.
flex-col + flex-1 below keeps the footer on the bottom edge even when
the page is too short to fill the viewport. -->
<main
class={fullBleed ? 'flex-1 overflow-hidden' : 'flex-1 overflow-y-auto p-3 lg:px-8 lg:py-6'}
class={fullBleed
? 'flex-1 overflow-hidden'
: 'flex flex-1 flex-col overflow-y-auto p-3 lg:px-8 lg:py-6'}
>
{#if fullBleed}
{@render children()}
{:else}
<!-- cap the content width on very large screens; the footer below
gives the page its ending, so only modest bottom room is needed -->
<div class="mx-auto w-full max-w-[1536px] pb-24">
<div class="mx-auto w-full max-w-[1536px] flex-1 pb-24">
{@render children()}
</div>
<!-- full-bleed footer inside the scroll area (its own inner max-w),
src/routes/layout.css
+26
View File
@@ -132,4 +132,30 @@
body {
@apply bg-background text-foreground;
}
/* Added around a theme change only (see routes/+layout.svelte), so the whole
page cross-fades between light and dark instead of snapping. It is off the
rest of the time: a permanent global transition would smear every hover
and every chart repaint. */
:root.theme-transition,
:root.theme-transition *,
:root.theme-transition *::before,
:root.theme-transition *::after {
transition:
background-color 400ms ease,
border-color 400ms ease,
color 400ms ease,
fill 400ms ease,
stroke 400ms ease,
box-shadow 400ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
:root.theme-transition,
:root.theme-transition *,
:root.theme-transition *::before,
:root.theme-transition *::after {
transition: none !important;
}
}
}
src/routes/legal/imprint/+page.svelte
+4 -7
View File
@@ -9,17 +9,14 @@
<h2>Service provider</h2>
<address>
Vincent van der Wal<br />
[Street and number]<br />
[Postal code, City]<br />
[Country]
Tschalungasse 2<br />
CH-6442 Gersau<br />
Switzerland
</address>
<p>
Email: <a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
</p>
<p>
Drizz.li is operated as a personal, independent project. Responsible for the content of this
website: Vincent van der Wal (address above).
</p>
<p>Drizz.li is operated as a personal, independent project.</p>
<h2>Disclaimer</h2>
<p>
src/routes/legal/privacy/+page.svelte
+3 -2
View File
@@ -15,8 +15,9 @@
<h2>1. Controller</h2>
<address>
Vincent van der Wal<br />
[Street and number], [Postal code, City], [Country]<br />
Email: <a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
Tschalungasse 2, CH-6442 Gersau, Switzerland <br />
Email:
<a href="mailto:drizzli@vincentvanderwal.nl">drizzli@vincentvanderwal.nl</a>
</address>
<p>
This policy covers the websites drizz.li (the weather app) and support.drizz.li (the supporter
src/routes/weather/+layout.svelte
+61 -1
View File
@@ -1,9 +1,69 @@
<script lang="ts">
import { setContext } from 'svelte';
import { page } from '$app/stores';
import { storedLocation } from '$lib/stores/settings';
import type { Snippet } from 'svelte';
interface Props {
children?: import('svelte').Snippet;
children?: Snippet;
}
let { children }: Props = $props();
// The location heading lives in the layout, not in each page: a layout
// survives navigation, so switching between forecasts no longer tears the
// heading down and rebuilds it once the next page's data has loaded.
// Page-specific controls (model pickers, range buttons) render into the same
// row through this context.
let actions = $state<Snippet | null>(null);
setContext('weather-hero', {
setActions: (snippet: Snippet | null) => {
actions = snippet;
}
});
// Page data wins; the persisted store covers the moment before the first
// load resolves (and any weather page that doesn't carry a location).
let location = $derived($page.data.location ?? $storedLocation);
const SUBTITLES: [string, string][] = [
['/weather/week', '7-day forecast'],
['/weather/compare', 'Model comparison'],
['/weather/14-day', '14-day ensemble forecast'],
['/weather/seasonal', 'Seasonal outlook'],
['/weather/historical', 'Historical weather']
];
let subtitle = $derived(
SUBTITLES.find(([prefix]) => $page.url.pathname.startsWith(prefix))?.[1] ?? null
);
</script>
{#if subtitle && location}
<div class="relative mb-3 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 md:mb-5">
<div class="flex min-w-0 items-center gap-3">
<img
class="h-10 w-10 shrink-0 rounded-full shadow-sm ring-2 ring-border"
src="/images/country-flags/{(location.country_code || 'united_nations').toLowerCase()}.svg"
alt={location.country ?? ''}
/>
<div class="min-w-0">
<h1 class="truncate text-2xl leading-tight font-bold tracking-tight md:text-3xl">
{location.name}
</h1>
<p class="truncate text-sm text-muted-foreground">
<span class="lg:hidden"
>{#if location.admin1}{location.admin1},
{/if}{location.country ?? ''}<span class="mx-1 opacity-50">·</span></span
>{subtitle}
</p>
</div>
</div>
{#if actions}{@render actions()}{/if}
</div>
{/if}
{@render children?.()}
src/routes/weather/14-day/[location]/+page.svelte
+6 -23
View File
@@ -15,6 +15,7 @@
fetchEnsembleForecast
} from '$lib/services/weather';
import { useHeroActions } from '../../hero.svelte';
import { defaultParameters, ensembleModelGroups } from '../../options';
import ModelSelector from '../../week/[location]/ModelSelector.svelte';
@@ -36,6 +37,8 @@
let { data }: { data: PageData } = $props();
useHeroActions(heroActions);
// the URL is the source of truth: location comes from the load function,
// which is also correct on hydrated prerendered pages. The persisted store
// only mirrors it so the header and bare /weather/* redirects follow along.
@@ -272,28 +275,8 @@
});
</script>
<!-- ─── Page hero: location + ensemble model selection ─────────────────────── -->
<div class="relative mb-3 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 md:mb-5">
<div class="flex min-w-0 items-center gap-3">
<img
class="h-10 w-10 shrink-0 rounded-full shadow-sm ring-2 ring-border"
src="/images/country-flags/{(location.country_code || 'united_nations').toLowerCase()}.svg"
alt={location.country ?? ''}
/>
<div class="min-w-0">
<h1 class="truncate text-2xl leading-tight font-bold tracking-tight md:text-3xl">
{location.name}
</h1>
<p class="truncate text-sm text-muted-foreground">
<span class="lg:hidden"
>{#if location.admin1}{location.admin1},
{/if}{location.country ?? ''}<span class="mx-1 opacity-50">·</span></span
>14-day ensemble forecast
</p>
</div>
</div>
<!-- the ensemble picker rides in the layout's location row (see weather/+layout) -->
{#snippet heroActions()}
<div class="lg:absolute lg:right-0 lg:top-0 flex w-full items-center gap-3 sm:w-auto">
<ModelSelector
selectedModel={params.models?.[0] ?? 'ncep_gefs_seamless'}
@@ -305,7 +288,7 @@
}}
/>
</div>
</div>
{/snippet}
<!-- ─── Chart Area ─────────────────────────────────────────────────────────── -->
src/routes/weather/compare/[location]/+page.svelte
+6 -23
View File
@@ -28,6 +28,7 @@
fetchModelComparison
} from '$lib/services/weather';
import { useHeroActions } from '../../hero.svelte';
import { findModel, hourly, modelGroups } from '../../options';
import { defaultParameters } from '../../options';
import ModelPictogramTimeline from './ModelPictogramTimeline.svelte';
@@ -52,6 +53,8 @@
let { data }: { data: PageData } = $props();
useHeroActions(heroActions);
// the URL is the source of truth: location comes from the load function,
// which is also correct on hydrated prerendered pages. The persisted store
// only mirrors it so the header and bare /weather/* redirects follow along.
@@ -280,28 +283,8 @@
});
</script>
<!-- ─── Page hero: location (matches the other forecast pages) ──────────────── -->
<div class="relative mb-3 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 md:mb-5">
<div class="flex min-w-0 items-center gap-3">
<img
class="h-10 w-10 shrink-0 rounded-full shadow-sm ring-2 ring-border"
src="/images/country-flags/{(location.country_code || 'united_nations').toLowerCase()}.svg"
alt={location.country ?? ''}
/>
<div class="min-w-0">
<h1 class="truncate text-2xl leading-tight font-bold tracking-tight md:text-3xl">
{location.name}
</h1>
<p class="truncate text-sm text-muted-foreground">
<span class="lg:hidden"
>{#if location.admin1}{location.admin1},
{/if}{location.country ?? ''}<span class="mx-1 opacity-50">·</span></span
>Model comparison
</p>
</div>
</div>
<!-- the zoom controls ride in the layout's location row (see weather/+layout) -->
{#snippet heroActions()}
<!-- Range / zoom controls, aligned with the title like the other pages -->
<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">
@@ -345,7 +328,7 @@
{/each}
</div>
</div>
</div>
{/snippet}
<!-- ─── Chart Area ─────────────────────────────────────────────────────────── -->
src/routes/weather/hero.svelte.ts
+20
View File
@@ -0,0 +1,20 @@
import { getContext } from 'svelte';
import type { Snippet } from 'svelte';
interface HeroContext {
setActions: (snippet: Snippet | null) => void;
}
/**
* Renders a page's own controls into the shared location row that lives in
* `weather/+layout.svelte`. The row itself stays mounted across navigation;
* only the controls swap, and they are cleared when the page unmounts.
*/
export function useHeroActions(actions: Snippet): void {
const hero = getContext<HeroContext>('weather-hero');
$effect(() => {
hero.setActions(actions);
return () => hero.setActions(null);
});
}
src/routes/weather/historical/[location]/+page.svelte
-22
View File
@@ -204,28 +204,6 @@
<meta name="description" content="Past weather and climate-normal comparisons for any location" />
</svelte:head>
<!-- Page hero -->
<div class="relative mb-3 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 md:mb-5">
<div class="flex min-w-0 items-center gap-3">
<img
class="h-10 w-10 shrink-0 rounded-full shadow-sm ring-2 ring-border"
src="/images/country-flags/{(location.country_code || 'united_nations').toLowerCase()}.svg"
alt={location.country ?? ''}
/>
<div class="min-w-0">
<h1 class="truncate text-2xl leading-tight font-bold tracking-tight md:text-3xl">
{location.name}
</h1>
<p class="truncate text-sm text-muted-foreground">
<span class="lg:hidden"
>{#if location.admin1}{location.admin1},
{/if}{location.country ?? ''}<span class="mx-1 opacity-50">·</span></span
>Historical weather
</p>
</div>
</div>
</div>
<PaywallGate feature="Historical weather">
<DateRangeControls
start={startDate}
src/routes/weather/seasonal/[location]/+page.svelte
+6 -22
View File
@@ -17,6 +17,7 @@
fetchSeasonalForecast
} from '$lib/services/weather';
import { useHeroActions } from '../../hero.svelte';
import { defaultParameters } from '../../options';
import { getPrecipUnit } from '../../week/[location]/types';
import SeasonalCharts from './SeasonalCharts.svelte';
@@ -28,6 +29,8 @@
let { data }: { data: PageData } = $props();
useHeroActions(heroActions);
// the URL is the source of truth: location comes from the load function,
// which is also correct on hydrated prerendered pages. The persisted store
// only mirrors it so the header and bare /weather/* redirects follow along.
@@ -173,27 +176,8 @@
/>
</svelte:head>
<!-- Page hero -->
<div class="relative mb-3 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 md:mb-5">
<div class="flex min-w-0 items-center gap-3">
<img
class="h-10 w-10 shrink-0 rounded-full shadow-sm ring-2 ring-border"
src="/images/country-flags/{(location.country_code || 'united_nations').toLowerCase()}.svg"
alt={location.country ?? ''}
/>
<div class="min-w-0">
<h1 class="truncate text-2xl leading-tight font-bold tracking-tight md:text-3xl">
{location.name}
</h1>
<p class="truncate text-sm text-muted-foreground">
<span class="lg:hidden"
>{#if location.admin1}{location.admin1},
{/if}{location.country ?? ''}<span class="mx-1 opacity-50">·</span></span
>Seasonal outlook
</p>
</div>
</div>
<!-- the range buttons ride in the layout's location row (see weather/+layout) -->
{#snippet heroActions()}
{#if result}
<!-- range buttons reslice the already-fetched horizon (no refetch) -->
<div
@@ -220,7 +204,7 @@
{/each}
</div>
{/if}
</div>
{/snippet}
<!-- What a seasonal forecast is (and is not): without this the daily-looking
charts invite over-reading. -->
src/routes/weather/week/[location]/+page.svelte
+48 -34
View File
@@ -23,6 +23,7 @@
humanizeWeatherError
} from '$lib/services/weather';
import { useHeroActions } from '../../hero.svelte';
import { defaultParameters } from '../../options';
import { computeDayNightWeatherCodes } from '../../utils/weather-codes';
import DailyStripSticky from './DailyStripSticky.svelte';
@@ -37,6 +38,8 @@
let { data }: { data: PageData } = $props();
useHeroActions(heroActions);
let params = $state({
models: ['best_match'],
...defaultParameters
@@ -56,6 +59,14 @@
// arrives (no layout shift)
let enabledChartCount = $derived($storedChartLayout.filter((p) => p.variables.length > 0).length);
// Height the hourly table will occupy once it renders, so its placeholder
// reserves exactly that and nothing below it jumps. The table is a header row
// plus one row per enabled variable, so the count drives the estimate.
const TABLE_HEADER_PX = 96;
const TABLE_ROW_PX = 57;
let enabledTableRows = $derived(Object.values($storedVariablePrefs.table).filter(Boolean).length);
let tableSkeletonHeight = $derived(TABLE_HEADER_PX + enabledTableRows * TABLE_ROW_PX);
// Request only the hourly variables the table rows and meteograms actually
// show, so unused variables are never fetched. weather_code is always
// included: the day cards / strip derive their day- and night-period icons
@@ -200,31 +211,8 @@
<meta name="description" content="7-day weather forecast with detailed hourly data" />
</svelte:head>
<div class="week-page">
<div class="weather-content" style="min-height: 50vh">
<!-- Page hero: prominent location + weather model selection -->
<div class="relative flex flex-wrap items-center justify-between gap-x-6 gap-y-3 md:mb-5">
<div class="flex min-w-0 items-center gap-3">
<img
class="h-10 w-10 shrink-0 rounded-full shadow-sm ring-2 ring-border"
src="/images/country-flags/{(
location.country_code || 'united_nations'
).toLowerCase()}.svg"
alt={location.country ?? ''}
/>
<div class="min-w-0">
<h1 class="truncate text-2xl leading-tight font-bold tracking-tight md:text-3xl">
{location.name}
</h1>
<p class="truncate text-sm text-muted-foreground">
<span class="lg:hidden"
>{#if location.admin1}{location.admin1},
{/if}{location.country ?? ''}<span class="mx-1 opacity-50">·</span></span
>7-day forecast
</p>
</div>
</div>
<!-- the model picker rides in the layout's location row (see weather/+layout) -->
{#snippet heroActions()}
<div class="lg:absolute lg:right-0 lg:top-0 flex w-full min-w-0 items-center gap-3 sm:w-auto">
<ModelSelector
selectedModel={params.models?.[0] ?? 'best_match'}
@@ -237,8 +225,10 @@
}}
/>
</div>
</div>
{/snippet}
<div class="week-page">
<div class="weather-content" style="min-height: 50vh">
<VariableSidebar open={variableSidebarOpen} onClose={() => (variableSidebarOpen = false)} />
{#if loadError}
@@ -314,7 +304,9 @@
the strip's sentinel view-timeline so the sticky strip (a sibling of
the sentinel) can scrub its collapse from it. -->
<div style="timeline-scope: --daystrip-sentinel">
{#if fetchedDaily}
<!-- rendered even before the data lands: the strip's box is a fixed
height, so keeping it mounted reserves its space (it shows skeleton
tiles meanwhile) instead of shoving the page down on arrival -->
<DailyStripSticky
daily={fetchedDaily}
{selectedDay}
@@ -326,7 +318,6 @@
onExtendPast={() => (pastDays = 3)}
{locationRoute}
/>
{/if}
{#if fetchedHourly && fetchedDaily}
<HourlyTable
@@ -338,18 +329,41 @@
onCustomize={() => (variableSidebarOpen = true)}
/>
{:else}
<!-- placeholder with the table's approximate height: no layout shift -->
<!-- Mirrors the real table: same header bar and the same body height,
so the heading doesn't pop in and nothing below moves.
Placeholders only fade IN - a fade-out would keep them in the
layout while the real content mounts below, and everything below
would jump the moment they finally unmount. -->
<div
transition:fade={{ duration: 200 }}
class="h-107.5 animate-pulse rounded-2xl border border-border/70 bg-card"
></div>
in:fade={{ duration: 200 }}
class="-mx-3 overflow-hidden border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border"
>
<div
class="flex items-center justify-between gap-2 border-b border-border/70 bg-muted/40 px-4 py-2.5"
>
<div class="h-6 w-44 animate-pulse rounded bg-muted"></div>
<div class="flex items-center gap-2">
<div class="h-8 w-24 animate-pulse rounded-lg bg-muted"></div>
<div class="h-8 w-20 animate-pulse rounded-lg bg-muted"></div>
</div>
</div>
<div class="animate-pulse bg-card" style="height: {tableSkeletonHeight}px"></div>
</div>
{/if}
{#if fetchedHourly}
<MeteogramCharts data={fetchedHourly} {selectedDay} units={params} {loading} />
{:else}
<!-- reserve the exact chart area height before the first fetch resolves -->
<section class="mt-8" transition:fade={{ duration: 200 }}>
<!-- reserve the exact chart area height before the first fetch resolves,
header row included -->
<section class="mt-8" in:fade={{ duration: 200 }}>
<div class="mb-3 flex flex-wrap items-center justify-between gap-2">
<div class="h-7 w-52 animate-pulse rounded bg-muted"></div>
<div class="flex items-center gap-3">
<div class="h-7 w-56 animate-pulse rounded-lg bg-muted"></div>
<div class="h-7 w-24 animate-pulse rounded-lg bg-muted"></div>
</div>
</div>
<ChartContainer loading chartCount={enabledChartCount || 1} chartHeight={300} />
</section>
{/if}
src/routes/weather/week/[location]/ChartCustomizer.svelte
+43 -1
View File
@@ -1,7 +1,13 @@
<script lang="ts">
import { fade, fly } from 'svelte/transition';
import { type ChartPanel, defaultChartLayout, storedChartLayout } from '$lib/stores/settings';
import {
type ChartPanel,
type ChartRangePref,
defaultChartLayout,
storedChartLayout,
storedChartRange
} from '$lib/stores/settings';
import { CHART_VARIABLES, VARIABLE_BY_KEY } from './variables';
@@ -14,6 +20,14 @@
// Variables not placed in any panel form the "available" pool.
let usedKeys = $derived(new Set($storedChartLayout.flatMap((p) => p.variables)));
const RANGE_OPTIONS: { value: ChartRangePref; label: string; hint: string }[] = [
{ value: 'auto', label: 'Auto', hint: '3 days on phones, everything on wider screens' },
{ value: 'today', label: 'Today', hint: 'Open on the current day' },
{ value: '3d', label: '3 days', hint: 'Open on the next three days' },
{ value: '5d', label: '5 days', hint: 'Open on the next five days' },
{ value: 'all', label: 'All', hint: 'Open on the full forecast' }
];
let availableVars = $derived(CHART_VARIABLES.filter((v) => !usedKeys.has(v.key)));
// ─── Drag state ─────────────────────────────────────────────────────────────
@@ -159,6 +173,34 @@
</div>
<div class="flex-1 space-y-4 overflow-y-auto px-5 py-4">
<!-- Which slice of the forecast the meteograms open on -->
<div class="rounded-xl border border-border p-3">
<div class="mb-2 flex items-baseline justify-between gap-2">
<span class="text-[11px] font-bold tracking-wider text-primary uppercase">
Default time range
</span>
<span class="text-[11px] text-muted-foreground">
{RANGE_OPTIONS.find((o) => o.value === $storedChartRange)?.hint}
</span>
</div>
<div class="flex gap-1 rounded-lg bg-muted p-0.5">
{#each RANGE_OPTIONS as option (option.value)}
{@const active = $storedChartRange === option.value}
<button
type="button"
class="flex-1 cursor-pointer rounded-md px-2 py-1.5 text-[13px] font-semibold whitespace-nowrap transition-colors {active
? 'bg-background text-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground'}"
aria-pressed={active}
title={option.hint}
onclick={() => storedChartRange.set(option.value)}
>
{option.label}
</button>
{/each}
</div>
</div>
{#each $storedChartLayout as panel, i (panel.id)}
<div
data-zone={panel.id}
src/routes/weather/week/[location]/DailyStripSticky.svelte
+18 -4
View File
@@ -44,6 +44,10 @@
locationRoute
}: Props = $props();
// enough placeholder tiles to fill a wide viewport; the row scrolls, so a
// couple too many costs nothing
const SKELETON_CELLS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
// ─── Scroll-driven collapse (full cards → compact strip) ────────────────────
// All sizing derives from a single registered custom property `--strip-p`
// (0 = full cards, 1 = compact strip). Mobile and desktop share the exact
@@ -308,7 +312,7 @@
class="flex w-full flex-col items-center gap-0.5 md:flex-row md:justify-center md:gap-2"
>
<span class="inline-flex items-center gap-1 {lowPrecip ? 'opacity-40' : ''}">
<svg class="fill-sky-500" width="13" height="13">
<svg class="fill-sky-500" width="16" height="16">
<use xlink:href="/images/weather-icons/wi-raindrop.svg#Layer_1"></use>
</svg>
{Number(precipSum ?? 0).toFixed(precipSum >= 10 ? 0 : 1)}
@@ -319,16 +323,16 @@
class="hidden shrink-0 md:inline-flex md:-mr-1"
style="transform: {getWindArrowRotation(windDir)}"
>
<svg class="fill-muted-foreground" width="20" height="20">
<svg class="fill-muted-foreground" width="25" height="25">
<use xlink:href="/images/weather-icons/wi-direction-down.svg#Layer_1"
></use>
</svg>
</span>
<svg class="fill-muted-foreground md:hidden" width="13" height="13">
<svg class="fill-muted-foreground md:hidden" width="16" height="16">
<use xlink:href="/images/weather-icons/wi-strong-wind.svg#Layer_1"></use>
</svg>
{:else}
<svg class="fill-muted-foreground" width="13" height="13">
<svg class="fill-muted-foreground" width="16" height="16">
<use xlink:href="/images/weather-icons/wi-strong-wind.svg#Layer_1"></use>
</svg>
{/if}
@@ -391,6 +395,16 @@
</a>
{/if}
</div>
{:else}
<!-- same cell metrics as the real strip, so the bar looks alive while
the forecast lands and nothing moves when it does -->
<div class="strip-days flex">
{#each SKELETON_CELLS as i (i)}
<div
class="strip-cell shrink-0 animate-pulse rounded-xl border border-border/50 bg-muted/60"
></div>
{/each}
</div>
{/if}
</div>
</div>
src/routes/weather/week/[location]/MeteogramCharts.svelte
+44 -3
View File
@@ -1,7 +1,12 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { type ChartPanel, storedChartLayout } from '$lib/stores/settings';
import {
type ChartPanel,
type ChartRangePref,
storedChartLayout,
storedChartRange
} from '$lib/stores/settings';
import { formatZoned, getRelativeDayLabel, isSameDayInZone } from '$lib/utils/date';
@@ -86,11 +91,47 @@
liveCharts[0].setRange(start, start + days * SECONDS_PER_DAY);
}
function resetZoom(): void {
/** Drop any zoom and show the whole forecast. */
function showFullRange(): void {
liveCharts[0]?.resetRange();
onResetZoom?.();
}
/** Back to the range the meteograms are configured to open on. */
function resetZoom(): void {
applyDefaultRange();
onResetZoom?.();
}
// ─── Default range ──────────────────────────────────────────────────────────
/** Days the preference resolves to, or null for the full range. */
function rangeDaysFor(pref: ChartRangePref): number | null {
if (pref === 'today') return 1;
if (pref === '3d') return 3;
if (pref === '5d') return 5;
if (pref === 'all') return null;
// auto: a week of hourly data is unreadable on a phone-width plot
const phone = typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches;
return phone ? 3 : null;
}
function applyDefaultRange(): void {
const days = rangeDaysFor($storedChartRange);
if (days == null) liveCharts[0]?.resetRange();
else setRangeDays(new Date(), days);
}
// Applied once the charts exist, and again whenever the preference changes -
// but never after that, so it can't fight a zoom the user just set by hand.
let appliedPref: ChartRangePref | null = null;
$effect(() => {
const pref = $storedChartRange;
if (liveCharts.length === 0 || timestampsSec.length === 0 || appliedPref === pref) return;
appliedPref = pref;
applyDefaultRange();
});
const now = new Date();
// "Selected day" is redundant while today is the selected day, so hide it then
let rangePresets = $derived.by(() => {
@@ -100,7 +141,7 @@
...(isToday ? [] : [{ label: 'Selected day', apply: () => setRangeDays(selectedDay, 1) }]),
{ label: '3 days', apply: () => setRangeDays(new Date(), 3) },
{ label: '5 days', apply: () => setRangeDays(new Date(), 5) },
{ label: 'All', apply: () => resetZoom() }
{ label: 'All', apply: () => showFullRange() }
];
});