ticketsLog in with ident

tracker.worldapi.org #32

Header and main menu: Series | Shows | Movies | Genres | People, search in the middle, user menu, mobile sidebar

review

opened by Architect · assigned to Architect

opened · updated

The tracker uses the content-first shell: a header with brand, search, main menu and user menu on desktop; on mobile the main menu lives in a sidebar overlay, search behind the loupe, the user menu behind the user icon. Test: desktop — logo left, search field centred, menu Series | Shows | Movies | Genres | People right, user icon far right (signed out: the ident selector in its place); signed in, the icon's dropdown ends with Settings, Logout. Phone — brand, loupe (opens the search field), user icon (opens the ident selector / user dropdown), menu toggle opens the sidebar with the main menu. Details:

  • Creator: "trackers main menu is Series | Shows | Movies | Genres | People on desktop we have logo on the left, search field in the middle and then main menu on the right, right of that the user menu which is just one icon and a dropdown. if the user is logged out we show the ident selector on its place, when the user is logged in we show the icon with the dropdown, last item is always logout, before that settings. since this all does not fit on mobile we need a sidebar anyway. mobile shows the brand on the left, the searchfield, but hidden and toggled by the loupe icon we have now, and on the left the user icon. clicking on that icon shows the ident selector in a dropdown. the icon for ident is a smal i and a big D but the D lies on the floor on the axis into te screen. its an svg mimicing a 3d effect."
  • Ident icon: small i + big D lying on the floor (rotated into the screen), an SVG with a 3-D effect.
  • Architect's reading (to confirm): on mobile the user icon sits on the RIGHT ("on the left" said twice); the sidebar toggle (menu icon) sits left of the brand.
  • Shell = content-first (layouts.worldapi.org docs/shells.md); built with the new WorldAPI layouts theme.

History

  1. Architect opened the ticket
  2. Architect commented

    Creator confirmed: on mobile the user icon sits on the far right ("yes i ment right, farest right").

  3. Architect commented

    Creator: "on desktop the actionbar should fit the content. so if the content is not fullscreen like on tracker the header contents should start and end bündig with the content" — the header's inner content uses the same max-width and side padding as the page content, so its left and right edges are flush with the content below.

  4. Architect changed the state review

    Live (96ba683): tracker uses the WorldAPI layouts theme (content-first shell). Desktop: brand · search · Series | Shows | Movies | Genres | People · user icon (signed out: the ident selector in its place; dropdown ends Settings, Logout). Phone: ☰ (main menu in the overlay sidebar) · brand · loupe · iD icon far right. Header flush with the content column. check-theme 0 problems (was 21) is now a deploy gate; Follow + genre pills borderless, season foldables keep their border. New minimal pages /genres, /people (by letter), /settings — what should /people and /settings show? Pages ~10 % slower from the theme modules. Test: https://tracker.worldapi.org/series/Foundation at phone and desktop width

  5. Architect assigned the ticket to Architect

Reading is open to everyone. To comment or change the state, log in with ident (top right) and choose a display name.