870e2aea85
Decks fühlen sich jetzt wie echte Karten an, statt flacher Boxen.
Eine zentrale CardSurface-Komponente trägt die Karten-Optik
(Border, Radius 0.875rem, Shadow, Color-Stripe links) — drei
Sizes (md/lg/hero), drei Konsumenten, ein visuelles Familien-Set.
Komponenten:
- CardSurface.svelte Foundation für jede Card-Erscheinung in Cards
- DeckStack.svelte 5:7-Stapel mit 3 deterministisch tilted
Hintergrund-Layern (cyrb53-Hash der Deck-ID,
reproduzierbar pro Mount), Color-Stripe-Akzent,
Title/Description/Card-Count/Due-Badge
- DeckGrid.svelte Auto-fill responsive Grid; selectedId-Prop
triggert Stufe-1-Animation (others fade-out,
selected scale-up)
- DeckFan.svelte Auffächer-Detail-View (Hand of Cards) mit
Top-7-Karten als Spread, Mount-Animation
gestapelt → fanned via doppeltem rAF +
cubic-bezier-Transition
- utils/deck-tilt.ts cyrb53 + stackLayers für Pseudo-Random-Tilts
Routing-Wechsel: Klick auf Deck-Stack → 220ms Stufe-1-Fade →
goto('/study/<id>') direkt in den Lernmodus. Detail-View
(/decks/<id>) bleibt erreichbar über "Karten verwalten →"-Link
in der Study-Sidebar.
Lernmodus visuell als Karte:
- Globale Header (Logo + Nav + Sprach-Switcher) im Lernmodus
ausgeblendet (routes/+layout.svelte detektiert /study/<deckId>
per Regex), volle Konzentration auf die Karte
- Lern-Karte ist CardSurface size="hero" mit aspect-ratio 5:7
(Portrait, gleiches Verhältnis wie Deck-Stacks und Fan-Karten)
- Color-Stripe links zeigt die Deck-Farbe — visuelle Bindung an
Herkunft
- Sidebar oben links absolute-positioniert: ← Decks, Deck-Name,
Fortschritt, Karten verwalten → — kompakter UI-Block, der die
Karten-Zentrierung NICHT beeinflusst (Karte bleibt geometrisch
Bildschirm-Mitte)
- Reveal-Button + 4er-Grade-Grid (Wieder/Schwer/Gut/Leicht) als
Aktions-Leiste UNTER der Karte — keine weiteren Karten, ein
Review = eine Karte
Mobile (≤720px): Sidebar wird zur horizontalen Zeile oben, Karte
rückt darunter durch padding-top: 6.5rem.
Reduced-motion durchgängig respektiert (keine Tilts, keine Hover-
Lifts, keine Fan-Spread-Animation, kein Card-Transition).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
63 lines
1.5 KiB
Svelte
63 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import '../app.css';
|
|
import Header from '$lib/components/Header.svelte';
|
|
import ToastStack from '$lib/components/ToastStack.svelte';
|
|
import { i18n, t } from '$lib/i18n/index.svelte.ts';
|
|
import { page } from '$app/state';
|
|
|
|
let { children } = $props();
|
|
|
|
// Hält das `lang`-Attribut am <html> aktuell. Initial-SSR rendert
|
|
// "de"; sobald i18n-Detection im Browser läuft, ziehen wir nach.
|
|
$effect(() => {
|
|
if (typeof document !== 'undefined') {
|
|
document.documentElement.setAttribute('lang', i18n.current);
|
|
}
|
|
});
|
|
|
|
// Im Lernmodus (`/study/<deckId>`) wird der globale Header ausgeblendet,
|
|
// damit die Lernkarte volle visuelle Konzentration kriegt. Die
|
|
// Übersicht `/study` (ohne deckId) zeigt den Header weiter.
|
|
const isFocusMode = $derived.by(() => {
|
|
const path = page.url.pathname;
|
|
return /^\/study\/[^/]+\/?$/.test(path);
|
|
});
|
|
</script>
|
|
|
|
<a href="#main" class="skip-link">{t('common.skip_to_content')}</a>
|
|
|
|
{#if !isFocusMode}
|
|
<Header />
|
|
{/if}
|
|
|
|
<main
|
|
id="main"
|
|
class="main"
|
|
class:focus-mode={isFocusMode}
|
|
class:default-pad={!isFocusMode}
|
|
tabindex="-1"
|
|
>
|
|
{@render children?.()}
|
|
</main>
|
|
|
|
<ToastStack />
|
|
|
|
<style>
|
|
.main {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.default-pad {
|
|
max-width: 72rem;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
/* Focus-Mode: keine max-width-Begrenzung, kein Außen-Padding —
|
|
Lern-Page übernimmt selbst das Layout (Sidebar + Karte zentriert). */
|
|
.focus-mode {
|
|
max-width: none;
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
}
|
|
</style>
|