Phone contents: an open "On this page" list, shortened to five with "Show all"

Merged
LU
1d ago
+33-12

On a phone, the "On this page" box sat closed under the page title and read only "▸ On this page", so it was unclear what it held or whether it was worth opening. Now it is an open list under a small "On this page" label. A page with more than six sections shows its first five, then a "Show all 26 sections" button. Without JavaScript the whole list shows.

Of the three options compared (below), this is B. It was chosen over A (a closed line saying "On this page: 5 sections") and C (a sideways-scrolling row of section buttons) because the sections are visible without a tap. Its cost is about 200 px before the text on pages that have the box.

  • One partial, layouts/partials/doors/toc_phone.html, now draws the phone contents for both page layouts (doors/reading and widget_page). site.js shortens long lists, and "Show all" moves focus to the sixth section.
  • The visible label is hidden from screen readers. They hear the list's own name, "On this page", as before.
  • Only phones and narrow windows (up to 1000 px) change. The side card on desktop is unchanged.

Based on #1118. Checks: SEO and source rules pass. The design check's page audit (overflow, text under 15 px, contrast, line length) is clean on /awop/, /reversals/ and /about/us/ at 390, 1024 and 1440 px.

AWoP (5 sections), phone: before left, after right

AWoP phone contents: before and after

Reversals (26 sections)

Reversals phone contents: before and after

Reversals after "Show all 26 sections" (before: opened)

Reversals phone contents, all sections: before and after

About us, and the three options compared

About us phone contents: before and after

Options on AWoP: now closed, now opened, A, B, C

Phone contents options on AWoP

Options on Reversals

Phone contents options on Reversals

Created with Claude Opus 5.5 in Claude Code.

🤖 Generated with Claude Code

Summary by cubic

On phones, the "On this page" box is now an open list under a small label instead of a closed box reading "▸ On this page". Lists with more than six sections show the first five with a "Show all N sections" button; without script the whole list shows.

  • Moves phone contents into a single partial, layouts/partials/doors/toc_phone.html, shared by doors/reading and widget_page.
  • The label is hidden from screen readers, which read the title and then the list.
  • Section-page entries are HTML-escaped before the list is built.
  • Only screens up to 1000 px wide are affected; the desktop side card is unchanged.