KeelrLeek
9f0601027c
Everything written this session that has not been through the device: rounds 43 to 48 (each patch adversarially verified, 43's transient-notice expectation fixed), a partial round 49, the pipeline scripts, the Android Auto design and the icon comparison mock. Also the two harness changes that were never A/B'd — adaptive waits, which may only shorten a declared wait and never lengthen it, and a ship that runs the mock walk and the deploy at the same time. The A/B and its 255-step baseline are in handoff/tools; main stays at what the phone has actually walked.
92 lines
4.9 KiB
Plaintext
92 lines
4.9 KiB
Plaintext
/* ── the phone turned sideways ────────────────────────────────────────────
|
|
The activity declares no screenOrientation and handles orientation and
|
|
screenSize itself, so a rotation is a RESIZE: no state is lost and the
|
|
layout is the only thing that has to answer. Two queries do it. The player
|
|
sheet is the surface whose portrait shape cannot survive a wide viewport —
|
|
its artwork is a square sized by WIDTH, so at 915x411 the cover came out
|
|
879px tall and the title, the lane, the transport and the face buttons all
|
|
sat below the bottom of a sheet that does not scroll. That is aspect, not
|
|
height, so its rule keys off orientation alone and a tablet gets it too;
|
|
everything under it is a phone-sized query.
|
|
|
|
These rules are appended, and the order is load-bearing: the side-inset
|
|
longhands below have to come after .gbar's padding shorthand, .mini's
|
|
left/right and .toast's left/right to win at equal specificity. */
|
|
|
|
/* the side insets: the cutout and the gesture pill, from the edges */
|
|
.gbar { padding-left: calc(6px + var(--inset-left)); padding-right: calc(8px + var(--inset-right)); }
|
|
.nav { padding-left: var(--inset-left); padding-right: var(--inset-right); }
|
|
.mini { left: calc(8px + var(--inset-left)); right: calc(8px + var(--inset-right)); }
|
|
.screen { padding-left: var(--inset-left); padding-right: var(--inset-right); }
|
|
.np { padding-left: var(--inset-left); padding-right: var(--inset-right); }
|
|
.halfsheet { padding-left: var(--inset-left); padding-right: var(--inset-right); }
|
|
.syncroom { padding-left: var(--inset-left); padding-right: var(--inset-right); }
|
|
.toast { left: calc(12px + var(--inset-left)); right: calc(12px + var(--inset-right)); }
|
|
|
|
/* ── the player sheet, beside itself ─────────────────────────────────── */
|
|
@media (orientation: landscape) {
|
|
.np {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
|
|
grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
|
|
grid-template-areas:
|
|
"head head"
|
|
"left slack"
|
|
"left meta"
|
|
"left scrub"
|
|
"left trans"
|
|
"left foot";
|
|
column-gap: 6px;
|
|
/* insurance for a viewport shorter than the controls themselves —
|
|
the keyboard up on a small phone — where the sheet would clip */
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
.np-head { grid-area: head; }
|
|
.np-art { grid-area: left; padding: 10px 4px 10px var(--pad); }
|
|
/* the square is sized by whichever is smaller, the column or the height */
|
|
.np-frame { width: min(100%, calc(100vh - var(--inset-top) - var(--inset-bottom) - 92px)); }
|
|
.np-spacer { grid-area: slack; padding: 10px var(--pad) 0; justify-content: center; }
|
|
.np-face { grid-area: left; }
|
|
.np-meta { grid-area: meta; padding-top: 2px; }
|
|
.np-scrub { grid-area: scrub; padding-top: 8px; }
|
|
.np-transport { grid-area: trans; padding-top: 10px; justify-self: center; width: min(100%, 430px); }
|
|
.np-foot { grid-area: foot; padding-top: 8px; }
|
|
/* a face is up: it takes the artwork's column and the thumbnail goes —
|
|
the record is already the ground behind the whole sheet */
|
|
.np.small { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); }
|
|
.np.small .np-art { display: none; }
|
|
}
|
|
|
|
/* ── a phone turned sideways: 411 pixels of height to spend ───────────── */
|
|
@media (orientation: landscape) and (max-height: 560px) {
|
|
/* the nav comes down to Android's own 48dp minimum and the mini bar to a
|
|
60dp row over the same lane strip: 22 pixels back, 46% of the height as
|
|
chrome down to 40% */
|
|
:root { --nav-h: 48px; --mini-h: 60px; }
|
|
.nav button .gl { height: 22px; }
|
|
.nav button .lb { font-size: 9.5px; }
|
|
.nav button .pill { top: 3px; height: 24px; }
|
|
.mini { padding-bottom: 24px; }
|
|
.mini .art { width: 34px; height: 34px; }
|
|
.mini .mini-lane { bottom: 5px; }
|
|
|
|
/* the hero stops being a portrait and becomes the banner the desktop's
|
|
hero has always been */
|
|
.hero { height: 190px; }
|
|
.hero-name { font-size: 27px; }
|
|
.hero-logo { max-height: 64px; }
|
|
|
|
/* the record head puts the cover beside the title, again the desktop's
|
|
own shape; .pl needs naming because its own rule is more specific */
|
|
.rec-head { flex-direction: row; align-items: center; gap: 22px; padding: calc(var(--bar-h) + 12px) var(--pad) 4px; }
|
|
.rec-head .rec-cover, .rec-head.pl .rec-cover { width: 34%; max-width: 240px; }
|
|
.rec-meta { text-align: left; }
|
|
.rec-title { margin-top: 0; }
|
|
.rec-chips { justify-content: flex-start; }
|
|
.rec-acts { justify-content: flex-start; padding: 14px 0 4px; }
|
|
|
|
/* 76% of 411 is 312; a half sheet may take all but a strip */
|
|
.halfsheet { max-height: calc(100% - 36px); }
|
|
}
|