From 78debdd62fce6985236600136d14d3e726991b89 Mon Sep 17 00:00:00 2001 From: Eric Wagoner Date: Mon, 3 Aug 2026 16:47:40 -0400 Subject: [PATCH] Mobile nav becomes a hamburger menu; Juniper joins the Help page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The horizontally scrolling nav strip lost its scroll position on every page load and hid the far entries. The top bar is now brand + hamburger (aria-expanded/aria-controls, 44px target); the nav drops down as the same stacked list the desktop rail shows — badges, gold current-page marker — and navigation naturally closes it. Help gains "The piper": Juniper's full artwork with credit and the trademark attribution, which mobile previously never showed anywhere (the sidebar portrait is hidden there). Also fixes the Help cards flex-rowing their paragraphs into accidental columns on desktop — visible in the README's own screenshot — via a card.prose block variant. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_016jXZFSTZQKzAC8fqpWSz9g --- src/bggpipe/static/app.css | 54 +++++++++++++++++++-------- src/bggpipe/static/app.js | 10 +++++ src/bggpipe/templates/pages/help.html | 22 ++++++++--- src/bggpipe/templates/shell.html | 4 +- tests/test_web_dashboard.py | 4 +- 5 files changed, 70 insertions(+), 24 deletions(-) diff --git a/src/bggpipe/static/app.css b/src/bggpipe/static/app.css index 4196d6e..4fc92f1 100644 --- a/src/bggpipe/static/app.css +++ b/src/bggpipe/static/app.css @@ -121,6 +121,7 @@ nav[aria-label="Primary"] a[aria-current="page"] { display: block; margin: 0 auto; } .piperbox figcaption { font-size: .72rem; opacity: .8; margin-top: .45rem; } +.navtoggle { display: none; } .piperbox .legal { font-size: .62rem; opacity: .6; line-height: 1.45; text-align: left; } .skip { position: absolute; left: -999px; top: 0; z-index: 10; @@ -192,6 +193,17 @@ button.danger { color: var(--stop-ink); border-color: var(--stop); background: # display: flex; gap: 1.1rem; scroll-margin-top: 5rem; } +.card.prose { display: block; } +.card.prose p, .card.prose ol { margin: .55rem 0; line-height: 1.55; } +.card.prose > :first-child { margin-top: 0; } +.card.prose > :last-child { margin-bottom: 0; } +.artcard { text-align: center; } +.artcard img { + width: 100%; max-width: 15rem; + border: var(--line); border-radius: var(--radius-lg); + background: var(--sky); +} +.artcard .legal { font-size: .74rem; color: var(--ink-soft); max-width: 30rem; margin: .6rem auto 0; } .card.active { border-color: var(--accent); box-shadow: var(--shadow-raised); @@ -464,32 +476,44 @@ button.danger { color: var(--stop-ink); border-color: var(--stop); background: # /* -- responsive -------------------------------------------------------- */ -/* The rail collapses to a top bar: brand line, then one horizontally - * scrollable nav row (no wrapping — a second row costs shelf space). */ +/* The rail collapses to a top bar: brand + hamburger; the nav drops + * down as a stacked menu (a scrolling strip lost its position on every + * page load and hid the far entries). */ @media (max-width: 900px) { body { display: block; } .sidebar { - position: sticky; top: 0; height: auto; display: block; z-index: 5; + position: sticky; top: 0; height: auto; z-index: 5; + display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; border-right: none; border-bottom: 4px solid transparent; border-image: var(--path) 1; } - .brand { padding: .5rem .8rem .1rem; } + .brand { padding: .5rem .8rem; flex: 1; } .brand img { width: 30px; height: 30px; } .wordmark { font-size: 1.1rem; } .wordmark small { display: inline; margin-left: .5rem; font-size: .68rem; } + .navtoggle { + display: inline-flex; align-items: center; justify-content: center; + width: 44px; height: 40px; margin-right: .6rem; + background: none; border: 2px solid rgba(255, 255, 255, .75); + border-radius: var(--radius); box-shadow: none; padding: 0; + } + .navtoggle .bars { + display: block; position: relative; + width: 18px; height: 2px; background: #fff; border-radius: 2px; + } + .navtoggle .bars::before, .navtoggle .bars::after { + content: ""; position: absolute; left: 0; + width: 18px; height: 2px; background: #fff; border-radius: 2px; + } + .navtoggle .bars::before { top: -6px; } + .navtoggle .bars::after { top: 6px; } + body.navopen .navtoggle { background: rgba(255, 255, 255, .15); } nav[aria-label="Primary"] { - flex-direction: row; padding: 0 .4rem .1rem; - overflow-x: auto; + display: none; flex-basis: 100%; flex-direction: column; + padding: 0 0 .4rem; } - nav[aria-label="Primary"] a { - flex: 0 0 auto; - border-left: none; border-bottom: 3px solid transparent; - padding: .45rem .6rem; - } - nav[aria-label="Primary"] a[aria-current="page"] { - border-bottom-color: var(--gold); background: none; - } - .navbadge { margin-left: .35rem; } + body.navopen nav[aria-label="Primary"] { display: flex; } + nav[aria-label="Primary"] a { padding: .6rem 1rem; } .piperbox { display: none; } } diff --git a/src/bggpipe/static/app.js b/src/bggpipe/static/app.js index d6fe286..208772d 100644 --- a/src/bggpipe/static/app.js +++ b/src/bggpipe/static/app.js @@ -66,6 +66,16 @@ function pollLoop(fn, ms, recovered) { }, ms); } +/* Mobile: the top bar's hamburger opens the nav; navigation reloads the + * page, so each page starts with the menu closed. */ +{ + const toggle = document.querySelector(".navtoggle"); + if (toggle) toggle.addEventListener("click", () => { + const open = document.body.classList.toggle("navopen"); + toggle.setAttribute("aria-expanded", String(open)); + }); +} + /* Sidebar badges: the counts that mean "something wants your attention". */ async function refreshBadges() { const p = await fetchJSON("/api/pipeline"); diff --git a/src/bggpipe/templates/pages/help.html b/src/bggpipe/templates/pages/help.html index 4ff183f..3291784 100644 --- a/src/bggpipe/templates/pages/help.html +++ b/src/bggpipe/templates/pages/help.html @@ -9,7 +9,7 @@

The flow: shelves → collection

-
+

Six pipeline stages and two checkpoints that are yours. Stages run from the Pipeline page (or the CLI — both share all state and either can pick up where the other left off):

  1. extract — every photo goes to Claude vision once; what it reads (titles plus edition cues: publisher, edition wording, year, language) lands on the Titles page. Boxes it can see but can't read become reshoot tickets on the Photos page.
    2. @@ -24,7 +24,7 @@

What each page is for

-
+

Pipeline — run stages one at a time and watch their live output. Shows what's blocking (missing keys, stub data) and the counts at every step.

Photos — drag photos in (or drop them in the photos/ folder). Each photo has its own page listing every title read from it and any reshoot tickets — boxes seen but not identified. Photograph those up close, drop the new shot in, and extract again. Re-uploading a photo with the same name re-extracts it.

Titles — every read off your shelves, alphabetized, with its status and photos. This is the proofread checkpoint: edit, split, remove. Its badge counts shaky read lines — the model wasn't sure and nothing has verified them; filter to them, then press ✓ looks right or edit each one.

@@ -34,7 +34,7 @@

Fixing the titles: edit, split, remove

-
+

Vision reads aren't perfect, and you know things the photos don't show. Every line on the Titles page has curation actions, and every one of them is durable: the decision is saved in a small committed file and replayed on every rebuild, so re-running extract or resolve can never undo it.

edit — fix a misread title or add cues you already know (publisher, edition, year, language). A corrected misspelling automatically merges with a correctly-read sighting of the same game from another photo. If the line already had a BGG match, saving re-queues it so resolve searches again with the corrected data.

split into copies — one line, several physical boxes? Splitting makes each photo its own copy, and each copy picks its own edition afterward. Appears on any line whose title was seen in more than one photo. Splitting one game never affects a same-named different edition.

@@ -43,7 +43,7 @@

What the status chips mean

-
+

awaiting BGG extracted, not yet matched — usually waiting on the BGG API token.

auto matched confidently, no review needed. approved you picked the match yourself.

ambiguous several plausible games — needs your pick on Review. unmatched nothing plausible found — enter a BGG id or re-search on Review.

@@ -53,14 +53,24 @@

Keyboard shortcuts

-
+

Review: j/k move between cards · 1–9 pick a candidate · r reject · m manual BGG id · u edition unknown · v veto a merge.

Photo pages: ←/→ move between photos.

Your data, on disk

-
+

Everything lives in flat files under data/ — inspectable, hand-editable, and git-friendly. The pipeline artifacts: titles.json (what was read), matches.csv (what it matched), to_add.csv/to_update.csv (what upload will do), upload_log.csv (what it did), games.json (the library). Your curation: title_edits.json, title_splits.json, title_removals.json, unidentified_dismissed.json.

Credentials never live in files — only environment variables, set up by bggpipe init. The app serves localhost only, unless started with --lan — that opens it to your network behind a per-run access key printed at startup (no login beyond the key; trusted networks only).

More depth: the README covers setup and photo technique; docs/bgg-upload-flow.md documents the upload automation.

+ +

The piper

+
+ the bggpipe piper — a bagpiper whose bag is a board game box +

Mascot art by Juniper, used with pride.

+

BoardGameGeek and BGG are trademarks of BoardGameGeek, LLC. + bggpipe is an independent project, not affiliated with or endorsed by + BoardGameGeek.

+
diff --git a/src/bggpipe/templates/shell.html b/src/bggpipe/templates/shell.html index 78a8453..22fde12 100644 --- a/src/bggpipe/templates/shell.html +++ b/src/bggpipe/templates/shell.html @@ -14,7 +14,9 @@ bggpipeshelf → BGG pipeline -