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

i18n

Browse Source
This commit is contained in:
Vincent van der Wal
2026-08-01 15:07:28 +02:00
parent 9806396476
commit 774afa6c65
45 changed files with 1515 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/weather/week/[location]/DailyStripSticky.svelte
+17 -16
View File
@@ -1,10 +1,11 @@
<script lang="ts">
import { onMount } from 'svelte';
import { resolve } from '$app/paths';
import { formatZoned, getRelativeDayLabel, isSameDayInZone } from '$lib/utils/date';
import { href } from '$lib/i18n';
import * as m from '$lib/paraglide/messages';
import { getTempStyle } from '../../utils/colors';
import { getWeatherIconName } from '../../utils/weather-codes';
import {
@@ -142,8 +143,8 @@
type="button"
class="strip-side strip-park flex shrink-0 cursor-pointer flex-col items-center justify-center gap-0.5 rounded-xl border border-dashed border-primary/50 bg-primary/5 text-primary transition-colors hover:border-primary hover:bg-primary/10"
onclick={onExtendPast}
aria-label="Load the past 3 days"
title="Load the past 3 days"
aria-label={m.strip_past_aria()}
title={m.strip_past_aria()}
>
<span class="inline-flex items-baseline gap-0.5">
<svg
@@ -157,16 +158,16 @@
</svg>
<span class="text-sm leading-none font-extrabold">3</span>
</span>
<span class="text-[9px] leading-tight font-semibold">past</span>
<span class="text-[9px] leading-tight font-semibold">{m.strip_past_label()}</span>
</button>
{:else if locationRoute}
<!-- the past days are already in the strip: the only way further back
is the archive, so the button hands over to it -->
<a
href={resolve('/weather/historical/[location]', { location: locationRoute })}
href={href('/weather/historical/[location]', { location: locationRoute })}
class="strip-side flex shrink-0 cursor-pointer flex-col items-center justify-center gap-0.5 rounded-xl border border-dashed border-primary/50 bg-primary/5 text-primary transition-colors hover:border-primary hover:bg-primary/10"
aria-label="Open the historical weather archive"
title="Historical weather: any past date back to 1940"
aria-label={m.strip_history_aria()}
title={m.strip_history_title()}
>
<svg
class="h-4 w-4"
@@ -182,7 +183,7 @@
d="M3.5 9a9 9 0 1 0 2.2-3.6L3 8m0-4.5V8h4.5"
/>
</svg>
<span class="text-[9px] leading-tight font-semibold">history</span>
<span class="text-[9px] leading-tight font-semibold">{m.strip_history_label()}</span>
</a>
{/if}
@@ -355,8 +356,8 @@
type="button"
class="strip-side flex shrink-0 cursor-pointer flex-col items-center justify-center gap-0.5 rounded-xl border border-dashed border-primary/50 bg-primary/5 text-primary transition-colors hover:border-primary hover:bg-primary/10"
onclick={onExtend}
aria-label="Show the full 15-day forecast"
title="Show the full 15-day forecast"
aria-label={m.strip_extend_aria()}
title={m.strip_extend_aria()}
>
<span class="inline-flex items-baseline gap-0.5">
<span class="text-sm leading-none font-extrabold">15</span>
@@ -370,16 +371,16 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</span>
<span class="text-[9px] leading-tight font-semibold">days</span>
<span class="text-[9px] leading-tight font-semibold">{m.strip_days_label()}</span>
</button>
{:else if locationRoute}
<!-- the strip is at the model's limit: anything further out is a
seasonal outlook, so the button hands over to it -->
<a
href={resolve('/weather/seasonal/[location]', { location: locationRoute })}
href={href('/weather/seasonal/[location]', { location: locationRoute })}
class="strip-side flex shrink-0 cursor-pointer flex-col items-center justify-center gap-0.5 rounded-xl border border-dashed border-primary/50 bg-primary/5 text-primary transition-colors hover:border-primary hover:bg-primary/10"
aria-label="Open the seasonal outlook"
title="Seasonal outlook: monthly trends for the months ahead"
aria-label={m.strip_seasonal_aria()}
title={m.strip_seasonal_title()}
>
<svg
class="h-4 w-4"
@@ -391,7 +392,7 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M3 17l6-6 4 4 7-7" />
<path stroke-linecap="round" stroke-linejoin="round" d="M16 8h5v5" />
</svg>
<span class="text-[9px] leading-tight font-semibold">seasonal</span>
<span class="text-[9px] leading-tight font-semibold">{m.strip_seasonal_label()}</span>
</a>
{/if}
</div>