Calendar: the kinds of entry (key and filter) at the end of the calendar, not above it #903

New issue

Closed

opened 2026-10-12 18:21:09 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-10-12 18:21:09 +00:00

Owner

The row of event-kind badges, which is both the key and the filter (Interviews, Follow-ups, Reminders, Appointments…, #238), is drawn above the calendar, between the period bar and the grid. Move it to the end of the calendar, under the month grid, the week, the day or the agenda list, so the dates come first and the key is read after them, as on a printed calendar or a map.

Where

templates/applications/calendar.html:212-241: <nav … data-legend>, placed before {% if page.view == 'month' %} (:243). The views follow it, and {% partial listed %} closes the block at :367.

What to do

Move the data-legend nav after the view branches, just before {% endblock %}, so it comes last in all four views. Keep its markup, links, sr-only Show … / Hide … names and Show everything link as they are.
Spacing: mb-4 becomes a top margin (mt-4), so it sits clear of the grid's card.
Long agendas: in the agenda and day views the list can be long, so a person narrowing by kind must scroll to the bottom. Keep the badges at the end anyway, as asked. The filter is also carried in the address (?kinds=), so a narrowed calendar stays narrowed from one period to the next.
Search note: the note that a search is narrowing the page (data-search-note, #848) stays above the grid. Only the key moves.
Guards: check the layer, width and measure guards (8558e7586) and the browser tests that find the legend by position, if any.

Done when

In month, week, day and agenda views, the kind badges come after the calendar's content, both on screen and in the tab order.
Filtering by kind still works from there, without script, and the browser suite is green.

Checked against main at 75f31208b.

The row of event-kind badges, which is both the key and the filter (*Interviews*, *Follow-ups*, *Reminders*, *Appointments*…, #238), is drawn **above** the calendar, between the period bar and the grid. Move it to the **end of the calendar**, under the month grid, the week, the day or the agenda list, so the dates come first and the key is read after them, as on a printed calendar or a map. ## Where `templates/applications/calendar.html:212-241`: `<nav … data-legend>`, placed before `{% if page.view == 'month' %}` (`:243`). The views follow it, and `{% partial listed %}` closes the block at `:367`. ## What to do - Move the `data-legend` nav after the view branches, just before `{% endblock %}`, so it comes last in all four views. Keep its markup, links, `sr-only` *Show …* / *Hide …* names and *Show everything* link as they are. - Spacing: `mb-4` becomes a top margin (`mt-4`), so it sits clear of the grid's card. - Long agendas: in the agenda and day views the list can be long, so a person narrowing by kind must scroll to the bottom. Keep the badges at the end anyway, as asked. The filter is also carried in the address (`?kinds=`), so a narrowed calendar stays narrowed from one period to the next. - Search note: the note that a search is narrowing the page (`data-search-note`, #848) stays above the grid. Only the key moves. - Guards: check the layer, width and measure guards (`8558e7586`) and the browser tests that find the legend by position, if any. ## Done when - In month, week, day and agenda views, the kind badges come after the calendar's content, both on screen and in the tab order. - Filtering by kind still works from there, without script, and the browser suite is green. Checked against `main` at `75f31208b`.

tiagoagueda added the

enhancement

interface

labels

2026-10-12 18:21:14 +00:00

tiagoagueda commented

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

Author

Owner