logan
4f628b1f52
The rest of #186's second table, and one thing it could not have said. .section-toggle 187x15 autotag .folders-menu-trigger 32x18 autotag .back-button 32x32 artist-details Requests / Downloads tabs 85x34, 96x34 .search-mode-tab 89x26, 79x26 explore explore search input 325x18 in a 36px box **back-button was six controls, not one.** The issue names it in artist-details because that is the view the sweep opened; the same declaration is byte-identical in artist-details, genre-details, playlist-details, smart-playlist-details, explore-artist-details and explore-album-details, 32px in all six. So it is styles/back-button. css.ts now, adopted by each, and a source sweep fails on a seventh copy -- because the failure this invites is not a size changing, it is somebody adding a detail view and writing `.back-button` out again, which no device sweep would catch for the same reason this one did not. That is icon-language.test.ts's shape, and the argument for it here is the inverse of the column arrows': one declaration covering 36 controls is cheap to fix, and six declarations of one control are six chances to miss five. It is a real 44px box rather than padding with the width handed back: a detail header runs no fit pass, and this button has a visible background, so a hit area larger than the circle would be a control bigger than it looks. The size is #55's, reached there for the same reason -- "the way out is 44px on a phone". **The explore search box was two faults.** The row was 36px *and* the input inside it was 18, so eight pixels at each edge were not a target at all: a tap near the top of the box landed on the container and did nothing. The container is 44 and the input stretches to it. **The Downloads tabs take padding rather than a min-size**, because the mark for the selected tab is its bottom border -- a min-size centres the label and leaves the underline 10px beneath it. page-action-check-now (113x29) is in that table and is not here: it is a PageAction, so #195 raised it with the rest of the header's actions and touch-targets.test.ts already covers it. **The Downloads tabs needed a min-size as well as the padding, and CI is what said so.** Padding alone made them 44px on this machine and **43px in the container**: the total is 13 + 13 + 2 + whatever line box the font gives 13px text, and ubuntu:24.04's is a pixel shorter than Arch's. A height computed from a font's line box is not a height you control -- which is #195's "stated as a property on the strength of one engine" one layer down, in the same PR that recorded it. The padding stays, because it is what keeps the underline against the label; the min-size is the floor. Caught by the new test rather than by a person, which is the half of this that worked. Verified on the device, sweeping each view the way the issue was filed: explore, downloads, autotag and artist-details now report **one** control under the floor apiece, and it is the skip link, which #186 already ruled out as keyboard-only. .search-mode-tab 89x44 and 79x44, the search input 325x44, the Downloads tabs 85x44 and 96x44, .section-toggle 174x44, .folders-menu-trigger 44x44, .back-button 44x44. All 12 new tests fail on main, the source sweep naming all six copies. make ui-test 1041 pass; make e2e 236 pass on chromium, which is half an answer -- CI had the other half, and used it. Closes #186
55 lines
2.2 KiB
TypeScript
55 lines
2.2 KiB
TypeScript
import { css } from 'lit';
|
|
|
|
/**
|
|
* The way out of a detail view, at the app's 44px touch floor.
|
|
*
|
|
* #186's second table names `artist-details`' back button at
|
|
* **32x32**. It is the same declaration in **six** components —
|
|
* `artist-details`, `genre-details`, `playlist-details`,
|
|
* `smart-playlist-details`, `explore-artist-details` and
|
|
* `explore-album-details` — byte-identical, 32px in all six, and the
|
|
* sweep that filed the issue visited one of them.
|
|
*
|
|
* That is the argument for this file rather than six edits. A device
|
|
* sweep walks the views somebody thought to open, so six copies of a
|
|
* control is six chances for the next pass to miss five; the arrows
|
|
* and the toggles were each one declaration covering 36 and 29
|
|
* controls, and this is the same shape stated the other way round.
|
|
*
|
|
* **It is a real 44px box, not padding with the width handed back.**
|
|
* The header pass had to grow a hit area past its own layout box
|
|
* because `page-header` measures itself for #69's overflow fit; a
|
|
* detail view's header does not, so the control can simply be the
|
|
* target. It also *should* be — this button has a visible background,
|
|
* so a hit area larger than the circle would be a control that is
|
|
* bigger than it looks, which is the thing #187 accepts only where a
|
|
* thin painted track is the point.
|
|
*
|
|
* The size is #55's, arrived at for the same reason one component
|
|
* over: "the way out is 44px on a phone", when the queue panel's close
|
|
* button was 25x21 and, at phone width, the only pointer route off a
|
|
* full-screen surface. A detail view has the platform's back gesture
|
|
* as well, so this is less severe than the queue was — it is the same
|
|
* control wearing the same mistake.
|
|
*/
|
|
export const backButton = css`
|
|
.back-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44px;
|
|
height: 44px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.06));
|
|
color: var(--yj-text-primary, #fff);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background: var(--yj-bg-hover, rgba(255, 255, 255, 0.12));
|
|
}
|
|
`;
|