A bookmark tab to the rest of the site

What was wrong

A reader who came to the axis from a search or a link saw neither the site’s name nor a way to the front page. The only “Home” link stood in the row under the band. The lines, the graph, the methodology and the log could not be opened from the axis at all: first the front page, then its footer (issue #34). The bar at the top had no room: at 412px its words no longer fit. The row under the band may not grow: at 320×640 the band would lose its share of the screen.

What the 6-in-1 chose

Of the three options in the issue, the 6-in-1 chose a fourth: a bookmark tab standing out of the left edge under the range, which slides out to the right as a panel of the site’s sections. It takes no row. The bookmark tab lies over the band, in the axis’s grid but out of its flow, so no row’s height is worked out again.

How much room there really is

By the 6-in-1’s screenshots, about 80px were free on a desktop and about 40px on a phone. The issue said to work it out from the offsets in the code rather than from the screenshots’ pixels, and rightly. The horizontal axis does begin 56px from the edge, and the bookmark tab has room there. But on the vertical axis the decade labels stand 20px from the edge: 40 pixels of a screenshot at double density. On a phone the band scrolls, and the labels would have passed under the bookmark tab.

So the bookmark tab has the least width the issue allowed, 24px, and it is 44px tall, for a finger. On the vertical axis the labels stepped aside by 10px, to 30px, and a decade’s count moved with them. At 320px that spent the last of the row. In Verdana, the CI runner’s font, the count already ended on the pixel where the newest decade’s mark begins. So on screens narrower than 360px a decade’s count drops its “↗” arrow. It is drawing only, and a day’s count already does the same. In Verdana there are now 8px between the count and the mark.

In the list view the cards and the decade headings start past the bookmark tab too. When the search is open on a narrow screen its panel covers the bookmark tab, so the bookmark tab hides while it is.

How it behaves

It is a button that says whether it is open, and a panel of plain links, not a menu. A click, a tap, Enter and Space open and close it. A mouse that rests on the bookmark tab opens it after a moment. The panel stays open while the pointer goes from the bookmark tab into it. Esc closes the panel and gives the focus back to the bookmark tab. A click elsewhere and Tab past its end close it as well. A reader who asked for less motion sees the panel at once, without the slide.

Esc is caught on the bookmark tab and the panel alone, not on the page. On the axis bare keys are commands, and in the search field they must stand down. The search field is out of this handler’s reach, and an Esc in the panel goes no further, so it does not also close the search or the tour. There is no new shortcut. A record’s card is a modal dialog: the browser draws it over everything and makes the rest of the page inert, so the bookmark tab cannot show through it.

One list

The sections now live in one module, src/ui/site-sections.ts: the dictionary key, the path and where to show it. The front page’s footer and the bookmark tab on the axis both read it. The comments on why each item is there moved in from the front page. The dictionary check works out the keys from the code and its types, so the list is declared as a constant: each key’s type is its own text.

What was checked

npm run verify:code passed. The axis spec passed in full in Chromium, with the new test. It opens the axis at 320×640 and 1280×800 and checks that the bookmark tab stands under the bar, at the edge, no smaller than 24×44. No mark, label, count or list of terms lies left of its right edge. A click opens six links, and the test takes their addresses from the same module rather than writing its own. Then it goes through Enter, Tab, Esc with the focus handed back, Space and a click elsewhere. On a wide screen it also checks hovering, the move into the panel, and Esc with the search open, after which the search stays. The band’s height did not change. The full browser run is CI’s, after the push.