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

74
src/static_src/scss/_tray.scss
View File

@@ -329,76 +329,4 @@ $handle-r: 1rem;
}
}
// ── XL landscape (≥1800px): portrait-style tray — slides in from right ─────
// Overrides all landscape rules above. JS also returns false from _isLandscape()
// at this width so portrait code paths run throughout.
@media (orientation: landscape) and (min-width: 1800px) {
#id_tray_wrap {
flex-direction: row;
top: 0;
bottom: 0;
left: auto; // JS controls left; width set to innerWidth so wrap fills viewport
right: auto;
height: auto;
width: auto;
z-index: 95; // below footer/nav sidebars (z-100) — opaque footer masks the tray
transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
&.wobble { animation: tray-wobble 0.45s ease; }
&.snap { animation: tray-snap 0.30s ease; }
}
#id_tray_handle {
width: $handle-exposed; // 48px portrait strip
height: auto;
}
#id_tray_grip {
top: 50%;
bottom: auto;
left: calc(#{$handle-exposed} / 2 - 0.125rem);
transform: translateY(-50%);
width: $handle-rect-w; // 10000px extends leftward
height: $handle-rect-h; // 72px
}
#id_tray {
border-left: 2.5rem solid rgba(var(--quaUser), 1);
border-top: 2.5rem solid rgba(var(--quaUser), 1);
border-bottom: 2.5rem solid rgba(var(--quaUser), 1);
border-right: none;
margin-left: 0.5rem;
margin-bottom: 0;
width: auto;
max-width: none;
align-self: auto;
flex: 1;
height: auto;
overflow: hidden;
box-shadow:
-0.25rem 0 0.5rem rgba(0, 0, 0, 0.55),
inset 0 0 0 0.3rem rgba(var(--quiUser), 0.45),
inset 0.6rem 0 1.5rem -0.5rem rgba(0, 0, 0, 1),
inset 0.6rem 0 1.5rem -0.5rem rgba(var(--quiUser), 0.5),
inset 0 0.6rem 1.5rem -0.5rem rgba(0, 0, 0, 1),
inset 0 0.6rem 1.5rem -0.5rem rgba(var(--quiUser), 0.5),
inset 0 -0.6rem 1.5rem -0.5rem rgba(0, 0, 0, 1),
inset 0 -0.6rem 1.5rem -0.5rem rgba(var(--quiUser), 0.5)
;
}
#id_tray_grid {
grid-template-columns: none;
grid-template-rows: repeat(8, var(--tray-cell-size, 48px));
grid-auto-flow: column;
grid-auto-columns: var(--tray-cell-size, 48px);
grid-auto-rows: auto;
position: static;
}
.tray-cell {
border-top: none;
border-right: 2px dotted rgba(var(--priUser), 0.35);
border-bottom: 2px dotted rgba(var(--priUser), 0.35);
}
}
// ≥1800px uses the same landscape tray rules as narrower landscape — no override block needed.