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 @@
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):
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 @@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 @@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 @@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.
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.
+ 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.
+
bggpipeshelf → BGG pipeline
-