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

XL landscape: revert tray to landscape style; fix sig-stage stretch

Browse Source 
- Remove _tray.scss XL (≥1800px) portrait override block entirely
- _isLandscape() no longer returns false at ≥1800px — tray uses
  landscape slide-from-top at all wide landscape widths
- sig-stage: align-self: stretch (was center) so JS sizeSigCard()
  measures correct stage width; card size no longer collapses
- Position strip: horizontal row at top (was vertical column-reverse)
- sig-overlay/sig-stage/sig-deck-grid layout polish at 1100px/1800px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-04-06 20:11:24 -04:00
parent 0bcc7567bb
commit e2cc38686f
6 changed files with 152 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/static_src/scss/_room.scss
View File

@@ -809,29 +809,23 @@ $card-h: 60px;
z-index: 50;
}
// Reflow position strip into a vertical column along the left edge,
// reversed so 6 is at top, 1 at bottom, below the GAMEROOM title.
// Position strip: horizontal row across the top, slots 1-6 in order.
// Offset from both sidebars (5rem each) and centred with gap.
.position-strip {
flex-direction: column-reverse;
top: 3rem;
left: 0.5rem;
right: auto;
flex-direction: row;
top: 2.5rem;
left: 5rem;
right: 5rem;
justify-content: center;
gap: round($gate-gap * 0.4);
}
// Shallow landscape (phones): wrap into two columns — left: 6,5,4 / right: 3,2,1
// Columns grow rightward (wrap, not wrap-reverse) so overflow: hidden doesn't clip.
// order: -1 on slots 4–6 pulls them to the front of the flex sequence; combined
// with column-reverse they land in the left column reading 6,5,4 top-to-bottom.
// Small landscape (phones ≤550px tall): strip stays horizontal — no two-column
// trick needed now that the h2 is in the gutter. Just clear any order overrides.
@media (max-height: 550px) {
.position-strip {
flex-wrap: wrap;
// cap height to exactly 3 circles so the 4th wraps to a new column
max-height: #{3 * round($gate-node * 0.75) + 2 * round($gate-gap * 0.4)};
.gate-slot[data-slot="4"],
.gate-slot[data-slot="5"],
.gate-slot[data-slot="6"] { order: -1; }
.gate-slot { order: 0; }
top: 1rem;
}
}
@@ -1084,23 +1078,50 @@ html:has(.sig-backdrop) {
// Grid margins reset to 0 — overlay padding handles all edge clearance.
@media (orientation: landscape) {
.sig-overlay { padding-left: 4rem; }
.sig-modal { max-width: none; }
.sig-modal {
max-width: none;
flex-direction: row; // grid to the right, stage + card preview to the left
margin-left: 4rem;
margin-right: 3rem;
}
.sig-stage {
min-width: 0; // allow shrinking in row layout; align-items:flex-end already set
}
.sig-deck-grid {
grid-template-columns: repeat(9, 3rem);
grid-template-columns: repeat(6, 2.5rem);
margin: 0;
align-self: flex-end; // sit at the bottom of the modal row
}
}
@media (orientation: landscape) and (min-width: 1100px) {
@media (orientation: landscape) and (min-width: 900px) {
// Wide landscape: revert to stacked layout (stage top, 18-card row grid bottom).
.sig-modal {
flex-direction: column;
align-items: stretch;
}
.sig-stage {
min-width: auto;
align-self: stretch; // fill full modal width so JS sizeSigCard() gets correct stageWidth
margin-left: 3rem;
}
.sig-deck-grid {
grid-template-columns: repeat(18, 3rem);
align-self: center;
}
}
@media (orientation: landscape) and (min-width: 1800px) {
// Sig overlay: clear doubled navbar sidebar (8rem instead of 4rem)
.sig-overlay { padding-left: 8rem; }
// Sig overlay: clear doubled sidebars (8rem each instead of 4rem/6rem)
.sig-overlay { padding-left: 8rem; padding-right: 8rem; }
.sig-stage {
align-self: stretch; // fill full modal width so JS sizeSigCard() gets correct stageWidth
margin-left: 3rem;
}
.sig-deck-grid {
grid-template-columns: repeat(18, 5rem);
align-self: center;
}
// Room menu: base right: 0.5rem (same-specificity ID rule) overrides _applets.scss
// XL block because _room.scss is imported later. Re-declare here to win the cascade.