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

Sea Select options: OK beside the select + --priUser chunk rects — TDD

Browse Source 
Restyle the spread-options page (post the scroll-snap refactor):
- OK `.btn-confirm` moves UP beside the `.sea-select` combobox (a new
  `.sea-select-row`), off the AUTO DRAW / DEL action row.
- OK gains `.btn-disabled` + × the moment the first card is drawn — inverse to
  DEL (which loses them then), simultaneous with the combobox locking. So
  `_chooseSpread` (OK) no longer locks; the lock + both btn states flip together
  at the first draw via `_setHasDrawn` + `_lockSpread`. Server-renders OK
  disabled/× when `saved_by_position`.
- The three chunks (spread/select/OK, the mini preview, AUTO DRAW/DEL) each get
  the same --priUser rounded rectangle as the GAME POST lines / composer
  (`_base.scss` `.form-control`): --priUser fill + half-alpha --secUser border +
  rounded + padding. The `.sea-form-col`/`-main` go transparent flex columns so
  the felt shows between the chunks.
- IT: OK enabled / DEL disabled when fresh; flips once a card is drawn.
  953 epic+gameboard ITs green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-06-08 00:02:14 -04:00
parent edc9a49f06
commit 1fe257a7a9
3 changed files with 97 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/static_src/scss/_sky.scss
View File

@@ -115,11 +115,51 @@ html.sea-open .sea-page.sea-page--room {
}
// The options form blends onto the --duoUser felt (transparent, content-sized) —
// "the modal contents on green felt", not the modal's purple --priUser card.
// "the modal contents on green felt". The form-col + form-main are transparent
// flex columns; each of the THREE chunks (spread/select/OK, preview, actions)
// is its own --priUser rounded rectangle (the GAME POST .form-control look).
.sea-page--room .sea-options-col .sea-form-col {
background: transparent;
width: auto;
min-width: 14rem;
min-width: 15rem;
max-width: 22rem;
padding: 0;
gap: 0.6rem;
}
.sea-page--room .sea-options-col .sea-form-main {
flex: 0 0 auto;
overflow: visible;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
// Combobox + OK on one row (OK to the RIGHT of the select).
.sea-page--room .sea-options-col .sea-select-row {
display: flex;
align-items: center;
gap: 0.5rem;
.sea-select { flex: 1; min-width: 0; }
}
// The three chunks — same --priUser rectangle as the GAME POST lines/composer
// (_base.scss .form-control): --priUser fill + a half-alpha --secUser border +
// rounded corners + padding. Resets each chunk's own modal-era margins/padding.
.sea-page--room .sea-options-col .sea-field,
.sea-page--room .sea-options-col .sea-cards-col--preview,
.sea-page--room .sea-options-col .sea-form-actions {
background-color: rgba(var(--priUser), 1);
border: 0.1rem solid rgba(var(--secUser), 0.5);
border-radius: 0.5rem;
padding: 0.6rem 0.75rem;
margin: 0;
}
.sea-page--room .sea-options-col .sea-form-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
// Pre-confirm: only the options show (the cross is hidden), filling the aperture