schmop/zahlzerlegung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bedienknöpfe nach rechts (frei vom Vollbild-beenden-Button des OS); Zurück wird zu Home

Browse Source
This commit is contained in:
schmop 2026-05-31 18:14:53 +02:00
parent 0dd42aa03c
commit 9735c4cc37
3 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/screens/GameScreen.svelte
View File

@ -62,12 +62,12 @@
<div class="screen" in:fade={{ duration: 220 }}> <div class="screen" in:fade={{ duration: 220 }}>
<header class="topbar"> <header class="topbar">
<IconButton label="Zurück" onClick={handleAbort}> <Timer secondsLeft={$timeLeftSeconds} totalSeconds={Math.max(1, Math.round($game.totalMs / 1000))} />
<IconButton label="Startseite" onClick={handleAbort}>
<svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"> <svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true">
<path d="M18 5 L8 14 L18 23" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M14 4 L25 14 L22 14 L22 24 L16.5 24 L16.5 17.5 L11.5 17.5 L11.5 24 L6 24 L6 14 L3 14 Z" fill="currentColor" />
</svg> </svg>
</IconButton> </IconButton>
<Timer secondsLeft={$timeLeftSeconds} totalSeconds={Math.max(1, Math.round($game.totalMs / 1000))} />
</header> </header>
<div class="layout"> <div class="layout">
@ -102,7 +102,8 @@
} }
.topbar { .topbar {
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
gap: 12px;
align-items: center; align-items: center;
} }
.layout { .layout {

4
src/lib/screens/HomeScreen.svelte
View File

@ -19,9 +19,9 @@
<div class="screen" in:fade={{ duration: 220 }}> <div class="screen" in:fade={{ duration: 220 }}>
<header class="topbar"> <header class="topbar">
<SoundToggle />
<h1 class="visually-hidden">Zahlzerlegung</h1> <h1 class="visually-hidden">Zahlzerlegung</h1>
<div class="actions"> <div class="actions">
<SoundToggle />
<FullscreenToggle /> <FullscreenToggle />
<IconButton label="Einstellungen" onClick={goSettings}> <IconButton label="Einstellungen" onClick={goSettings}>
<svg width="34" height="34" viewBox="0 0 32 32" aria-hidden="true"> <svg width="34" height="34" viewBox="0 0 32 32" aria-hidden="true">
@ -52,7 +52,7 @@
} }
.topbar { .topbar {
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
align-items: center; align-items: center;
} }
.actions { .actions {

8
src/lib/screens/SettingsScreen.svelte
View File

@ -8,9 +8,9 @@
<div class="screen" in:fade={{ duration: 220 }}> <div class="screen" in:fade={{ duration: 220 }}>
<header> <header>
<IconButton label="Zurück" onClick={goHome}> <IconButton label="Startseite" onClick={goHome}>
<svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"> <svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true">
<path d="M18 5 L8 14 L18 23" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M14 4 L25 14 L22 14 L22 24 L16.5 24 L16.5 17.5 L11.5 17.5 L11.5 24 L6 24 L6 14 L3 14 Z" fill="currentColor" />
</svg> </svg>
</IconButton> </IconButton>
</header> </header>
@ -77,6 +77,10 @@
gap: 18px; gap: 18px;
color: var(--c-text-on-dark); color: var(--c-text-on-dark);
} }
header {
display: flex;
justify-content: flex-end;
}
.setting { .setting {
display: grid; display: grid;
grid-template-columns: 80px 1fr; grid-template-columns: 80px 1fr;