7a6c2e877f
Move zoom controls out of the page header into a docked bottom-right cluster inside the canvas (one-handed phone reach, Leonie) and add a fit-to-screen button (data-testid=fit-to-screen). Add the 5 new i18n keys to de/en/es. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
39 lines
1.2 KiB
Svelte
39 lines
1.2 KiB
Svelte
<script lang="ts">
|
||
import { m } from '$lib/paraglide/messages.js';
|
||
|
||
interface Props {
|
||
onZoomIn: () => void;
|
||
onZoomOut: () => void;
|
||
onFit: () => void;
|
||
}
|
||
|
||
let { onZoomIn, onZoomOut, onFit }: Props = $props();
|
||
|
||
// Docked bottom-right inside the canvas — the primary one-handed reach zone on a
|
||
// phone (Leonie). The container ignores pointer events so canvas gestures pass
|
||
// through the gaps; only the buttons capture taps.
|
||
const buttonClass =
|
||
'pointer-events-auto inline-flex h-11 w-11 items-center justify-center rounded-sm border border-line bg-surface text-lg text-ink-2 shadow-sm transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none';
|
||
</script>
|
||
|
||
<div
|
||
class="pointer-events-none absolute right-4 z-30 flex flex-col gap-1"
|
||
style="bottom: max(calc(env(safe-area-inset-bottom, 0px) + 1rem), 1rem);"
|
||
>
|
||
<button type="button" onclick={onZoomIn} aria-label={m.stammbaum_zoom_in()} class={buttonClass}>
|
||
+
|
||
</button>
|
||
<button type="button" onclick={onZoomOut} aria-label={m.stammbaum_zoom_out()} class={buttonClass}>
|
||
−
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-testid="fit-to-screen"
|
||
onclick={onFit}
|
||
aria-label={m.stammbaum_fit_to_screen()}
|
||
class={buttonClass}
|
||
>
|
||
⤢
|
||
</button>
|
||
</div>
|