vinzenz/wutzcalc
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tablet: fit grid and cart on screen, no scrolling

Browse source
This commit is contained in:
müde 2026-05-19 18:14:14 +02:00
parent e0898bea22
commit 1442fbae75
2 changed files with 42 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

26
client/src/styles.css
View file

@ -31,6 +31,7 @@ button:disabled { opacity: 0.4; }
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
max-width: 100vw; max-width: 100vw;
overflow: hidden;
} }
.bar-picker { .bar-picker {
@ -61,18 +62,18 @@ button:disabled { opacity: 0.4; }
.topbar .bar-name { font-size: 20px; font-weight: bold; } .topbar .bar-name { font-size: 20px; font-weight: bold; }
.topbar .change { font-size: 14px; padding: 8px 12px; } .topbar .change { font-size: 14px; padding: 8px 12px; }
/* Square-ish drink buttons, sized to fit a portrait tablet width. /* Drink grid fills available space with no scrolling — tiles auto-size to fit.
3 columns on a typical portrait iPad (~768px) gives ~240px-wide tiles. */ 3 columns on portrait iPad (~768px); rows divide the remaining height equally. */
.grid { .grid {
flex: 1 1 auto; flex: 1 1 0;
min-height: 0;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 8px; gap: 8px;
padding: 8px; padding: 8px;
overflow-y: auto; overflow: hidden;
align-content: start;
} }
.grid > .drink { aspect-ratio: 1 / 1; }
@media (max-width: 480px) { @media (max-width: 480px) {
.grid { grid-template-columns: repeat(2, 1fr); } .grid { grid-template-columns: repeat(2, 1fr); }
@ -96,19 +97,22 @@ button:disabled { opacity: 0.4; }
} }
.cart { .cart {
flex: 0 0 auto; flex: 0 0 38vh;
background: #1a1a1a; background: #1a1a1a;
border-top: 1px solid #333; border-top: 1px solid #333;
padding: 8px 16px; padding: 8px 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 38vh; min-height: 0;
} }
.cart-items { .cart-items {
flex: 1 1 auto; flex: 1 1 0;
overflow-y: auto; min-height: 0;
overflow: hidden;
margin-bottom: 6px; margin-bottom: 6px;
min-height: 60px; display: flex;
flex-direction: column;
justify-content: flex-end;
} }
.cart-line { .cart-line {
display: flex; display: flex;

27
flake.lock generated Normal file
View file

@ -0,0 +1,27 @@
{
"nodes": {
"nixpkgs": {
"locked": {
"lastModified": 1778869304,
"narHash": "sha256-30sZNZoA1cqF5JNO9fVX+wgiQYjB7HJqqJ4ztCDeBZE=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "d233902339c02a9c334e7e593de68855ad26c4cb",
"type": "github"
},
"original": {
"owner": "NixOS",
"ref": "nixos-unstable",
"repo": "nixpkgs",
"type": "github"
}
},
"root": {
"inputs": {
"nixpkgs": "nixpkgs"
}
}
},
"root": "root",
"version": 7
}