tablet: fit grid and cart on screen, no scrolling
This commit is contained in:
parent
e0898bea22
commit
1442fbae75
2 changed files with 42 additions and 11 deletions
|
|
@ -31,6 +31,7 @@ button:disabled { opacity: 0.4; }
|
|||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bar-picker {
|
||||
|
|
@ -61,18 +62,18 @@ button:disabled { opacity: 0.4; }
|
|||
.topbar .bar-name { font-size: 20px; font-weight: bold; }
|
||||
.topbar .change { font-size: 14px; padding: 8px 12px; }
|
||||
|
||||
/* Square-ish drink buttons, sized to fit a portrait tablet width.
|
||||
3 columns on a typical portrait iPad (~768px) gives ~240px-wide tiles. */
|
||||
/* Drink grid fills available space with no scrolling — tiles auto-size to fit.
|
||||
3 columns on portrait iPad (~768px); rows divide the remaining height equally. */
|
||||
.grid {
|
||||
flex: 1 1 auto;
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
overflow-y: auto;
|
||||
align-content: start;
|
||||
overflow: hidden;
|
||||
}
|
||||
.grid > .drink { aspect-ratio: 1 / 1; }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.grid { grid-template-columns: repeat(2, 1fr); }
|
||||
|
|
@ -96,19 +97,22 @@ button:disabled { opacity: 0.4; }
|
|||
}
|
||||
|
||||
.cart {
|
||||
flex: 0 0 auto;
|
||||
flex: 0 0 38vh;
|
||||
background: #1a1a1a;
|
||||
border-top: 1px solid #333;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 38vh;
|
||||
min-height: 0;
|
||||
}
|
||||
.cart-items {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
margin-bottom: 6px;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.cart-line {
|
||||
display: flex;
|
||||
|
|
|
|||
27
flake.lock
generated
Normal file
27
flake.lock
generated
Normal 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
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue