From aa6541adddc26ed76f5ef8292d264841dfb3bc86 Mon Sep 17 00:00:00 2001 From: Esa Kataja Date: Sat, 5 Sep 2026 21:46:14 +0300 Subject: [PATCH] Replace the category dots with icons A coloured dot means nothing until the legend has been learned, which is the same objection that got the checkboxes made visible. The marks now carry colour and shape together: a steak, a drumstick, a fish, a leaf, and a quartered circle for the dishes covering several categories at once. The steak's bone is a real hole rather than a shape painted in the background colour, and the leaf lost the midrib it had in the mockup for the same reason: these sit on cards in the board and on the page background in the history list, so anything relying on knowing the backdrop breaks in one of them. One component, three sizes driven from CSS: 16px normally, 19 in the large pills, 22 on the logged card. It covers the board, the sides step, the logged card, the history rows, the catalog rows and the category checkboxes, so no dot markup or CSS is left. --- cmd/foodster/static/app.css | 26 +++---- cmd/foodster/views.templ | 94 +++++++++++++++++++++-- mockups/icons/index.html | 145 ++++++++++++++++++++++++++++++++++++ 3 files changed, 244 insertions(+), 21 deletions(-) create mode 100644 mockups/icons/index.html diff --git a/cmd/foodster/static/app.css b/cmd/foodster/static/app.css index fcd8c10..2c5fd57 100644 --- a/cmd/foodster/static/app.css +++ b/cmd/foodster/static/app.css @@ -123,21 +123,17 @@ html[data-theme="light"] .themetoggle .i-moon { display: none; } } .tabbar a[aria-current] { color: var(--accent); } -.dot { - width: 9px; - height: 9px; - border-radius: 2px; - flex: none; - display: inline-block; -} -.d-liha { background: var(--liha); } -.d-kana { background: var(--kana); } -.d-kala { background: var(--kala); } -.d-kasvis { background: var(--kasvis); } -.d-sek { - background: conic-gradient(var(--liha) 0 25%, var(--kana) 25% 50%, - var(--kala) 50% 75%, var(--kasvis) 75% 100%); -} +/* Category marks carry colour and shape together, so they are readable + without having learned which hue means what. */ +.cat { flex: none; display: block; } +.cat svg { display: block; width: 16px; height: 16px; } +.pill.xl .cat svg { width: 19px; height: 19px; } +.logged .cat svg { width: 22px; height: 22px; } + +.c-liha { color: var(--liha); } +.c-kana { color: var(--kana); } +.c-kala { color: var(--kala); } +.c-kasvis { color: var(--kasvis); } /* Day switcher */ .dayseg { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; } diff --git a/cmd/foodster/views.templ b/cmd/foodster/views.templ index 18fe049..25e0a8e 100644 --- a/cmd/foodster/views.templ +++ b/cmd/foodster/views.templ @@ -141,6 +141,88 @@ templ iconMoon() { } +// categoryIcon draws a dish's category as colour *and* shape. Colour on its +// own was not telling: a red blob and a yellow blob only differ once you have +// learned the legend. +templ categoryIcon(key string) { + switch key { + case "liha": + + @glyphLiha() + + case "kana": + + @glyphKana() + + case "kala": + + @glyphKala() + + case "kasvis": + + @glyphKasvis() + + default: + + @glyphSekalaiset() + + } +} + +// A steak, its bone knocked out with fill-rule so the hole is transparent on +// whatever background the icon lands on. +templ glyphLiha() { + +} + +// A drumstick. The bone is what keeps it apart from the steak at small sizes, +// where both are otherwise warm blobs. +templ glyphKana() { + +} + +templ glyphKala() { + +} + +// No midrib: stroking one in the card colour only works on a card, and these +// also sit on the page background in the history list. +templ glyphKasvis() { + +} + +// Quartered, one wedge per category: the mark already means "all of them". +templ glyphSekalaiset() { + +} + templ tabbar(current string) {