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

Levelauswahl: nicht volle letzte Reihe zentrieren statt linksbündig

Browse Source
This commit is contained in:
schmop 2026-05-31 18:23:46 +02:00
parent fa760ba984
commit 0f760b2360
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/components/home/NumberCard.svelte
View File

@ -44,6 +44,7 @@
border-radius: var(--radius-card); border-radius: var(--radius-card);
box-shadow: var(--shadow-soft); box-shadow: var(--shadow-soft);
aspect-ratio: 3 / 4; aspect-ratio: 3 / 4;
width: 100%;
min-width: 0; min-width: 0;
padding: 12px; padding: 12px;
display: grid; display: grid;

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

@ -37,7 +37,7 @@
<div class="cards-grid"> <div class="cards-grid">
{#each TARGETS as target (target)} {#each TARGETS as target (target)}
<NumberCard {target} onClick={handlePick} /> <div class="cell"><NumberCard {target} onClick={handlePick} /></div>
{/each} {/each}
</div> </div>
</div> </div>
@ -72,12 +72,14 @@
} }
.cards-grid { .cards-grid {
/* Karten haben aspect-ratio 3/4. Bei 7 Karten ergeben sich je nach Spaltenzahl /* Karten haben aspect-ratio 3/4. Bei 7 Karten ergeben sich je nach Spaltenzahl
2/3/4 Reihen — Grid-Breite wird so begrenzt, dass die Reihen in die verfügbare 2/3/4 Reihen — Breite wird so begrenzt, dass die Reihen in die verfügbare
Höhe passen. Formel: max-width = C·3·(H - (R-1)·g) / (4R) + (C-1)·g. */ Höhe passen. Formel: max-width = C·3·(H - (R-1)·g) / (4R) + (C-1)·g.
Flexbox statt Grid, damit eine nicht volle letzte Reihe zentriert wird. */
--gap: 14px; --gap: 14px;
--avail-h: calc(100dvh - 130px); --avail-h: calc(100dvh - 130px);
display: grid; --cols: 4;
grid-template-columns: repeat(4, 1fr); display: flex;
flex-wrap: wrap;
gap: var(--gap); gap: var(--gap);
align-content: center; align-content: center;
justify-content: center; justify-content: center;
@ -87,16 +89,20 @@
margin-inline: auto; margin-inline: auto;
padding-bottom: 10px; padding-bottom: 10px;
} }
.cell {
flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
min-width: 0;
}
@media (max-width: 640px) { @media (max-width: 640px) {
.cards-grid { .cards-grid {
grid-template-columns: repeat(3, 1fr); --cols: 3;
/* 3 Spalten, 3 Reihen */ /* 3 Spalten, 3 Reihen */
max-width: calc(var(--avail-h) * 0.75 + var(--gap) * 0.5); max-width: calc(var(--avail-h) * 0.75 + var(--gap) * 0.5);
} }
} }
@media (max-width: 380px) { @media (max-width: 380px) {
.cards-grid { .cards-grid {
grid-template-columns: repeat(2, 1fr); --cols: 2;
/* 2 Spalten, 4 Reihen */ /* 2 Spalten, 4 Reihen */
max-width: calc(var(--avail-h) * 0.375 - var(--gap) * 0.125); max-width: calc(var(--avail-h) * 0.375 - var(--gap) * 0.125);
} }