discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

My Sea iter 4b polish: Brief banner uses standard portaled .note-banner (Gaussian glass atop h2); next-free-draw datetime in dedicated <time> slot (not "Invalid Date"); DEL guard reuses shared #id_guard_portal from base.html — TDD

Browse Source 
UX refactor on top of iter 4b (b76d3c5) per user direction:

(1) Brief banner — replaced custom `.my-sea-brief` markup + SCSS w. a call to `Brief.showBanner` from note.js. Now matches the my-notes / my-sign default-deck-warning Briefs exactly: standard `.note-banner` portaled atop the h2 w. Gaussian-glass backdrop-filter blur. Tagged `.my-sea-locked-banner` for FT disambiguation only — no visual override.

(2) Brief timestamp — fix for "Invalid Date" rendering in note.js's `<time class="note-banner__timestamp">` slot. Previously passed `created_at: ''` to `Brief.showBanner` → `new Date('')` returns Invalid Date → `toLocaleDateString` renders "Invalid Date". Now passes the next-free-draw ISO timestamp as `created_at` (server emits via `|date:'c'`). After Brief.showBanner returns, the `_showFreeDrawLockedBrief` JS overwrites the rendered text w. the more detailed `D, M j @ g:i A` format ("Wed, May 20 @ 11:57 PM") — leaves the ISO `datetime=` attribute intact for accessibility. The `line_text` no longer carries the timestamp inline (it's redundant w. the dedicated slot).

(3) DEL guard portal — replaced custom `#id_my_sea_del_portal` fullscreen modal + `.my-sea-del-portal` SCSS w. a call to `window.showGuard` from base.html, targeting the shared `#id_guard_portal`. Same Gaussian-glass tooltip the room gear-menu DEL flow uses: no backdrop, positioned above the anchor button, standard `.btn-confirm OK` + `.btn-cancel NVM` pair. Bundled a non-breaking `options.yesLabel` extension to `show()` in base.html for future destructive flows that need a custom YES label (defaults to 'OK', resets on dismiss/confirm) — my-sea doesn't use it per user direction (the `.btn-confirm` class implies "OK"; destructive intent belongs on the trigger button, which is `.btn-danger DEL`).

Tests: 30 iter-4b ITs (model + lock + delete + saved-draw view branches) + 5 iter-4b FTs all green; IT/FT assertions updated to target the shared portal markup (`#id_guard_portal.active`, `.guard-yes`, `.guard-no`, `.note-banner.my-sea-locked-banner`).

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:
Disco DeDisco
2026-05-20 00:12:52 -04:00
parent b76d3c5dff
commit c1a8133345
5 changed files with 165 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/static_src/scss/_gameboard.scss
View File

@@ -505,74 +505,9 @@ body.page-gameboard {
}
// ── Iter 4b: Brief banner + DEL guard portal ─────────────────────────────────
// Brief banner — Look!-formatted strip above the picker whenever a saved
// draw occupies the user's free-quota slot. Shape mirrors .my-sea-sign-
// gate but sized as a banner (full-width, single line + actions row).
.my-sea-brief {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.5rem 1rem;
margin: 0.5rem 0 1rem;
background-color: rgba(var(--secUser), 0.65);
border: 0.1rem solid rgba(var(--terUser), 0.6);
border-radius: 0.4rem;
color: rgba(var(--terUser), 1);
font-size: 0.95rem;
&[hidden] { display: none; }
.my-sea-brief__line {
margin: 0;
flex: 1;
}
.my-sea-brief__timestamp {
font-weight: bold;
color: rgba(var(--ninUser), 1);
}
.my-sea-brief__nvm {
flex: 0 0 auto;
}
}
// DEL guard portal — fixed-position centered modal w. a uniform
// 'Are you sure?' prompt. CONFIRM POSTs to /gameboard/my-sea/delete;
// NVM closes the portal. The Brief banner above carries the quota-
// specific copy so this stays free of conditional text.
.my-sea-del-portal {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
&[hidden] { display: none; }
.my-sea-del-portal__panel {
background-color: rgba(var(--secUser), 0.95);
border: 0.15rem solid rgba(var(--terUser), 0.8);
border-radius: 0.5rem;
padding: 1.25rem 1.75rem;
min-width: 18rem;
text-align: center;
color: rgba(var(--terUser), 1);
}
.my-sea-del-portal__line {
margin: 0 0 1rem;
font-size: 1.05rem;
font-weight: bold;
}
.my-sea-del-portal__actions {
display: flex;
gap: 0.75rem;
justify-content: center;
}
}
// Both reuse shared chrome: the Brief is `.note-banner` from note.js
// (portaled atop h2 w. Gaussian glass); the DEL guard is `#id_guard_portal`
// from base.html (the same one the room gear-menu DEL uses, positioned
// above the anchor button w. Gaussian glass + no backdrop). The picker IIFE
// invokes it via `window.showGuard(delBtn, "Are you sure?", confirmFn,
// null, {yesLabel: "DEL"})`. No my-sea-specific SCSS needed.