eric/bggpipe
1
0
Fork 0
Code Issues Pull Requests Releases 2 Activity

The pick panel earns its styling

Browse Source 
Eric's screenshot told the story: .editform label's field styling
(stacked, uppercase, gray) was swallowing the checklist rows, and the
container select was browser-native. Pick rows override back to plain
reading lines — checkbox, name in ink, year·type as quiet meta, the
already-cataloged chip pushed to the row's edge, hover tint — inside
a bordered scrollable pane; selects join the design system alongside
inputs. Verified against a live 117-result search.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jXZFSTZQKzAC8fqpWSz9g
This commit is contained in:
Eric Wagoner
2026-08-09 12:11:42 -04:00
co-authored by Claude Fable 5
parent e153556fbf
commit 06902538fe
2 changed files with 32 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/bggpipe/static/app.css
+31 -4
View File
@@ -502,10 +502,37 @@ a.game:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
background: none; border: none; padding: 0; font: inherit; background: none; border: none; padding: 0; font: inherit;
color: var(--accent); text-decoration: underline; cursor: pointer; color: var(--accent); text-decoration: underline; cursor: pointer;
} }
.pickrow { display: flex; gap: .5rem; align-items: center; padding: .25rem 0; } /* pick rows live inside an .editform, whose label style (stacked,
.pickrow .meta { font-size: .8rem; } uppercase, gray) is for FIELDS — a checklist row overrides it back
#pickresults { max-height: 22rem; overflow-y: auto; margin: .5rem 0; } to a plain reading line */
#pickfooter { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; } .editform label.pickrow {
flex-direction: row; align-items: center; gap: .55rem;
font-size: .9rem; text-transform: none; letter-spacing: normal;
color: var(--ink); padding: .32rem .35rem; cursor: pointer;
border-radius: var(--radius);
}
.editform label.pickrow:hover { background: rgba(122, 74, 158, .08); }
.pickrow input[type="checkbox"] {
margin: 0; width: 1.05rem; height: 1.05rem; flex: none;
accent-color: var(--accent);
}
.pickrow .meta { font-size: .78rem; color: var(--ink-soft); }
.pickrow .chip { margin-left: auto; }
#pickresults {
flex: 1 1 100%; max-height: 22rem; overflow-y: auto;
border: 1px solid var(--board-edge); border-radius: var(--radius);
padding: .25rem; background: #fff;
}
#pickfooter {
flex: 1 1 100%; display: flex; gap: .7rem; align-items: end;
flex-wrap: wrap;
}
#pickfooter .edithint { flex: 1 1 100%; }
.editform select {
font: inherit; font-size: .85rem; color: var(--ink);
border: 2px solid var(--board-edge); border-radius: var(--radius);
padding: .25rem .45rem; background: #fff; max-width: 24rem;
}
.empty { .empty {
background: var(--board); border: 2px dashed var(--board-edge); background: var(--board); border: 2px dashed var(--board-edge);
src/bggpipe/templates/pages/titles.html
+1 -1
View File
@@ -22,7 +22,7 @@
class="linkish">search BGG and tick them off</button></span> class="linkish">search BGG and tick them off</button></span>
</form> </form>
<div id="pickpanel" class="editform card" hidden> <div id="pickpanel" class="editform card" hidden>
<label>Search BGG <input id="pickq" placeholder="red dragon inn"></label> <label>Search BGG <input id="pickq" placeholder="red dragon inn" size="28"></label>
<span class="editactions"><button type="button" id="dopicksearch" class="primary">search</button> <span class="editactions"><button type="button" id="dopicksearch" class="primary">search</button>
<button type="button" id="pickcancel">cancel</button></span> <button type="button" id="pickcancel">cancel</button></span>
<div id="pickresults"></div> <div id="pickresults"></div>