vinzenz/wutzcalc
Watch
0
0
Fork
You've already forked wutzcalc
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: vinzenz:3b900cb91002f67d216a5b2bfbba6ad1df13b7db
Branches Tags
vinzenz:main
..
compare: vinzenz:bec4a0080c1ff4d1755387521e326878c02721f1
Branches Tags
vinzenz:main
1 changed files with 9 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

27
client/src/styles.css
View file

@ -98,27 +98,18 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
.topbar .bar-name { font-size: 26px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .change { font-size: 17px; padding: 10px 14px; }
/* Drink grid: 3 equal columns. Rows no longer assume a fixed count (the old
"exactly 5 rows fill the area" formula squeezed every row into 1/5 of the
height regardless of how many rows actually existed — 4 rows of drinks
looked cramped, with a wasted empty row's worth of space below them).
`minmax(min-content, 1fr)`: the floor is each row's own natural content
height (name + price + Pfand at whatever font-size is active — this
already tracks the smaller mobile font sizes below with no separate
number needed) rather than a guessed pixel value, and 1fr means rows are
equal height and stretch to fill any leftover space when there's room —
but never shrink below that content-derived floor. When there are enough
rows that even their natural height doesn't fit the visible area, the
grid holds every row at that floor and the whole thing scrolls
(overflow-y: auto) instead of cramming rows smaller — "otherwise go for
what fits". */
/* Drink grid: 3 equal columns. Row height is DERIVED so exactly five equal
rows fill the visible grid area (the area's height minus the four inter-row
gaps, split five ways) — no fixed tile pixel size, so tiles stay the same
size whatever the count, ~5 rows show on the portrait iPad mini, and the
rest scroll while the cart (entry overview + sum) stays pinned below. */
.grid {
--gap: 8px;
flex: 1 1 0;
min-height: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(min-content, 1fr);
grid-auto-rows: calc((100% - 4 * var(--gap)) / 5);
align-content: start;
gap: var(--gap);
padding: var(--gap);
@ -154,9 +145,9 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
font-size: 22px;
overflow: hidden;
}
.drink .name { font-weight: 800; line-height: 1.25; max-width: 100%; word-break: break-word; overflow-wrap: break-word; }
.drink .price { font-size: 22px; font-weight: 700; margin-top: 8px; }
.drink .pfand { font-size: 15px; font-weight: 600; color: var(--pfand); margin-top: 4px; }
.drink .name { font-weight: 800; line-height: 1.15; max-width: 100%; word-break: break-word; overflow-wrap: break-word; }
.drink .price { font-size: 22px; font-weight: 700; margin-top: 6px; }
.drink .pfand { font-size: 15px; font-weight: 600; color: var(--pfand); margin-top: 2px; }
.drink.pfand-return {
background: #5a2a2a;