sig-select landscape: stage card now visible; gear/kit btns in right sidebar column
sizeSigModal() no longer uses tray bottomInset in landscape (was over-shrinking the modal, pushing the stage off-screen); fixed 60px kit-bag-handle clearance instead. Gear btn + kit btn shifted into the 4rem right sidebar strip (right: 0.5rem) and nudged down a quarter-rem so they clear the last card in the 9×2 grid. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -35,27 +35,38 @@
|
|||||||
var rightInset = 0;
|
var rightInset = 0;
|
||||||
var bottomInset = 0;
|
var bottomInset = 0;
|
||||||
|
|
||||||
// Tray handle: portrait → vertical strip on right; landscape → horizontal at bottom
|
var isLandscape = vw > vh;
|
||||||
|
|
||||||
|
// Tray handle: portrait → vertical strip on right; landscape → tray is easily
|
||||||
|
// dismissed, so skip the bottomInset calculation (would over-shrink the modal).
|
||||||
var trayHandle = document.getElementById('id_tray_handle');
|
var trayHandle = document.getElementById('id_tray_handle');
|
||||||
if (trayHandle) {
|
if (trayHandle && !isLandscape) {
|
||||||
var hr = trayHandle.getBoundingClientRect();
|
var hr = trayHandle.getBoundingClientRect();
|
||||||
if (hr.width >= hr.height) {
|
if (hr.width < hr.height) {
|
||||||
// Landscape: handle spans the bottom
|
|
||||||
bottomInset = vh - hr.top;
|
|
||||||
} else {
|
|
||||||
// Portrait: handle strips the right edge
|
// Portrait: handle strips the right edge
|
||||||
rightInset = vw - hr.left;
|
rightInset = vw - hr.left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Gear / kit buttons fixed at the right edge may protrude left of the tray handle
|
// Gear / kit buttons: update right inset if near right edge.
|
||||||
|
// In landscape they sit at bottom-right but are also dismissible — skip bottomInset.
|
||||||
document.querySelectorAll('.room-page > .gear-btn').forEach(function (btn) {
|
document.querySelectorAll('.room-page > .gear-btn').forEach(function (btn) {
|
||||||
var br = btn.getBoundingClientRect();
|
var br = btn.getBoundingClientRect();
|
||||||
if (br.right > vw - 30) {
|
if (br.right > vw - 30) {
|
||||||
rightInset = Math.max(rightInset, vw - br.left);
|
rightInset = Math.max(rightInset, vw - br.left);
|
||||||
}
|
}
|
||||||
|
if (!isLandscape && br.bottom > vh - 30) {
|
||||||
|
bottomInset = Math.max(bottomInset, vh - br.top);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Landscape: right clears gear/kit buttons (~4rem); bottom is fixed 60px for
|
||||||
|
// the kit-bag handle strip — tray is ignored so the stage has room to breathe.
|
||||||
|
if (isLandscape) {
|
||||||
|
rightInset = Math.max(rightInset, 64); // 4rem
|
||||||
|
bottomInset = 60; // kit-bag handle
|
||||||
|
}
|
||||||
|
|
||||||
overlay.style.paddingRight = rightInset + 'px';
|
overlay.style.paddingRight = rightInset + 'px';
|
||||||
overlay.style.paddingBottom = bottomInset + 'px';
|
overlay.style.paddingBottom = bottomInset + 'px';
|
||||||
|
|
||||||
|
|||||||
@@ -119,8 +119,8 @@
|
|||||||
.room-page,
|
.room-page,
|
||||||
.billboard-page {
|
.billboard-page {
|
||||||
> .gear-btn {
|
> .gear-btn {
|
||||||
right: calc(#{$sidebar-w} + 0.5rem);
|
right: 0.5rem;
|
||||||
bottom: 4.2rem; // same gap above kit btn as portrait; no page-specific overrides needed
|
bottom: 3.95rem; // same gap above kit btn as portrait; no page-specific overrides needed
|
||||||
top: auto;
|
top: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
right: 0.5rem;
|
right: 0.5rem;
|
||||||
|
|
||||||
@media (orientation: landscape) and (max-width: 1440px) {
|
@media (orientation: landscape) and (max-width: 1440px) {
|
||||||
right: calc(4rem + 0.5rem);
|
right: 0.5rem;
|
||||||
bottom: 0.75rem;
|
bottom: 0.5rem;
|
||||||
top: auto;
|
top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1053,11 +1053,17 @@ html:has(.sig-backdrop) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ─── Sig select: landscape overrides ─────────────────────────────────────────
|
// ─── Sig select: landscape overrides ─────────────────────────────────────────
|
||||||
// Wider viewport → 2 rows of 9 cards; modal allowed to fill available width.
|
// Wider viewport → 2 rows of 9 cards; modal fills full available width.
|
||||||
|
// 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.
|
||||||
|
|
||||||
@media (orientation: landscape) {
|
@media (orientation: landscape) {
|
||||||
|
.sig-overlay { padding-left: 4rem; }
|
||||||
.sig-modal { max-width: none; }
|
.sig-modal { max-width: none; }
|
||||||
.sig-deck-grid { grid-template-columns: repeat(9, 1fr); }
|
.sig-deck-grid {
|
||||||
|
grid-template-columns: repeat(9, 1fr);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── Seat tray — see _tray.scss ─────────────────────────────────────────────
|
// ─── Seat tray — see _tray.scss ─────────────────────────────────────────────
|
||||||
|
|||||||
Reference in New Issue
Block a user