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

landscape footer rearrange: #id_bud_btn moves to top of right sidebar (upper-right corner of footer); ©2026 Dis Co. text becomes a single-line vertical strip at the very right edge of the viewport (mirror of portrait's "after the icons" position); bud-panel + bud-suggestions follow the bud-btn to the top w. transform-origin: right center

Browse Source 
- _bud.scss #id_bud_btn landscape: left: auto + right: calc((var(--sidebar-w) - 3rem) / 2) + top: 0.5rem + bottom: auto. Centred horizontally in the right sidebar; tucked at the top.
  - _bud.scss #id_bud_panel landscape: top: 0.5rem; bottom: auto; transform-origin: right center. Slides leftward from the bud-btn along the top edge of the viewport (instead of bottom).
  - _bud.scss .bud-suggestions landscape: top: 4rem; bottom: auto; box-shadow flipped from upward to downward — autocomplete dropdown now opens BELOW the panel (since panel is at top).
  - _base.scss .footer-container landscape: writing-mode: vertical-rl + transform: rotate(180deg) for a bottom-to-top single-line read; right: 0.125rem (tight against the viewport edge); bottom: 0.5rem; line-height: 1; <br> { display: none } collapses the two-line "©2026 / Dis Co." into one line "©2026 Dis Co.". Tucks into the empty 0.875rem gutter between the viewport edge and the centred icon column — no overlap w. kit-btn / gear-btn at the bottom.
  - 21 bud FTs green (portrait position contract intact: bottom-left, the landscape move is orientation-scoped).

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-09 00:35:26 -04:00
parent 47871b5b4a
commit 72fefe2fc7
2 changed files with 37 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -412,14 +412,24 @@ body {
}
}
// ©2026 Dis Co. — single-line vertical strip at the right edge of
// the right sidebar (= the very right edge of the viewport in
// landscape). Reads bottom-to-top via writing-mode: vertical-rl +
// rotate(180deg) — same pattern as the navbar's rotated brand
// wordmark. Tucks into the empty 0.875rem gutter between the
// viewport edge and the centred icon/btn column, no overlap.
.footer-container {
position: absolute;
top: 0.25rem;
text-align: center;
line-height: 0.75 !important;
right: 0.125rem;
bottom: 0.5rem;
top: auto;
line-height: 1 !important;
color: rgba(var(--secUser), 1);
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
br { display: block; }
br { display: none; }
small {
font-size: 0.75rem !important;
@@ -447,7 +457,8 @@ body {
.footer-container {
line-height: 1;
margin-top: 0.5rem;
// margin-top vestige of the absolute-top-anchored layout —
// dropped now that the rotated text is bottom-anchored.
small {
font-size: 1rem;

32
src/static_src/scss/_bud.scss
View File

@@ -12,14 +12,15 @@
bottom: 0.5rem;
left: 0.5rem;
// In landscape, centre the btn within the navbar sidebar — the sidebar
// is `var(--sidebar-w)` wide and the btn is 3rem, so left = (sidebar-w
// − 3rem) / 2. The clamp on the root font-size means that calc resolves
// to a sane value across viewport sizes; no per-breakpoint override.
// In landscape, the bud-btn moves to the UPPER-RIGHT corner of the
// footer sidebar (top of the right sidebar). Centred within the
// var(--sidebar-w) column. Mirrors kit-btn / gear-btn (bottom-right)
// for the horizontal-centre formula, but anchors at top instead.
@media (orientation: landscape) {
left: calc((var(--sidebar-w) - 3rem) / 2);
bottom: 0.5rem;
top: auto;
left: auto;
right: calc((var(--sidebar-w) - 3rem) / 2);
top: 0.5rem;
bottom: auto;
}
z-index: 318;
@@ -63,10 +64,15 @@
opacity: 0;
@media (orientation: landscape) {
// Clear both fixed sidebars; --sidebar-w scales fluidly via the
// root rem clamp, so this is the only landscape rule needed.
// Bud-btn lives at the top of the right sidebar in landscape, so
// the panel slides out leftward from the right edge along the top.
// Clear both fixed sidebars; transform-origin flips to right so
// the closed state collapses into the bud-btn.
top: 0.5rem;
bottom: auto;
left: calc(var(--sidebar-w) + 0.5rem);
right: calc(var(--sidebar-w) + 0.5rem);
transform-origin: right center;
}
#id_recipient {
@@ -119,8 +125,8 @@ html:has(#id_kit_bag_dialog[open]) #id_bud_btn {
// ── Bud autocomplete suggestions (mirror of sky-place birth picker) ──
// Sibling of #id_bud_panel (which has overflow:hidden for the scaleX
// slide animation, so the suggestions can't be a child or they'd clip).
// Position-fixed above the panel; same left/right inset as the panel
// at each breakpoint so the dropdown lines up.
// Position-fixed; portrait sits ABOVE the panel (panel at bottom),
// landscape sits BELOW the panel (panel at top of viewport).
.bud-suggestions {
position: fixed;
bottom: 4rem; // panel bottom (0.5rem) + height (3rem) + gap (0.5rem)
@@ -135,6 +141,10 @@ html:has(#id_kit_bag_dialog[open]) #id_bud_btn {
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
@media (orientation: landscape) {
// Panel now at top in landscape, so suggestions drop downward.
top: 4rem;
bottom: auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
left: calc(var(--sidebar-w) + 0.5rem);
right: calc(var(--sidebar-w) + 0.5rem);
}