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

minor adjustments

Browse Source
This commit is contained in:
Vincent van der Wal
2026-08-01 16:07:32 +02:00
parent 17cf8df109
commit ae88140f79
13 changed files with 129 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/navigation/header.svelte
+3 -3
View File
@@ -144,15 +144,15 @@
<!-- md+: the same settings as individual controls. Kept mounted (not `{#if}`)
so SupporterBadge still verifies the key on every viewport. -->
<div class="hidden items-center gap-3 md:flex">
<!-- Supporter status / unlock -->
<SupporterBadge />
<!-- Language: the locale lives in the URL, so this is a set of links -->
<LanguageSelector />
<!-- Measurement units -->
<UnitSelector />
<!-- Supporter status / unlock -->
<SupporterBadge />
<!-- 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/settings-menu.svelte
+5 -26
View File
@@ -6,6 +6,7 @@
import UnitOptions from '$lib/components/unit-options.svelte';
import * as m from '$lib/paraglide/messages';
import SupporterIcon from '$lib/paywall/SupporterIcon.svelte';
import UnlockDialog from '$lib/paywall/UnlockDialog.svelte';
import { isSupporter } from '$lib/paywall/supporter';
@@ -84,32 +85,10 @@
unlockOpen = true;
}}
>
{#if $isSupporter}
<!-- star -->
<svg
class="h-4.5 w-4.5 shrink-0 text-amber-500"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path
d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.9 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9L12 2.5z"
/>
</svg>
{:else}
<!-- padlock -->
<svg
class="h-4.5 w-4.5 shrink-0 text-muted-foreground"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.75"
aria-hidden="true"
>
<rect x="4" y="10" width="16" height="11" rx="2" />
<path stroke-linecap="round" d="M8 10V7a4 4 0 0 1 8 0v3" />
</svg>
{/if}
<SupporterIcon
filled={$isSupporter}
class="h-4.5 w-4.5 shrink-0 {$isSupporter ? 'text-amber-500' : 'text-muted-foreground'}"
/>
<span class="min-w-0 flex-1">
<span class="block text-[13px] font-semibold">
{$isSupporter ? m.supporter_active() : m.supporter_support()}
src/lib/paywall/PaywallGate.svelte
+2 -11
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import SupporterIcon from './SupporterIcon.svelte';
import UnlockDialog from './UnlockDialog.svelte';
import { SIGNUP_URL, SUPPORTER_PERKS, getSupporterPrice } from './config';
import { isSupporter, refreshSupporter, supporterState } from './supporter';
@@ -39,17 +40,7 @@
<div
class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary"
>
<!-- padlock -->
<svg
class="h-7 w-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.75"
>
<rect x="4" y="10" width="16" height="11" rx="2" />
<path stroke-linecap="round" d="M8 10V7a4 4 0 0 1 8 0v3" />
</svg>
<SupporterIcon class="h-7 w-7" />
</div>
<h2 class="text-xl font-bold tracking-tight">{feature} is a supporter extra</h2>
src/lib/paywall/SupporterBadge.svelte
+3 -23
View File
@@ -3,6 +3,7 @@
import * as m from '$lib/paraglide/messages';
import SupporterIcon from './SupporterIcon.svelte';
import UnlockDialog from './UnlockDialog.svelte';
import { isSupporter, refreshSupporter } from './supporter';
@@ -21,29 +22,8 @@
title={$isSupporter ? m.supporter_active() : m.supporter_support()}
aria-label={$isSupporter ? m.supporter_active() : m.supporter_support()}
>
{#if $isSupporter}
<!-- star -->
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path
d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.9 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9L12 2.5z"
/>
</svg>
<span class="hidden sm:inline">{m.supporter_badge()}</span>
{:else}
<!-- padlock -->
<svg
class="h-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.75"
aria-hidden="true"
>
<rect x="4" y="10" width="16" height="11" rx="2" />
<path stroke-linecap="round" d="M8 10V7a4 4 0 0 1 8 0v3" />
</svg>
<span class="hidden sm:inline">{m.supporter_badge()}</span>
{/if}
<SupporterIcon filled={$isSupporter} />
<span class="hidden sm:inline">{m.supporter_badge()}</span>
</button>
<UnlockDialog bind:open />
src/lib/paywall/SupporterIcon.svelte
+37
View File
@@ -0,0 +1,37 @@
<script lang="ts">
/**
* The supporter mark. A heart rather than a padlock: nothing here is locked
* away as a punishment - the extras are a thank-you for chipping in, and a
* padlock framed it as a paywall. Filled once someone is supporting,
* outlined as an invitation before that.
*/
interface Props {
filled?: boolean;
class?: string;
}
let { filled = false, class: className = 'h-4 w-4' }: Props = $props();
</script>
{#if filled}
<svg class={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path
d="M12 21.1l-1.45-1.32C5.4 15.1 2 12 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.5-3.4 6.6-8.55 11.29L12 21.1z"
/>
</svg>
{:else}
<svg
class={className}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.9"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path
d="M12 21.1l-1.45-1.32C5.4 15.1 2 12 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.5-3.4 6.6-8.55 11.29L12 21.1z"
/>
</svg>
{/if}
src/routes/+layout.svelte
+11 -1
View File
@@ -126,7 +126,16 @@
return new Promise((resolve) => setTimeout(resolve, FADE_OUT_MS));
});
afterNavigate(() => {
let mainEl = $state<HTMLElement | null>(null);
afterNavigate((navigation) => {
// The page scrolls inside <main>, not the window, so SvelteKit's own scroll
// handling never touches it and a new page would open half way down.
// Back/forward and in-page anchors keep their position.
if (navigation.type !== 'popstate' && !navigation.to?.url.hash) {
mainEl?.scrollTo({ top: 0 });
}
if (typeof document.startViewTransition === 'function' || reducedMotion()) {
contentVisible = true;
return;
@@ -202,6 +211,7 @@
flex-col + flex-1 below keeps the footer on the bottom edge even when
the page is too short to fill the viewport. -->
<main
bind:this={mainEl}
class={fullBleed
? 'flex-1 overflow-hidden'
: 'flex flex-1 flex-col overflow-y-auto p-3 lg:px-8 lg:py-6'}
src/routes/weather/week/[location]/DailyStripSticky.svelte
+2 -2
View File
@@ -472,7 +472,7 @@
--night-icon-nudge: 4px;
/* compact only: signed shift that lands the lone icon dead centre in the
square tile (measured against the tile's mid-line) */
--icon-lift: -1px;
--icon-lift: 1px;
/* cell bottom padding (roomy when full, a little breathing room under the
temps when compact so they don't sit on the tile edge). The compact
tile is taller than its content here, so the leftover slack already
@@ -540,7 +540,7 @@
--tmax-padx-min: 6px;
--pt-min: 5px;
--pb-min: 6px;
--icon-lift: 0px;
--icon-lift: 1px;
}
}
src/routes/weather/week/[location]/HourlyTable.svelte
+11 -3
View File
@@ -899,16 +899,24 @@
padding: 1px;
font-size: 10px;
}
/* The row-header icon and the fixed cell height are what actually set the
row height, so both come down explicitly. */
.cell :global(svg),
/* The row-header icon was setting the height of every row it sat in - the
stacked icon + label + unit needed ~52px while the value cells only
needed 34. The label already names the row, so on phones the icon goes
and the cells decide the height. */
.hdr :global(svg) {
display: none;
}
.cell :global(svg) {
width: 22px;
height: 22px;
}
.cell {
height: 34px;
}
/* except precipitation, whose cell is a bar chart and needs the room */
.precip-cell {
height: 46px;
}
.hdr :global(span) {
font-size: 9px;
line-height: 1.15;