From f10044eac1997537bcdf7699f5b4284aac16f8e2 Mon Sep 17 00:00:00 2001 From: Peter Stone Date: Sun, 1 Feb 2026 14:47:50 -1000 Subject: Improve shopping mode and flatten nav bar Shopping mode: - Click to complete items (deletes user items, hides external items) - Add print button with compact two-column print layout - Fix CSRF token for HTMX requests - Fix input clearing with proper htmx:afterRequest handler - Remove "Quick Add" store option, require valid store Navigation: - Replace dropdown menu with flat nav showing all tabs - Remove unused dropdown JS Tests: - Add TestHandleShoppingModeComplete for user and external items Co-Authored-By: Claude Opus 4.5 --- web/templates/shopping-mode.html | 100 ++++++++++++++++++++++++++++++--------- 1 file changed, 78 insertions(+), 22 deletions(-) (limited to 'web/templates/shopping-mode.html') diff --git a/web/templates/shopping-mode.html b/web/templates/shopping-mode.html index 88d8561..b2f129a 100644 --- a/web/templates/shopping-mode.html +++ b/web/templates/shopping-mode.html @@ -14,20 +14,6 @@ margin: 0; padding: 0; } - .item-row { - transition: all 0.2s ease; - } - .item-row:active { - transform: scale(0.98); - background: rgba(255,255,255,0.15); - } - .item-checked { - opacity: 0.5; - } - .item-checked .item-name { - text-decoration: line-through; - color: rgba(255,255,255,0.4); - } .store-switcher { scrollbar-width: none; -ms-overflow-style: none; @@ -35,11 +21,62 @@ .store-switcher::-webkit-scrollbar { display: none; } + .flash-success { + background: rgba(34, 197, 94, 0.2); + border-radius: 8px; + } + @media print { + * { + text-shadow: none !important; + } + body { + background: white !important; + color: black !important; + font-size: 10px !important; + line-height: 1.2 !important; + } + .no-print { + display: none !important; + } + main { + padding: 0 !important; + } + #shopping-items > div { + display: grid !important; + grid-template-columns: 1fr 1fr !important; + gap: 0 12px !important; + } + #shopping-items > div > div { + background: none !important; + border: none !important; + border-radius: 0 !important; + padding: 1px 0 !important; + color: black !important; + gap: 3px !important; + } + #shopping-items span { + color: black !important; + font-size: 10px !important; + } + #shopping-items .item-qty { + font-size: 8px !important; + color: #666 !important; + } + #shopping-items .rounded-full { + width: 8px !important; + height: 8px !important; + border-width: 1px !important; + border-color: #888 !important; + } + #shopping-items .text-xs { + display: none !important; + } + } - + -

@@ -64,18 +105,22 @@ {{end}}

+ + +

{{.StoreName}}

{{.StoreName}}