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

landscape layout: remove max-width cutoff; sig-select stage/grid polish

Browse Source 
- All landscape @media queries: drop and (max-width: 1440px) — sidebar layout
  now activates for all landscape orientations regardless of viewport width
- _base.scss landscape container: add max-width:none to override the
  @media(min-width:1200px) rule and fill the full space between sidebars
- sig-select sig-deck-grid: landscape now 9×2 @ 3rem cards; 18×1 at ≥1100px
  (bumped from 992px to avoid last-card clip); card text scales with --sig-card-w
- sig-stat-block: flex:1→flex:0 0 auto with width:--sig-card-w so it matches
  preview card dimensions instead of stretching across the full stage
- room.js sizeSigModal: landscape card width clamped to [90px, 160px]

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-04-06 01:30:31 -04:00
parent 55bb450d27
commit 99a69202b9
7 changed files with 42 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/apps/epic/static/apps/epic/room.js
View File

@@ -78,7 +78,11 @@
var sw = stageEl.offsetWidth - 24; // subtract padding (0.75rem × 2)
var sh = stageEl.offsetHeight - 24;
if (sw > 0 && sh > 0) {
var cardW = Math.min(sw * 0.4, sh * 0.8 * 5 / 8);
// Clamp between 90px (never tiny in landscape) and 160px (never
// dominant on very wide/tall viewports). In portrait, skip the
// floor so small modals still scale down naturally.
var cardW = Math.min(sw * 0.4, sh * 0.8 * 5 / 8, 160);
if (isLandscape) { cardW = Math.max(cardW, 90); }
overlay.style.setProperty('--sig-card-w', cardW + 'px');
}
}

2
src/static_src/scss/_applets.scss
View File

