yonlu
c518ac8c73
CI / check (push) Skipped
CI / e2e (push) Skipped
The bottom bar's title, artist and "Playing from X" all navigate. In a bar sized for a bar they are a few characters of text, which is not a touch target — and explore-link holds its navigation for one double-click interval and drops it if a second click arrives, a gesture that exists so double-clicking a row can play it and that means nothing on touch. Below the shell's phone breakpoint the three render as plain text. The words are unchanged: the source line still says where the queue came from, because dropping the link is the change and dropping the information would be a different and worse one. The cover art already carries the phone-only button that opens the full-screen Now Playing view, which is where the links live. This is in JS rather than in the stylesheet because what changes is the content, not its appearance — no CSS rule takes a click handler off an element. matchMedia is read in connectedCallback for the reason the reduce-motion query beside it already is, so a test can answer it first. Two smaller things. PHONE_QUERY moves out of track-list.ts into utils/breakpoints.ts: it was a private const when one component needed it, and a second reader is where a copy starts drifting from index.css. And `phone` joins geometryKey(), because crossing the breakpoint swaps a link for a bare string and the marquee travels a distance read from measuring it — the words being identical either side is not the same as the box measuring the same. Closes #61
24 lines
1003 B
TypeScript
24 lines
1003 B
TypeScript
/**
|
|
* The shell's breakpoints, where JavaScript has to agree with CSS.
|
|
*
|
|
* A media query inside a shadow root is answered by the viewport, so a
|
|
* component normally states what it drops at phone width in its own
|
|
* stylesheet and needs nothing from here. This exists for the cases
|
|
* where the decision is not a style: `track-list` computes its grid in
|
|
* JS from the host width, and `now-playing` renders *different content*
|
|
* on a phone — a plain string instead of a link — which no stylesheet
|
|
* can express.
|
|
*
|
|
* One breakpoint, several expressions of it. It was a private const in
|
|
* track-list.ts when there was one; a second reader is where a copy
|
|
* would start drifting from index.css.
|
|
*/
|
|
|
|
/**
|
|
* Phone width. 600px rather than the sidebar's 900px because 900 is a
|
|
* laptop: the answer there is a narrower sidebar, which is still a
|
|
* sidebar. Below this the shell drops the sidebar column entirely and
|
|
* bottom-nav takes over.
|
|
*/
|
|
export const PHONE_QUERY = '(max-width: 599px)';
|