cbd-web: drop the collapsed pane strip on phones
The strip was the unfocused pane's toolbar and the top of its list with the rest clipped away — and clipped rows still take taps, so a tap aimed at the truncated queue selected a queue entry, and one aimed at the library could hit its "play" and replace the queue. Now that the topbar tabs carry the switch, the strip has nothing left to earn: below 700px only the focused pane is rendered. The pane's inline-end border goes with it, since there is no second column to divide and `:last-child` only spares the queue. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
8e3c210864
commit
43902fc818
|
|
@ -480,26 +480,23 @@ input {
|
||||||
/* ---- phone ------------------------------------------------------------- */
|
/* ---- phone ------------------------------------------------------------- */
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
/* One pane at a time; the topbar tabs switch, as does Tab or a tap on
|
/* One pane at a time, switched by the topbar tabs (or `Tab`). The other
|
||||||
the slim strip the unfocused pane collapses to. */
|
pane is gone rather than collapsed to a strip: a strip is a row of
|
||||||
|
truncated rows and toolbar buttons that still take taps, so aiming at
|
||||||
|
it hit the wrong pane's list or its "play". The tabs replace it. */
|
||||||
.panes {
|
.panes {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
grid-template-rows: 1fr auto;
|
grid-template-rows: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pane {
|
||||||
|
/* No second column to divide, so the border would sit on the screen
|
||||||
|
edge — and `:last-child` only spares the queue. */
|
||||||
|
border-inline-end: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pane:not(.focused) {
|
.pane:not(.focused) {
|
||||||
grid-template-rows: auto;
|
display: none;
|
||||||
max-block-size: 2.4rem;
|
|
||||||
overflow: hidden;
|
|
||||||
border-block-start: 1px solid var(--border);
|
|
||||||
opacity: 0.75;
|
|
||||||
|
|
||||||
/* Only the toolbar survives the collapse, so its buttons are all a
|
|
||||||
tap on the strip can land on — and hitting "play" there replaces
|
|
||||||
the queue when the user meant to switch panes. Leave the title. */
|
|
||||||
& .toolbar button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.transport {
|
.transport {
|
||||||
|
|
|
||||||
|
|
@ -24,8 +24,8 @@ that point in the track. The `/` live filter is TUI-only for now.
|
||||||
A pair of `library` / `queue` tabs in the top bar switches panes and shows
|
A pair of `library` / `queue` tabs in the top bar switches panes and shows
|
||||||
which one the keys go to — the same thing `Tab` does, reachable without a
|
which one the keys go to — the same thing `Tab` does, reachable without a
|
||||||
keyboard. It matters on a phone: below 700px the two panes cannot sit side
|
keyboard. It matters on a phone: below 700px the two panes cannot sit side
|
||||||
by side, so the unfocused one collapses to a title strip (tapping it also
|
by side, so only the focused one is rendered and the tabs are the way
|
||||||
switches) and the tabs are how you get back.
|
between them.
|
||||||
|
|
||||||
The volume slider spans the server's whole accepted range, ending at 110%
|
The volume slider spans the server's whole accepted range, ending at 110%
|
||||||
— the server clamps there, so a slider that went further would have a
|
— the server clamps there, so a slider that went further would have a
|
||||||
|
|
|
||||||
|
|
@ -1620,7 +1620,8 @@ focus. They are shown at every width rather than behind a media query: on
|
||||||
desktop they double as the readout of which pane the keys go to, which the
|
desktop they double as the readout of which pane the keys go to, which the
|
||||||
inset border says only faintly.
|
inset border says only faintly.
|
||||||
|
|
||||||
The collapsed strip is the pane's toolbar with everything but the title
|
The unfocused pane is not rendered at all below that width. It used to
|
||||||
clipped away, so its buttons were the only thing a tap on it could land on —
|
collapse to a strip, which was its toolbar and the top of its list with the
|
||||||
tapping to switch panes could hit the library's "play" and replace the queue.
|
rest clipped — all still taking taps, so aiming at the strip hit the wrong
|
||||||
Those buttons are hidden on the collapsed pane now.
|
pane's list, or the library's "play", which replaces the queue. With the tabs
|
||||||
|
carrying the switch, the strip had nothing left to earn.
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue