applet rows: hover + click-lock highlight on every .applet-list-entry.row-3col (My Posts / My Buds / My Notes / My Scrolls / My Games) — bg shifts to --secUser, title to --quiUser (overriding the inherited --terUser link color + stripping the text-shadow the global .applet-list-entry a:hover rule had been baking in), body + ts cells come up from their dimmed 0.6 / 0.5 opacity to full --priUser so the dim middle/right cols pop against the --secUser fill; new apps/applets/static/apps/applets/row-lock.js IIFE module owns the touch-persistence state machine (single _lockedRow ref, .row-locked class toggle): clicking a row not currently locked → locks (clearing any prior lock); clicking the locked row again → unlocks; clicking another row → moves the lock to the new row; clicking anywhere not inside a .row-3col → clears the lock — mirrors the note-page notes-locked click-lock state machine but lighter (no DON/DOFF, no greeting swap, no fetch), one document-level click listener bound once via _bound re-entry guard so beforeEach _init() calls in specs don't pile up handlers; loaded globally via base.html next to applets.js since the rows render on both /billboard/ + /gameboard/; padding-inline 0.5rem + border-radius 0.25rem on the row container shrinks the highlight to a chip shape so hovered rows don't bleed all the way to the applet box edge; 6 Jasmine specs in RowLockSpec.js cover the four state-machine transitions + the "child element of row still locks the parent row" affordance (since the user can tap the body cell text, not just the title link) + the "only one row carries .row-locked at a time" invariant; SpecRunner.html updated (both static_src + the static/ runtime mirror the FT reads from per the project's static-src→static copy discipline) — TDD
Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -47,6 +47,10 @@
|
||||
grid-template-columns: minmax(4rem, auto) 1fr minmax(3rem, auto);
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: background-color 0.12s ease, color 0.12s ease;
|
||||
|
||||
.row-title {
|
||||
white-space: nowrap;
|
||||
@@ -68,6 +72,23 @@
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Hover (mouse) / click-lock (touch + click persistence) — both states
|
||||
// share the highlight. JS in `apps/applets/row-lock.js` toggles
|
||||
// `.row-locked` on click; `:hover` is pure CSS. Background to --secUser,
|
||||
// title to --quaUser, dimmed body + ts brought to full opacity in
|
||||
// --priUser (the back-of-card colour, readable against the --secUser
|
||||
// fill).
|
||||
&:hover,
|
||||
&.row-locked {
|
||||
background-color: rgba(var(--secUser), 1);
|
||||
|
||||
.row-title,
|
||||
a.row-title { color: rgba(var(--quiUser), 1); text-shadow: none; }
|
||||
|
||||
.row-body,
|
||||
.row-ts { color: rgba(var(--priUser), 1); opacity: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
.applet-list-entry {
|
||||
|
||||
Reference in New Issue
Block a user