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

revamp weather UI: cards, meteograms, units in header, location favorites and range controls

Browse Source
This commit is contained in:
vincent
2026-07-25 10:26:14 +02:00
committed by Vincent van der Wal
parent bac4759662
commit b4e509f9cb
18 changed files with 1023 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/charts/ChartContainer.svelte
+30 -4
View File
@@ -33,6 +33,8 @@
extraPadding?: number;
/** Minimum chart width in pixels; narrower viewports scroll sideways (default: 560) */
minWidth?: number;
/** Bleed the chart into the page gutters (edge-to-edge). Off when nested in a card. */
bleed?: boolean;
/** Optional CSS class for the outer wrapper */
class?: string;
/** Slot content (charts go here) */
@@ -45,6 +47,7 @@
chartHeight = 300,
extraPadding = 2,
minWidth = 560,
bleed = true,
class: className = '',
children
}: Props = $props();
@@ -54,11 +57,11 @@
let minHeight = $derived(chartHeight * chartCount + extraPadding);
</script>
<div class="chart-bleed">
<div class="chart-bleed" class:no-bleed={!bleed}>
<div
class="chart-container relative {className}"
style:min-height="{minHeight}px"
style:min-width="{minWidth}px"
style="--chart-min-width: {minWidth}px"
>
<!-- Chart content area -->
<div class="chart-content" in:fade={{ duration: 300 }} out:fade={{ duration: 300 }}>
@@ -100,18 +103,41 @@
.chart-bleed {
/* Bleed exactly into the page padding on mobile (main has p-5 =
1.25rem) for edge-to-edge charts, and a bit past the content
column on md+ (main has 2rem padding) for extra readability.
Charts narrower than their min-width scroll sideways. */
column on md+ (main has 2rem padding) for extra readability. */
margin-left: -1.25rem;
margin-right: -1.25rem;
overflow-x: auto;
}
.chart-bleed.no-bleed {
margin-left: 0;
margin-right: 0;
}
.chart-container {
min-width: var(--chart-min-width);
}
/* Mobile: fit the chart to the viewport instead of forcing a min-width
sideways scroll (which fights touch inspection). Pinch to zoom for detail. */
@media (max-width: 767px) {
.chart-container {
min-width: 0;
}
.chart-bleed {
overflow-x: hidden;
}
}
@media (min-width: 768px) {
.chart-bleed {
margin-left: -1.5rem;
margin-right: -1.5rem;
}
.chart-bleed.no-bleed {
margin-left: 0;
margin-right: 0;
}
}
.chart-content {
src/lib/components/location/location-search.svelte
+119 -55
View File
@@ -1,7 +1,12 @@
<script lang="ts">
import { createEventDispatcher, onDestroy, tick } from 'svelte';
import { type GeoLocation } from '$lib/stores/settings';
import {
type GeoLocation,
locationKey,
storedFavoriteLocations,
storedRecentLocations
} from '$lib/stores/settings';
import * as Alert from '$lib/components/ui/alert';
import { Button } from '$lib/components/ui/button';
@@ -30,11 +35,31 @@
};
const selectLocation = (location: GeoLocation) => {
addRecent(location);
searchQuery = '';
closePopover();
dispatch('location', location);
};
function addRecent(loc: GeoLocation) {
const key = locationKey(loc);
storedRecentLocations.update((list) =>
[loc, ...list.filter((l) => locationKey(l) !== key)].slice(0, 8)
);
}
function toggleFavorite(loc: GeoLocation) {
const key = locationKey(loc);
storedFavoriteLocations.update((list) =>
list.some((l) => locationKey(l) === key)
? list.filter((l) => locationKey(l) !== key)
: [loc, ...list].slice(0, 24)
);
}
$: favKeys = new Set($storedFavoriteLocations.map(locationKey));
$: recentToShow = $storedRecentLocations.filter((l) => !favKeys.has(locationKey(l)));
async function focusInput() {
await tick();
searchInputEl?.focus();
@@ -101,6 +126,55 @@
})();
</script>
{#snippet locationRow(location: GeoLocation)}
{@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"
>
<button
class="flex min-w-0 flex-1 cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-2 text-left"
onclick={() => selectLocation(location)}
>
<img
class="h-7 w-7 shrink-0 rounded-full"
src="/images/country-flags/{(location.country_code || 'united_nations').toLowerCase()}.svg"
alt={location.country}
/>
<div class="min-w-0 flex-1">
<div class="truncate text-sm font-medium text-foreground">{location.name}</div>
<div class="truncate text-xs text-muted-foreground">
{location.admin1 || ''}
{location.country || ''}
· {location.latitude.toFixed(2)}°N {location.longitude.toFixed(2)}°E
{#if location.elevation}· {location.elevation.toFixed(0)}m{/if}
</div>
</div>
</button>
<button
class="mr-1 flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md hover:bg-background hover:text-amber-500 {fav
? 'text-amber-500'
: 'text-muted-foreground/50'}"
onclick={() => toggleFavorite(location)}
aria-label={fav ? 'Remove from favorites' : 'Add to favorites'}
title={fav ? 'Remove from favorites' : 'Add to favorites'}
>
<svg
class="h-4 w-4"
viewBox="0 0 24 24"
fill={fav ? 'currentColor' : 'none'}
stroke="currentColor"
stroke-width="1.75"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 3.6l2.5 5.1 5.6.8-4 3.9 1 5.6-5.1-2.7-5 2.7 1-5.6-4-3.9 5.5-.8z"
/>
</svg>
</button>
</div>
{/snippet}
<Popover.Root bind:open={popoverOpen}>
<Popover.Trigger
class="flex h-10 w-full cursor-pointer items-center gap-2.5 rounded-full border-2 border-primary/30 bg-background px-4 text-[0.8125rem] font-medium text-muted-foreground shadow-xs transition-[border-color,box-shadow] duration-150 hover:border-primary/70 hover:shadow-md"
@@ -178,8 +252,35 @@
</div>
</div>
{:then results}
{#if results.results && results.results.length === 0}
{#if searchQuery.length < 2}
{#if searchQuery.length < 2}
{#if $storedFavoriteLocations.length > 0 || recentToShow.length > 0}
{#if $storedFavoriteLocations.length > 0}
<div
class="mb-1 px-1 text-[11px] font-semibold tracking-wide text-muted-foreground uppercase"
>
Favorites
</div>
<div class="space-y-0.5">
{#each $storedFavoriteLocations as loc (locationKey(loc))}
{@render locationRow(loc)}
{/each}
</div>
{/if}
{#if recentToShow.length > 0}
<div
class="mb-1 px-1 text-[11px] font-semibold tracking-wide text-muted-foreground uppercase {$storedFavoriteLocations.length
? 'mt-3'
: ''}"
>
Recent
</div>
<div class="space-y-0.5">
{#each recentToShow as loc (locationKey(loc))}
{@render locationRow(loc)}
{/each}
</div>
{/if}
{:else}
<div
class="flex items-start gap-2 rounded-md bg-primary/8 p-2.5 text-muted-foreground"
>
@@ -200,62 +301,25 @@
Start typing to search or use GPS to detect your position
</span>
</div>
{:else}
<Alert.Root
class="border-orange-200 bg-orange-50 dark:border-orange-800 dark:bg-orange-900/20"
>
<Alert.Description class="text-orange-700 dark:text-orange-300">
No locations found for "{searchQuery}". Try a different term.
</Alert.Description>
</Alert.Root>
{/if}
{:else if !results.results}
{:else if results.results && results.results.length > 0}
<div class="space-y-0.5">
{#each results.results as location, i (i)}
{@render locationRow(location)}
{/each}
</div>
{:else if results.results}
<Alert.Root
class="border-orange-200 bg-orange-50 dark:border-orange-800 dark:bg-orange-900/20"
>
<Alert.Description class="text-orange-700 dark:text-orange-300">
No locations found for "{searchQuery}". Try a different term.
</Alert.Description>
</Alert.Root>
{:else}
<Alert.Root variant="destructive">
<Alert.Description>No locations found</Alert.Description>
</Alert.Root>
{:else}
<div class="space-y-0.5">
{#each results.results || [] as location, i (i)}
<button
class="group block w-full cursor-pointer rounded-md border border-transparent bg-transparent px-2.5 py-2 transition-[background,border-color] duration-150 hover:border-border hover:bg-accent"
onclick={() => selectLocation(location)}
>
<div class="flex items-center gap-2.5">
<img
class="h-7 w-7 rounded-full"
src="/images/country-flags/{(
location.country_code || 'united_nations'
).toLowerCase()}.svg"
alt={location.country}
/>
<div class="flex-1 text-left">
<div class="text-sm font-medium text-foreground">
{location.name}
</div>
<div class="text-xs text-muted-foreground">
{location.admin1 || ''}
{location.country || ''}
· {location.latitude.toFixed(2)}°N {location.longitude.toFixed(2)}°E
{#if location.elevation}· {location.elevation.toFixed(0)}m{/if}
</div>
</div>
<svg
class="h-3.5 w-3.5 text-muted-foreground opacity-0 transition-opacity duration-150 group-hover:opacity-100"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</div>
</button>
{/each}
</div>
{/if}
{:catch error}
<Alert.Root variant="destructive">
src/lib/components/navigation/header.svelte
+14 -9
View File
@@ -10,6 +10,7 @@
import { buildLocationRoute } from '$lib/utils/location';
import LocationSearch from '$lib/components/location/location-search.svelte';
import UnitSelector from '$lib/components/unit-selector.svelte';
interface Props {
onMenuToggle?: () => void;
@@ -68,22 +69,23 @@
<!-- Current location display -->
{#if location}
<div
class="hidden items-center gap-2 rounded-full border border-border/70 bg-muted/40 py-1 ps-1 pe-3 sm:flex"
class="hidden items-center gap-2 rounded-full border border-border/70 bg-muted/40 py-1 ps-1 pe-3 lg:flex"
>
<img
class="h-6 w-6 rounded-full ring-1 ring-border"
class="h-6 w-6 shrink-0 rounded-full ring-1 ring-border"
src="/images/country-flags/{(location.country_code || 'united_nations').toLowerCase()}.svg"
alt={location.country}
/>
<span class="text-sm font-semibold text-foreground">
<!-- full location (desktop); the page hero carries it on smaller screens -->
<span class="whitespace-nowrap text-sm font-semibold text-foreground">
{location.name}
{#if location.admin1 || location.country}
<span class="font-normal text-muted-foreground">
· {#if location.admin1}{location.admin1},
{/if}{location.country ?? ''}
</span>
{/if}
</span>
{#if location.admin1 || location.country}
<span class="hidden text-xs text-muted-foreground lg:inline">
{#if location.admin1}{location.admin1},{/if}
{location.country}
</span>
{/if}
</div>
{/if}
@@ -100,6 +102,9 @@
/>
</div>
<!-- Measurement units -->
<UnitSelector />
<!-- Theme toggle: system → light → dark -->
<button
class="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border/70 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
src/lib/components/navigation/weather-nav.svelte
+30 -24
View File
@@ -125,30 +125,36 @@
{/each}
</nav>
<!-- Collapse toggle -->
<div class="border-t border-sidebar-border px-2 py-3">
<button
class="relative flex w-full items-center rounded-md px-2.5 py-2 text-sm font-medium text-sidebar-foreground opacity-70 transition-colors duration-150 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:opacity-100"
onclick={onToggle}
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
>
<div class="flex h-5 w-5 shrink-0 items-center justify-center">
<svg
class="h-4.5 w-4.5 transition-transform duration-200"
class:rotate-180={collapsed}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.75"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
</svg>
</div>
{#if !collapsed}
<span class="ml-2.5 whitespace-nowrap">Collapse</span>
{/if}
</button>
</div>
<!-- Collapse toggle (desktop sidebar only; the mobile drawer omits onToggle) -->
{#if onToggle}
<div class="border-t border-sidebar-border px-2 py-3">
<button
class="relative flex w-full items-center rounded-md px-2.5 py-2 text-sm font-medium text-sidebar-foreground opacity-70 transition-colors duration-150 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:opacity-100"
onclick={onToggle}
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
>
<div class="flex h-5 w-5 shrink-0 items-center justify-center">
<svg
class="h-4.5 w-4.5 transition-transform duration-200"
class:rotate-180={collapsed}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.75"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
/>
</svg>
</div>
{#if !collapsed}
<span class="ml-2.5 whitespace-nowrap">Collapse</span>
{/if}
</button>
</div>
{/if}
</aside>
<style>
src/lib/components/unit-selector.svelte
+95
View File
@@ -0,0 +1,95 @@
<script lang="ts">
import { type UnitPrefs, storedUnits } from '$lib/stores/settings';
import * as Popover from '$lib/components/ui/popover';
// each group maps a stored unit key to its selectable options
const UNIT_GROUPS: {
key: keyof UnitPrefs;
label: string;
options: { value: string; label: string }[];
}[] = [
{
key: 'temperature_unit',
label: 'Temperature',
options: [
{ value: 'celsius', label: '°C' },
{ value: 'fahrenheit', label: '°F' }
]
},
{
key: 'wind_speed_unit',
label: 'Wind speed',
options: [
{ value: 'kmh', label: 'km/h' },
{ value: 'ms', label: 'm/s' },
{ value: 'mph', label: 'mph' },
{ value: 'kn', label: 'kn' }
]
},
{
key: 'precipitation_unit',
label: 'Precipitation',
options: [
{ value: 'mm', label: 'mm' },
{ value: 'inch', label: 'inch' }
]
}
];
function setUnit(key: keyof UnitPrefs, value: string) {
storedUnits.update((u) => ({ ...u, [key]: value }));
}
</script>
<Popover.Root>
<Popover.Trigger
class="flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-full border border-border/70 px-2.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground"
aria-label="Choose measurement units"
title="Units"
>
<!-- gauge icon -->
<svg
class="h-4.5 w-4.5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.75"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.5 15a7.5 7.5 0 1 1 15 0M12 15l3.2-3.2"
/>
<circle cx="12" cy="15" r="1" fill="currentColor" stroke="none" />
</svg>
<span class="hidden text-xs font-semibold sm:inline">Units</span>
</Popover.Trigger>
<Popover.Content align="end" class="w-64 border-border">
<div class="flex flex-col gap-4">
{#each UNIT_GROUPS as group (group.key)}
<div>
<span
class="mb-1.5 block text-[11px] font-semibold tracking-wide text-muted-foreground uppercase"
>
{group.label}
</span>
<div class="flex gap-1 rounded-lg bg-muted p-0.5">
{#each group.options as opt (opt.value)}
{@const active = $storedUnits[group.key] === opt.value}
<button
class="flex-1 cursor-pointer rounded-md px-2 py-1.5 text-[13px] font-semibold transition-colors {active
? 'bg-background text-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground'}"
aria-pressed={active}
onclick={() => setUnit(group.key, opt.value)}
>
{opt.label}
</button>
{/each}
</div>
</div>
{/each}
</div>
</Popover.Content>
</Popover.Root>