From 99a69202b947d41062070c15c2d94ff88cc16e3a Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Mon, 6 Apr 2026 01:30:31 -0400 Subject: [PATCH] landscape layout: remove max-width cutoff; sig-select stage/grid polish MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- src/apps/epic/static/apps/epic/room.js | 6 +++- src/static_src/scss/_applets.scss | 2 +- src/static_src/scss/_base.scss | 7 +++-- src/static_src/scss/_dashboard.scss | 2 +- src/static_src/scss/_game-kit.scss | 4 +-- src/static_src/scss/_gameboard.scss | 2 +- src/static_src/scss/_room.scss | 43 ++++++++++++++++---------- 7 files changed, 42 insertions(+), 24 deletions(-) diff --git a/src/apps/epic/static/apps/epic/room.js b/src/apps/epic/static/apps/epic/room.js index 4fdac38..ae79943 100644 --- a/src/apps/epic/static/apps/epic/room.js +++ b/src/apps/epic/static/apps/epic/room.js @@ -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'); } } diff --git a/src/static_src/scss/_applets.scss b/src/static_src/scss/_applets.scss index 6765de3..eb56c27 100644 --- a/src/static_src/scss/_applets.scss +++ b/src/static_src/scss/_applets.scss @@ -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, diff --git a/src/static_src/scss/_base.scss b/src/static_src/scss/_base.scss index 27576cf..579e310 100644 --- a/src/static_src/scss/_base.scss +++ b/src/static_src/scss/_base.scss @@ -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; diff --git a/src/static_src/scss/_dashboard.scss b/src/static_src/scss/_dashboard.scss index f8a9c06..d1ce4f2 100644 --- a/src/static_src/scss/_dashboard.scss +++ b/src/static_src/scss/_dashboard.scss @@ -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 { diff --git a/src/static_src/scss/_game-kit.scss b/src/static_src/scss/_game-kit.scss index efcd803..412d53b 100644 --- a/src/static_src/scss/_game-kit.scss +++ b/src/static_src/scss/_game-kit.scss @@ -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; diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss index 2e511a2..167c20b 100644 --- a/src/static_src/scss/_gameboard.scss +++ b/src/static_src/scss/_gameboard.scss @@ -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 { diff --git a/src/static_src/scss/_room.scss b/src/static_src/scss/_room.scss index f3e657a..8a00789 100644 --- a/src/static_src/scss/_room.scss +++ b/src/static_src/scss/_room.scss @@ -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 ─────────────────────────────────────────────