Your career is seven sections deep with no way to reach the sixth #175

Closed
opened 2026-09-12 07:35:00 +00:00 by tiagoagueda · 1 comment
Owner

resume/overview.html stacks every section of somebody's career down one page, in
OVERVIEW_ORDER:

experience, education, project, link, skill-group, certification, language

Seven headings, and each holds a list with no ceiling on it. Somebody with a dozen roles, a
few degrees, twenty skills across three groups and a handful of links is scrolling past
hundreds of rows to reach Languages, every time, and has nothing on the page telling them
the section is even down there. The only way to find out what this page holds is to reach
the bottom of it.

Give it a left-hand nav listing the sections, so the page can be navigated rather than
traversed.

There is already a pattern for this, and it is two files away

settings/ solves exactly this problem: core/settings_sections.py declares the sections
and templates/settings/sidebar.html draws them. That template is fourteen lines and
already handles the thing worth getting right:

<ul class="flex gap-1 scroll-x lg:flex-col">

A horizontal strip that scrolls on a narrow screen, a vertical column from lg up. It
marks the current entry with both a class and aria-current="page", and wraps the lot in a
<nav aria-label=...>. Reuse it rather than writing a second one — and if it needs
generalising to take a list of anchors as well as a list of URLs, generalise it, so the two
pages cannot drift apart.

Worth settling while doing it

  • Anchors or pages. The settings sidebar navigates between pages; these seven
    sections are all on one. An in-page anchor list is the smaller change and keeps
    "everything in one place", which is what the page's own blurb promises. Splitting into
    seven pages is a bigger question and probably a different issue.
  • Say how many. "Experience (12)" beside each entry answers most of why somebody was
    scrolling in the first place, and an empty section saying "0" is a prompt to fill it.
  • Keep the empty ones. A section with nothing in it still belongs in the list — it is
    how somebody discovers Postulo can hold their languages at all.
  • scroll-x on a phone. Seven labels do not fit on 390px, and #73 is where that gets
    its proper attention; matching what settings already does is the least this can do in the
    meantime.
  • The current entry needs aria-current="page" and a focus order that does not trap, same
    as the settings one. An anchor list that a keyboard cannot use is a list for half the
    people who need it most.
`resume/overview.html` stacks every section of somebody's career down one page, in `OVERVIEW_ORDER`: experience, education, project, link, skill-group, certification, language Seven headings, and each holds a list with no ceiling on it. Somebody with a dozen roles, a few degrees, twenty skills across three groups and a handful of links is scrolling past hundreds of rows to reach *Languages*, every time, and has nothing on the page telling them the section is even down there. The only way to find out what this page holds is to reach the bottom of it. Give it a left-hand nav listing the sections, so the page can be navigated rather than traversed. ### There is already a pattern for this, and it is two files away `settings/` solves exactly this problem: `core/settings_sections.py` declares the sections and `templates/settings/sidebar.html` draws them. That template is fourteen lines and already handles the thing worth getting right: <ul class="flex gap-1 scroll-x lg:flex-col"> A horizontal strip that scrolls on a narrow screen, a vertical column from `lg` up. It marks the current entry with both a class and `aria-current="page"`, and wraps the lot in a `<nav aria-label=...>`. Reuse it rather than writing a second one — and if it needs generalising to take a list of anchors as well as a list of URLs, generalise it, so the two pages cannot drift apart. ### Worth settling while doing it - **Anchors or pages.** The settings sidebar navigates between *pages*; these seven sections are all on one. An in-page anchor list is the smaller change and keeps "everything in one place", which is what the page's own blurb promises. Splitting into seven pages is a bigger question and probably a different issue. - **Say how many.** "Experience (12)" beside each entry answers most of why somebody was scrolling in the first place, and an empty section saying "0" is a prompt to fill it. - **Keep the empty ones.** A section with nothing in it still belongs in the list — it is how somebody discovers Postulo can hold their languages at all. - **`scroll-x` on a phone.** Seven labels do not fit on 390px, and #73 is where that gets its proper attention; matching what settings already does is the least this can do in the meantime. - The current entry needs `aria-current="page"` and a focus order that does not trap, same as the settings one. An anchor list that a keyboard cannot use is a list for half the people who need it most.
Author
Owner

Landed on main as 4e52c8d48, the way this issue suggested: the Settings sidebar,
generalised rather than copied. settings/sidebar.html is partials/sidebar.html now and
takes entries -- an href, a label, and optionally an icon, a count, an anchor and
what current means -- so Settings and Server navigate between pages through it and Your
career navigates within one. One template; the two cannot drift.

Each entry says how many the section holds, and a section with nothing in it is listed all
the same. Sticky from lg up; the same sideways strip on a phone that Settings has.

Current is aria-current="location", not page, because they are all one page, and it
is set by app.js since only the browser knows which section is on the screen: the last
section whose top has passed a line two-fifths of the way down the window -- and at the
bottom of the page the last section, whatever the line says, because a short final section
can never reach it. That last rule came out of the browser test failing first: the
topmost-on-screen rule could never mark Languages. Without the script the list still
navigates; it only stops saying where you are.

Tests read the markup (order, anchors, counts, the empty section, nothing marked by the
server, Settings still marking its page) and a browser (an entry takes you to its section
and is marked there; on a phone the strip sits above the sections, inside the screen). The
wiki's Your career record page says so too.

Landed on `main` as `4e52c8d48`, the way this issue suggested: the Settings sidebar, generalised rather than copied. `settings/sidebar.html` is `partials/sidebar.html` now and takes entries -- an `href`, a `label`, and optionally an `icon`, a `count`, an `anchor` and what *current* means -- so Settings and Server navigate between pages through it and Your career navigates within one. One template; the two cannot drift. Each entry says how many the section holds, and a section with nothing in it is listed all the same. Sticky from `lg` up; the same sideways strip on a phone that Settings has. **Current is `aria-current="location"`, not `page`**, because they are all one page, and it is set by app.js since only the browser knows which section is on the screen: the last section whose top has passed a line two-fifths of the way down the window -- and at the bottom of the page the last section, whatever the line says, because a short final section can never reach it. That last rule came out of the browser test failing first: the topmost-on-screen rule could never mark *Languages*. Without the script the list still navigates; it only stops saying where you are. Tests read the markup (order, anchors, counts, the empty section, nothing marked by the server, Settings still marking its page) and a browser (an entry takes you to its section and is marked there; on a phone the strip sits above the sections, inside the screen). The wiki's *Your career record* page says so too.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Postulo/postulo#175
No description provided.