try strip desktop

This commit is contained in:
Vincent van der Wal
2026-08-01 10:32:22 +02:00
parent 2f86d86165
commit 99c1a89537
6 changed files with 442 additions and 305 deletions
+15 -15
View File
@@ -231,12 +231,12 @@
/>
</div>
<!-- Mobile: a compact day strip and the hourly table share this wrapper, so
the strip stays stuck (collapsing as it goes) while scrolling the table
and then releases exactly at the table's bottom, freeing the meteograms.
The strip itself is hidden on md+ (the desktop cards above take over).
timeline-scope hoists the strip's sentinel view-timeline so the sticky
strip (a sibling of the sentinel) can scrub its collapse from it. -->
<!-- The sticky day strip, the hourly table AND the meteograms share this
wrapper, so the strip stays stuck for the entire page (it collapses
as it sticks on mobile; on md+ it's a slim always-compact bar under
the topbar, complementing the full cards above). timeline-scope
hoists 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}
<DailyStripSticky
@@ -267,15 +267,15 @@
class="h-107.5 animate-pulse rounded-2xl border border-border/70 bg-card"
></div>
{/if}
</div>
{#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 }}>
<ChartContainer loading chartCount={enabledChartCount || 1} chartHeight={300} />
</section>
{/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 }}>
<ChartContainer loading chartCount={enabledChartCount || 1} chartHeight={300} />
</section>
{/if}
</div>
</div>
</div>