Kessinen/foodster
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Releases 3 Wiki Activity

Add a header, a theme toggle and visible checkboxes

Browse Source 
Three pieces of chrome that were missing or misleading.

A header with the bowl mark and the app name, on every page. The page title
bar below it is no longer sticky: on a phone a tall sticky header eats the
screen, and the bottom tab bar already handles navigation.

A theme toggle, remembered per device in localStorage, because a shared
instance with no accounts should let the kitchen phone and the laptop
disagree. Dark by default, and the default lives in the server-rendered
markup so it survives with JavaScript off and never flashes. The button shows
the theme that is on — moon while dark, sun while light — rather than the one
a click would bring, and its label names the state before the action. Both
icons ship on every page and CSS picks one, so the server never needs to know
what this device chose. Following the system was considered and dropped: a
third state costs a control harder to read than the choice is worth.

The checkbox chips no longer hide the native control behind opacity: 0. With
only a background colour to go on there was no way to tell "Tarjoillaan
lisukkeiden kanssa" on from off. Colour is not a state indicator; a checkbox
is. This covers the side, category and has_sides chips alike.

Smoke checks cover the parts that would regress silently: that dark is the
no-JS default, and that both theme icons are present for CSS to choose from.
This commit is contained in:
Esa Kataja
2026-09-05 19:05:41 +03:00
parent 0538d61ba6
commit 15495ec0c0
6 changed files with 189 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/smoke.sh
+9
View File
@@ -57,6 +57,15 @@ check "datastar client is served" \
check "favicon is served" \
"$(curl -s -o /dev/null -w '%{http_code}' -u ":$pass" "http://$addr/static/favicon.svg")" "200"
check "theme script is served" \
"$(curl -s -o /dev/null -w '%{http_code}' -u ":$pass" "http://$addr/static/theme.js")" "200"
home=$(curl -s -u ":$pass" "http://$addr/")
check "the header carries the brand" "$home" "Foodster"
check "dark is the default without JavaScript" "$home" '<html lang="fi" data-theme="dark">'
check "the theme toggle is present" "$home" "data-theme-toggle"
check "both theme icons ship so CSS can pick one" "$home" 'class="i-moon"'
check "apple touch icon is served" \
"$(curl -s -o /dev/null -w '%{http_code}' -u ":$pass" "http://$addr/static/apple-touch-icon.png")" "200"