feat(shell): take the top bar out of the phone's layout
The row is deleted from the grid template below 600px, not the header hidden. That is 3.25em of a 439 CSS px viewport -- the single biggest vertical win the reference device has to give, and the reason the issue asks for the row rather than for a smaller bar. Each of the five things the bar held has somewhere else to be there: nav-history is the platform's own back gesture and was already gone from 899 down, the job indicator is <job-band> (#62, which is what this was blocked on), the search box is a modal opened from the view's own header, the library filter is Settings -> Libraries, and the wordmark stays where it is. Three things are load-bearing. **The header is visually hidden rather than display: none**, because that h1 is the document's top-level heading and several pages have no other one -- page-header renders no h1 when its heading is empty, and Settings has no page-header at all. Its four controls are display: none *inside* it, which is what keeps them out of the tab order: a visually-hidden container is still focusable, and tabbing into a search box nobody can see is worse than not having one. **The fit pass stands down**, from the bar's computed position rather than from a width. With the bar out of flow there is no content box to measure children against, and a pass that ran would collapse the wordmark on every resize and report success about a 1px box. **top-bar-fit.spec.ts keeps 390 and asserts the stronger property.** "Nothing hangs out of the bar" is trivially true of a bar with no row and would pass on a build that merely broke it, so what that width asks now is that the content starts where the row above it ends. Measuring against the window instead would have been asserting "and no background job is running", which that spec is not about and cannot arrange. Closes #57
This commit is contained in:
@@ -119,6 +119,16 @@ export const FIT_STEPS: readonly FitStep[] = [
|
||||
* @returns the ids collapsed, in the order they were given up.
|
||||
*/
|
||||
export function measureTopBarFit(bar: HTMLElement): string[] {
|
||||
// Below 600px there is no bar to fit (#57): `index.css` takes it
|
||||
// out of the grid and leaves it visually hidden at 1px, carrying
|
||||
// nothing but the document's `h1`. Measuring that reports the
|
||||
// wordmark as overflowing 1px of content box and collapses it every
|
||||
// time -- true, and about nothing, since the whole bar is already
|
||||
// invisible. Asking the *computed position* rather than the
|
||||
// viewport width is what keeps this file free of a breakpoint the
|
||||
// stylesheet already owns.
|
||||
if (getComputedStyle(bar).position === 'absolute') return [];
|
||||
|
||||
const fits = () => {
|
||||
const style = getComputedStyle(bar);
|
||||
const box = bar.getBoundingClientRect();
|
||||
|
||||
Reference in New Issue
Block a user