feat(stammbaum): bottom-right zoom + fit-to-screen control cluster (#692)
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>
This commit is contained in:
38
frontend/src/lib/person/genealogy/StammbaumControls.svelte
Normal file
38
frontend/src/lib/person/genealogy/StammbaumControls.svelte
Normal file
@@ -0,0 +1,38 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user