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

add svg favicon + toolbar logo; set theme before paint

Browse source 
- favicon.svg (beer mug), linked from both entry points and shown in
  the tablet topbar next to the bar name
- inline data-theme in <head> kills the flash of dark on light-mode load
- hide the "Pfand zurück" tile when the bar has no Pfand
This commit is contained in:
müde 2026-06-14 22:55:15 +02:00
commit 6a0d30c8b5
5 changed files with 44 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/admin.html
View file

@ -4,6 +4,14 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>wutzcalc — Backoffice</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<script>
// Set the theme before first paint to avoid a flash of the wrong colors.
document.documentElement.setAttribute(
'data-theme',
localStorage.getItem('wutz.theme') === 'light' ? 'light' : 'dark'
);
</script>
<link rel="stylesheet" href="/src/styles.css" />
</head>
<body>

8
client/index.html
View file

@ -4,6 +4,14 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>wutzcalc</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<script>
// Set the theme before first paint to avoid a flash of the wrong colors.
document.documentElement.setAttribute(
'data-theme',
localStorage.getItem('wutz.theme') === 'light' ? 'light' : 'dark'
);
</script>
<link rel="stylesheet" href="/src/styles.css" />
</head>
<body>

14
client/public/favicon.svg Normal file
View file

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
<!-- handle -->
<rect x="19" y="13" width="9" height="11" rx="4.5" fill="none" stroke="#d98500" stroke-width="3"/>
<!-- mug body -->
<rect x="6" y="11" width="15" height="17" rx="2.5" fill="#f6a821"/>
<!-- lighter head of the beer -->
<rect x="6" y="11" width="15" height="4" rx="2.5" fill="#ffc34d"/>
<!-- foam -->
<g fill="#fffaf0">
<circle cx="9.5" cy="10" r="4"/>
<circle cx="14" cy="8.5" r="4.5"/>
<circle cx="18.5" cy="10" r="4"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 563 B

5
client/src/styles.css
View file

@ -49,6 +49,7 @@ button {
}
button:active { background: var(--surface-3); }
button:disabled { opacity: 0.4; }
button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
/* ---------- Tablet UI (portrait) ---------- */
@ -92,6 +93,8 @@ button:disabled { opacity: 0.4; }
border-bottom: 1px solid var(--border-soft);
flex: 0 0 auto;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar .logo { flex: 0 0 auto; }
.topbar .bar-name { font-size: 26px; font-weight: 800; }
.topbar .change { font-size: 17px; padding: 10px 14px; }
@ -213,7 +216,7 @@ button:disabled { opacity: 0.4; }
cursor: grab;
}
.dnd-item:active { cursor: grabbing; }
.dnd-item.drop-target { border-color: #6aa; background: #1a2630; }
.dnd-item.drop-target { border-color: #6aa; background: var(--surface-2); }
.dnd-item .grip { opacity: 0.4; cursor: grab; user-select: none; }
.dnd-item .dnd-name { flex: 1; }
.dnd-list li.muted { padding: 6px 8px; }

15
client/src/tablet/Sale.tsx
View file

@ -78,7 +78,10 @@ export function Sale({ config, onChangeBar }: Props) {
return (
<div class="tablet">
<div class="topbar">
<div class="bar-name">{bar.name}</div>
<div class="brand">
<img class="logo" src="/favicon.svg" alt="" width="28" height="28" />
<span class="bar-name">{bar.name}</span>
</div>
<button class="change" onClick={onChangeBar}>Bar wechseln</button>
</div>
@ -92,10 +95,12 @@ export function Sale({ config, onChangeBar }: Props) {
)}
</button>
))}
<button class="drink pfand-return" onClick={addPfandReturn}>
<div class="name">Pfand zurück</div>
<div class="price">−{formatCents(bar.pfand_cents)}</div>
</button>
{bar.pfand_cents > 0 && (
<button class="drink pfand-return" onClick={addPfandReturn}>
<div class="name">Pfand zurück</div>
<div class="price">−{formatCents(bar.pfand_cents)}</div>
</button>
)}
</div>
<div class="cart">