till/cards
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix(study): kein Layout-Sprung beim Wechsel Reveal ↔ Grade-Buttons

Browse source 
grade-row bleibt immer im Flow und setzt die Höhe der action-bar.
reveal-row liegt absolut darüber. Wechsel via visibility statt {#if},
sodass die Karte beim Aufdecken nicht springt.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-05-10 14:47:15 +02:00
parent d9532ed9c3
commit 598acb410d
1 changed files with 37 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

54
apps/web/src/routes/study/[deckId]/+page.svelte
View file

@ -227,32 +227,39 @@
</CardSurface>
</div>
{#if !revealed}
<div class="reveal-row">
<button class="btn-primary reveal" onclick={() => (revealed = true)}>
{t('study_session.reveal')} <kbd>Space</kbd>
</button>
</div>
{:else}
<div class="grade-row" role="group" aria-label={t('study_session.grade_hint')}>
<button class="grade grade-again" onclick={() => grade('again')} disabled={busy}>
<div class="action-bar">
<!-- grade-row immer im Flow → setzt die Höhe der action-bar -->
<div
class="grade-row"
class:invisible={!revealed}
role="group"
aria-label={t('study_session.grade_hint')}
aria-hidden={!revealed}
>
<button class="grade grade-again" onclick={() => grade('again')} disabled={busy} tabindex={revealed ? 0 : -1}>
<span>{t('study_session.grade_again')}</span>
<kbd>1</kbd>
</button>
<button class="grade grade-hard" onclick={() => grade('hard')} disabled={busy}>
<button class="grade grade-hard" onclick={() => grade('hard')} disabled={busy} tabindex={revealed ? 0 : -1}>
<span>{t('study_session.grade_hard')}</span>
<kbd>2</kbd>
</button>
<button class="grade grade-good" onclick={() => grade('good')} disabled={busy}>
<button class="grade grade-good" onclick={() => grade('good')} disabled={busy} tabindex={revealed ? 0 : -1}>
<span>{t('study_session.grade_good')}</span>
<kbd>3</kbd>
</button>
<button class="grade grade-easy" onclick={() => grade('easy')} disabled={busy}>
<button class="grade grade-easy" onclick={() => grade('easy')} disabled={busy} tabindex={revealed ? 0 : -1}>
<span>{t('study_session.grade_easy')}</span>
<kbd>4</kbd>
</button>
</div>
{/if}
<!-- reveal-row liegt absolut über der grade-row -->
<div class="reveal-row" class:invisible={revealed} aria-hidden={revealed}>
<button class="btn-primary reveal" onclick={() => (revealed = true)} tabindex={revealed ? -1 : 0}>
{t('study_session.reveal')} <kbd>Space</kbd>
</button>
</div>
</div>
{/if}
</div>
</div>
@ -503,10 +510,24 @@
/* Reveal-Button und Grade-Row sitzen UNTER der Karte — keine
Sub-Karten, sondern Aktions-Leiste. Bewahrt das "eine Karte ist
eine Karte"-Gefühl. */
.reveal-row {
display: flex;
justify-content: center;
.action-bar {
position: relative;
margin-top: 1.5rem;
width: 100%;
max-width: 24rem;
}
.invisible {
visibility: hidden;
pointer-events: none;
}
.reveal-row {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.btn-primary.reveal {
@ -526,7 +547,6 @@
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
margin-top: 1.5rem;
}
.grade {