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

tablet: +/- buttons on cart lines, long-press drink for 1-5 picker

Browse source 
Cart entries (drink lines and Pfand-zurück) now have +/- buttons next
to the quantity instead of only accumulating via repeated taps;
decrementing to 0 removes the line. Long-pressing a drink tile opens
a small overlay with buttons 1-5 to add that many at once — a plain
tap still adds one. The long-press timer is cancelled on pointerup/
leave/cancel, and the click that follows a fired long-press is
swallowed so it doesn't also add a plain 1x.
This commit is contained in:
iris 2026-07-29 18:33:51 +02:00
commit b5735c270f
2 changed files with 161 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

55
client/src/styles.css
View file

@ -155,6 +155,46 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
color: #fff;
}
.picker-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.picker {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
width: min(320px, 86vw);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.picker-title {
font-size: 22px;
font-weight: 800;
text-align: center;
}
.picker-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.picker-count {
height: 64px;
font-size: 26px;
font-weight: 800;
}
.picker-cancel {
background: transparent;
border-color: var(--border-soft);
}
.cart {
flex: 0 0 38vh;
background: var(--surface);
@ -176,6 +216,7 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
.cart-line {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3px 0;
font-size: 20px;
font-weight: 600;
@ -183,6 +224,20 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
.cart-line.pfand { color: var(--pfand); }
.cart-line.return { color: var(--danger); }
.cart-line.muted { opacity: 0.5; }
.cart-line-label {
display: flex;
align-items: center;
gap: 8px;
}
.qty-btn {
flex: 0 0 auto;
width: 28px;
height: 28px;
padding: 0;
line-height: 1;
font-size: 18px;
border-radius: 6px;
}
.cart-total {
font-size: 56px;
font-weight: 800;