Calendar: an icon on each view button (Month, Week, Day, Agenda), icons only on small screens #904

New issue

Closed

opened 2026-10-12 18:24:36 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-10-12 18:24:36 +00:00

Owner

Give each button of the calendar's view switcher (#861) a Lucide icon. On small screens, show the icons only.

View	Icon	Why
Month	`calendar-days`	a calendar page with a grid of days (already synced)
Week	`calendar-range`	a calendar with a span across it
Day	`calendar-clock`	the day view is laid out by the hour
Agenda	`list-clock`	a timed list of what is coming

calendar-1 would be the obvious icon for Day, but it is already the middle button of the period group (Today / This month / This week, #858). Using it twice on one page would give one icon two meanings.

Where

templates/applications/calendar.html:191-196: the data-views button group. Each button is an <a class="btn …">{{ label }}</a> with text only, and max-sm:min-w-0 max-sm:flex-1 max-sm:px-1 squeezes the four of them into 320 px.
applications/agenda.py:683-693: Page.switcher yields (view, label, url, current). VIEW_LABELS is at :757.
assets/icons.txt: calendar-range, calendar-clock and list-clock are not synced yet. lucide-static 1.41.0 has all three.

What to do

Icons: add an icon to each entry (a VIEW_ICONS map beside VIEW_LABELS, and a fifth element in switcher). Sync the three missing icons.
Markup: draw each button as {% icon view_icon %}<span class="btn-label">{{ label }}</span>, the same shape as the period group's buttons. Give each link aria-label with the view's name, so it keeps its accessible name when the label is hidden. aria-current="page" stays on the open view.
Small screens, icons only: below sm (40rem), hide the labels visually and show the icons only. The rule already exists for button groups: @media (width < 40rem) { body:not([data-buttons="labels"]) [role="group"] .btn-label { …sr-only… } }. The switcher is role="group", so it follows once the label sits in a .btn-label span. Drop the max-sm:px-1 squeeze if the icons fit without it. The four buttons still share the full width.
The #852 setting: wider screens follow Buttons drawn with icons, labels, or both, as every other button does.

Done when

At sm and above, with the default setting, each view button shows its icon and its word. Below sm, only the icons show, the group still fits within 320 px, and each button is still named Month, Week, Day or Agenda for assistive technology.
The open view is still marked by fill and aria-current.
A test covers the icon of each view, and the browser suite checks the switcher at 320 px with labels hidden and accessible names present.

Checked against main at 75f31208b.

Give each button of the calendar's view switcher (#861) a Lucide icon. On small screens, show the icons only. | View | Icon | Why | | --- | --- | --- | | Month | `calendar-days` | a calendar page with a grid of days (already synced) | | Week | `calendar-range` | a calendar with a span across it | | Day | `calendar-clock` | the day view is laid out by the hour | | Agenda | `list-clock` | a timed list of what is coming | `calendar-1` would be the obvious icon for *Day*, but it is already the middle button of the period group (*Today / This month / This week*, #858). Using it twice on one page would give one icon two meanings. ## Where - `templates/applications/calendar.html:191-196`: the `data-views` button group. Each button is an `<a class="btn …">{{ label }}</a>` with text only, and `max-sm:min-w-0 max-sm:flex-1 max-sm:px-1` squeezes the four of them into 320 px. - `applications/agenda.py:683-693`: `Page.switcher` yields `(view, label, url, current)`. `VIEW_LABELS` is at `:757`. - `assets/icons.txt`: `calendar-range`, `calendar-clock` and `list-clock` are not synced yet. lucide-static 1.41.0 has all three. ## What to do 1. **Icons:** add an `icon` to each entry (a `VIEW_ICONS` map beside `VIEW_LABELS`, and a fifth element in `switcher`). Sync the three missing icons. 2. **Markup:** draw each button as `{% icon view_icon %}<span class="btn-label">{{ label }}</span>`, the same shape as the period group's buttons. Give each link `aria-label` with the view's name, so it keeps its accessible name when the label is hidden. `aria-current="page"` stays on the open view. 3. **Small screens, icons only:** below `sm` (40rem), hide the labels visually and show the icons only. The rule already exists for button groups: `@media (width < 40rem) { body:not([data-buttons="labels"]) [role="group"] .btn-label { …sr-only… } }`. The switcher is `role="group"`, so it follows once the label sits in a `.btn-label` span. Drop the `max-sm:px-1` squeeze if the icons fit without it. The four buttons still share the full width. 4. **The #852 setting:** wider screens follow *Buttons drawn with icons, labels, or both*, as every other button does. ## Done when - At sm and above, with the default setting, each view button shows its icon and its word. Below sm, only the icons show, the group still fits within 320 px, and each button is still named *Month*, *Week*, *Day* or *Agenda* for assistive technology. - The open view is still marked by fill and `aria-current`. - A test covers the icon of each view, and the browser suite checks the switcher at 320 px with labels hidden and accessible names present. Checked against `main` at `75f31208b`.

tiagoagueda added the

enhancement

interface

labels

2026-10-12 18:24:42 +00:00

tiagoagueda commented

2026-10-13 08:34:14 +00:00

Author

Owner