From 72fefe2fc72edea002868ae29afcadb80ad6d0e8 Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Sat, 9 May 2026 00:35:26 -0400 Subject: [PATCH] =?UTF-8?q?landscape=20footer=20rearrange:=20#id=5Fbud=5Fb?= =?UTF-8?q?tn=20moves=20to=20top=20of=20right=20sidebar=20(upper-right=20c?= =?UTF-8?q?orner=20of=20footer);=20=C2=A92026=20Dis=20Co.=20text=20becomes?= =?UTF-8?q?=20a=20single-line=20vertical=20strip=20at=20the=20very=20right?= =?UTF-8?q?=20edge=20of=20the=20viewport=20(mirror=20of=20portrait's=20"af?= =?UTF-8?q?ter=20the=20icons"=20position);=20bud-panel=20+=20bud-suggestio?= =?UTF-8?q?ns=20follow=20the=20bud-btn=20to=20the=20top=20w.=20transform-o?= =?UTF-8?q?rigin:=20right=20center?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - _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;
{ 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 Git commit message Co-Authored-By: Claude Opus 4.7 (1M context) --- src/static_src/scss/_base.scss | 21 ++++++++++++++++----- src/static_src/scss/_bud.scss | 32 +++++++++++++++++++++----------- 2 files changed, 37 insertions(+), 16 deletions(-) diff --git a/src/static_src/scss/_base.scss b/src/static_src/scss/_base.scss index 7503529..256c9fd 100644 --- a/src/static_src/scss/_base.scss +++ b/src/static_src/scss/_base.scss @@ -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; diff --git a/src/static_src/scss/_bud.scss b/src/static_src/scss/_bud.scss index 9941e77..929dcc9 100644 --- a/src/static_src/scss/_bud.scss +++ b/src/static_src/scss/_bud.scss @@ -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); }