fix(07-02): landscape cockpit geometry refinement — the content fits the 72px banner floor
- banner takes one step down the SAME type-token scale in landscape (headline-md distance / label-lg street) + xs vertical padding so the measures fit the 72px min-height instead of overflowing it - guide-list chrome offset corrected to its own margin stack (sm + 72 + 1 + 24 + sm = 113px, was 104px) - bottom register: the portrait 64px control-clearance composite already seats the guidance/confirm card inside the landscape height — the landscape override is removed (measured card top 159 vs banner bottom 103 at 844x390); attribution chip + recenter control clear - device-walk feedback on 07-02's committed geometry; tokens binding - captures re-run: CAPTURE OK — 22/22 non-blank
|
Before Width: | Height: | Size: 366 KiB After Width: | Height: | Size: 366 KiB |
|
Before Width: | Height: | Size: 675 KiB After Width: | Height: | Size: 675 KiB |
|
Before Width: | Height: | Size: 675 KiB After Width: | Height: | Size: 676 KiB |
|
Before Width: | Height: | Size: 382 KiB After Width: | Height: | Size: 382 KiB |
|
Before Width: | Height: | Size: 675 KiB After Width: | Height: | Size: 675 KiB |
|
Before Width: | Height: | Size: 808 KiB After Width: | Height: | Size: 808 KiB |
@@ -147,7 +147,7 @@ main { position: fixed; inset: 0; }
|
|||||||
rounded corners (buttons are radius-reset in the theme base layer).
|
rounded corners (buttons are radius-reset in the theme base layer).
|
||||||
Sanctioned list extended by Phase 7 (07-02/PX-04/D-03) — the landscape
|
Sanctioned list extended by Phase 7 (07-02/PX-04/D-03) — the landscape
|
||||||
literals: landscape banner min-height 72px, plate 40px + glyph 28px,
|
literals: landscape banner min-height 72px, plate 40px + glyph 28px,
|
||||||
landscape chrome offset 104px. ————— */
|
landscape chrome offset 113px. ————— */
|
||||||
|
|
||||||
/* the banner band: full-bleed matte-black chassis under the safe inset; the
|
/* the banner band: full-bleed matte-black chassis under the safe inset; the
|
||||||
whole banner is the list toggle (the 96px band is the >=44px hit target) */
|
whole banner is the list toggle (the 96px band is the >=44px hit target) */
|
||||||
@@ -217,15 +217,21 @@ main { position: fixed; inset: 0; }
|
|||||||
a sanctioned geometry literal; the map's cartography is untouched. */
|
a sanctioned geometry literal; the map's cartography is untouched. */
|
||||||
|
|
||||||
@media (orientation: landscape) and (max-height: 560px) {
|
@media (orientation: landscape) and (max-height: 560px) {
|
||||||
/* the banner band: shorter in landscape, and the horizontal safe insets
|
/* the banner band: shorter in landscape — the content must actually FIT
|
||||||
are honoured on both edges (max() with the token padding as the floor) */
|
the 72px floor (the strip's top literal rides on it), so the measures
|
||||||
|
take one step down the SAME type-token scale and the vertical padding
|
||||||
|
drops to xs; the horizontal safe insets are honoured on both edges
|
||||||
|
(max() with the token padding as the floor) */
|
||||||
.guide-banner {
|
.guide-banner {
|
||||||
min-height: 72px;
|
min-height: 72px;
|
||||||
|
padding-top: var(--spacing-space-xs); padding-bottom: var(--spacing-space-xs);
|
||||||
padding-left: max(var(--spacing-space-md), var(--safe-left, 0px));
|
padding-left: max(var(--spacing-space-md), var(--safe-left, 0px));
|
||||||
padding-right: max(var(--spacing-space-md), var(--safe-right, 0px));
|
padding-right: max(var(--spacing-space-md), var(--safe-right, 0px));
|
||||||
}
|
}
|
||||||
.guide-banner .guide-plate { width: 40px; height: 40px; }
|
.guide-banner .guide-plate { width: 40px; height: 40px; }
|
||||||
.guide-banner .guide-plate svg { width: 28px; height: 28px; }
|
.guide-banner .guide-plate svg { width: 28px; height: 28px; }
|
||||||
|
.guide-banner .guide-distance { font: var(--type-headline-md); letter-spacing: var(--type-headline-md-tracking); }
|
||||||
|
.guide-banner .guide-street { font: var(--type-label-lg); letter-spacing: var(--type-label-lg-tracking); }
|
||||||
|
|
||||||
/* the compact strip rides directly under the shorter banner */
|
/* the compact strip rides directly under the shorter banner */
|
||||||
[data-guidance="active"] .strip {
|
[data-guidance="active"] .strip {
|
||||||
@@ -233,16 +239,17 @@ main { position: fixed; inset: 0; }
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* the maneuver list: a landscape-height-bounded panel that clears the
|
/* the maneuver list: a landscape-height-bounded panel that clears the
|
||||||
banner and the strip instead of overlapping them */
|
banner and the strip instead of overlapping them (the chrome offset is
|
||||||
|
the list margin's own stack: sm + 72 + 1 + 24 + sm = 113) */
|
||||||
.guide-list {
|
.guide-list {
|
||||||
max-height: calc(100dvh - 104px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
|
max-height: calc(100dvh - 113px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
|
||||||
margin-top: calc(var(--safe-top, 0px) + var(--spacing-space-sm) + 72px + 1px + 24px + var(--spacing-space-sm));
|
margin-top: calc(var(--safe-top, 0px) + var(--spacing-space-sm) + 72px + 1px + 24px + var(--spacing-space-sm));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* the bottom register (the guidance card / the confirm card) sits inside
|
/* the bottom register: the portrait rule's 64px control-clearance
|
||||||
the landscape height instead of overflowing past it */
|
composite already seats the guidance/confirm card inside the landscape
|
||||||
.route-stack[data-register="bottom"] {
|
height (measured: card top 159 vs banner bottom 103 at 844x390) and
|
||||||
bottom: calc(var(--safe-bottom, 0px) + var(--spacing-space-sm));
|
clears MapLibre's attribution chip + the recenter control — no
|
||||||
}
|
landscape override; the card keeps its >=44px hit-target clearance */
|
||||||
.route-stack[data-register="center"] { max-width: 320px; }
|
.route-stack[data-register="center"] { max-width: 320px; }
|
||||||
}
|
}
|
||||||
|
|||||||