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

visual updates

Browse Source
This commit is contained in:
Vincent van der Wal
2026-07-25 13:56:16 +02:00
parent cd98b7a5cc
commit c7924bb0ae
19 changed files with 485 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/weather/week/[location]/MeteogramCharts.svelte
+12 -11
View File
@@ -35,7 +35,9 @@
if (liveCharts.length === 0 || downloadingPng) return;
downloadingPng = true;
try {
await downloadChartsPng(liveCharts, 'week-forecast');
// pair each chart with its panel title so the export is labelled
const items = renderPanels.map((p, i) => ({ chart: chartComponents[i], title: p.title }));
await downloadChartsPng(items, 'week-forecast');
} finally {
setTimeout(() => (downloadingPng = false), 500);
}
@@ -276,26 +278,25 @@
<div
class="rounded-xl border border-dashed border-border px-4 py-10 text-center text-sm text-muted-foreground"
>
No meteograms configured — <button
No meteograms configured, <button
class="cursor-pointer font-semibold text-primary underline-offset-2 hover:underline"
onclick={() => (customizerOpen = true)}>add some variables</button
>.
</div>
{:else}
<!-- one full-bleed card on mobile / contained card on md+, graphs stacked
<!-- one full-bleed card until lg / contained card on lg+, graphs stacked
tightly so they read as one fluent meteogram -->
<div class="-mx-3 border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border">
<div class="-mx-3 border-y border-border/70 bg-card shadow-sm lg:mx-0 lg:rounded-2xl lg:border">
{#each renderPanels as panel, i (panel.id)}
<div
class="px-0 pt-2 pb-1 md:px-4 {i > 0 ? 'border-t border-border/50' : 'md:pt-4'} {i ===
renderPanels.length - 1
? 'pb-3 md:pb-4'
: ''}"
class="px-0 pt-0.5 pb-0 lg:px-4 lg:pt-2 lg:pb-1 {i > 0
? 'border-t border-border/50'
: 'lg:pt-4'} {i === renderPanels.length - 1 ? 'pb-1 lg:pb-4' : ''}"
>
<div class="mb-0.5 flex items-center justify-between px-3 md:px-0">
<div class="mb-0 flex items-center justify-between px-3 lg:mb-0.5 lg:px-0">
<h4 class="truncate text-xs font-bold tracking-wide text-muted-foreground uppercase">
<span class="hidden md:inline">{panel.title}</span>
<span class="md:hidden">{panel.titleShort}</span>
<span class="hidden lg:inline">{panel.title}</span>
<span class="lg:hidden">{panel.titleShort}</span>
</h4>
</div>
<ChartContainer