@@ -110,7 +110,7 @@
}
// In landscape: shift gear btn and applet menus left of the footer right sidebar
@media (orientation: landscape) and (max-width: 1440px) {
@media (orientation: landscape) {
$sidebar-w: 4rem;
.gameboard-page,

7
src/static_src/scss/_base.scss
View File

@@ -192,7 +192,7 @@ body {
}
}
@media (orientation: landscape) and (max-width: 1440px) {
@media (orientation: landscape) {
$sidebar-w: 4rem;
// ── Sidebar layout: navbar ← left, footer → right ────────────────────────────
@@ -288,10 +288,13 @@ body {
}
}
// Container: fill center, compensate for fixed sidebars on both sides
// Container: fill center, compensate for fixed sidebars on both sides.
// max-width: none overrides the @media (min-width: 1200px) rule above so the
// container fills all available space between the two sidebars on wide screens.
body .container {
flex: 1;
min-width: 0;
max-width: none;
margin-left: $sidebar-w;
margin-right: $sidebar-w;
padding: 0 0.5rem;

2
src/static_src/scss/_dashboard.scss
View File

@@ -149,7 +149,7 @@ body.page-dashboard {
}
}
@media (orientation: landscape) and (max-width: 1440px) {
@media (orientation: landscape) {
// Reset the 666px min-width so #id_dash_content shrinks to fit within the
// sidebar-bounded container rather than overflowing into the footer sidebar.
#id_dash_content {

4
src/static_src/scss/_game-kit.scss
View File

@@ -3,7 +3,7 @@
bottom: 0.5rem;
right: 0.5rem;
@media (orientation: landscape) and (max-width: 1440px) {
@media (orientation: landscape) {
right: 0.5rem;
bottom: 0.5rem;
top: auto;
@@ -45,7 +45,7 @@
z-index: 316;
overflow: hidden;
@media (orientation: landscape) and (max-width: 1440px) {
@media (orientation: landscape) {
$sidebar-w: 4rem;
// left: $sidebar-w;
right: $sidebar-w;

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

@@ -46,7 +46,7 @@ body.page-gameboard {
}
}
@media (orientation: landscape) and (max-width: 1440px) {
@media (orientation: landscape) {
// Restore clip in landscape — overrides the >738px overflow:visible above,
// preventing the gameboard applets from bleeding into the footer sidebar.
body.page-gameboard .container {

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

@@ -800,7 +800,7 @@ $card-h: 60px;
}
// Landscape mobile — aggressively scale down to fit short viewport
@media (orientation: landscape) and (max-width: 1440px) {
@media (orientation: landscape) {
// Sink navbar below gate/role-select overlays when a modal is open.
// Landscape navbar z-index is 100 (_base.scss); gate-backdrop/overlay are
// 100/120 — same level causes paint-order ties so we drop it to 50.
@@ -909,6 +909,7 @@ html:has(.sig-backdrop) {
// game-kit sets .fan-card-corner { position: absolute; top/left offsets }
// so these just need display/font overrides; the corners land at the card edges.
// All font-sizes scale with --sig-card-w (ratio = original-rem × 16 / 120).
.fan-card-corner--tl {
display: flex;
flex-direction: column;
@@ -916,8 +917,8 @@ html:has(.sig-backdrop) {
line-height: 1.1;
gap: 0.1rem;
.fan-corner-rank { font-size: 1rem; font-weight: 700; }
i { font-size: 0.75rem; }
.fan-corner-rank { font-size: calc(var(--sig-card-w, 120px) * 0.133); font-weight: 700; }
i { font-size: calc(var(--sig-card-w, 120px) * 0.1); }
}
.fan-card-corner--br {
@@ -927,8 +928,8 @@ html:has(.sig-backdrop) {
line-height: 1.1;
gap: 0.1rem;
.fan-corner-rank { font-size: 0.9rem; font-weight: 700; }
i { font-size: 0.75rem; }
.fan-corner-rank { font-size: calc(var(--sig-card-w, 120px) * 0.12); font-weight: 700; }
i { font-size: calc(var(--sig-card-w, 120px) * 0.1); }
}
.fan-card-face {
@@ -941,20 +942,22 @@ html:has(.sig-backdrop) {
padding: 0.25rem 0.15rem;
gap: 0.2rem;
.fan-card-name-group { font-size: 0.55rem; opacity: 0.6; }
.fan-card-name { font-size: 0.7rem; font-weight: 600; }
.fan-card-arcana { font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; }
.fan-card-correspondence{ font-size: 0.5rem; opacity: 0.5; }
.fan-card-name-group { font-size: calc(var(--sig-card-w, 120px) * 0.073); opacity: 0.6; }
.fan-card-name { font-size: calc(var(--sig-card-w, 120px) * 0.093); font-weight: 600; }
.fan-card-arcana { font-size: calc(var(--sig-card-w, 120px) * 0.067); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; }
.fan-card-correspondence{ font-size: calc(var(--sig-card-w, 120px) * 0.067); opacity: 0.5; }
}
}
// Stat block — same height as the preview card; fills remaining stage width.
// Height derived from the JS-computed --sig-card-w via aspect ratio 5:8.
// Stat block — same dimensions as the preview card (width × 5:8 aspect).
// flex: 0 0 auto so it doesn't stretch to fill the stage; the rest of the
// stage row is simply empty, giving the card room to breathe.
.sig-stat-block {
flex: 1;
flex: 0 0 auto;
width: var(--sig-card-w, 120px);
height: calc(var(--sig-card-w, 120px) * 8 / 5);
align-self: flex-end;
background: rgba(var(--priUser), 0.25);
background: rgba(var(--priUser), 0.5);
border-radius: 0.4rem;
border: 0.1rem solid rgba(var(--terUser), 0.15);
display: none;
@@ -1074,17 +1077,25 @@ html:has(.sig-backdrop) {
}
// ─── Sig select: landscape overrides ─────────────────────────────────────────
// Wider viewport → 2 rows of 9 cards; modal fills full available width.
// Landscape base: 9×2 grid of 3rem cards. At ≥992px (wide enough for 18 cards
// at 3rem + 4rem left + ~4rem right): collapse to a single 18×1 row so the
// stage preview gets maximum vertical real-estate.
// padding-left clears the fixed left navbar (JS sets right/bottom but not left).
// Grid margins reset to 0 — overlay padding handles all edge clearance in landscape.
// 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-deck-grid {
grid-template-columns: repeat(9, minmax(0, 90px));
grid-template-columns: repeat(9, 3rem);
margin: 0;
}
}
@media (orientation: landscape) and (min-width: 1100px) {
.sig-deck-grid {
grid-template-columns: repeat(18, 3rem);
}
}
// ─── Seat tray — see _tray.scss ─────────────────────────────────────────────