Changeset 4dcefa1 in Klonkt for src/views/partials/shared-styles.ejs

Timestamp:

06/20/2026 08:11:45 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

1c6d61c

Parents:

6eeb459

Message:

fix(agenda): robust grey-on-calendar (htmx-proof) via source rule + element classes

The body.class-override CSS didn't take effect after htmx nav. Now:

• Timeline/Grid: style.css active rule excluded on .on-shows/.on-downloads (same rule that does react to htmx) → grey there, normal on the feed.
• Solo/Circle + grid-cols: not rendered as 'active' on non-feed pages in the template (server-rendered in the OOB chrome → htmx-proof).
• Calendar active via element class .vs-agenda.is-active (not body class).

style.css?v=19.

Co-Authored-By: Claude <noreply@…>

File:

• src/views/partials/shared-styles.ejs (modified) (2 diffs)

src/views/partials/shared-styles.ejs

@@ -50 +50 @@
 }
 .vs-agenda:hover { color: var(--ink); }
-/* Op de agendapagina = helder/wit (geen pilletje, past bij de losse-link-look). */
-body.on-shows .vs-agenda { color: var(--ink); font-weight: 600; }
+/* Actief (op de agendapagina) = helder/wit. Element-class (in de OOB-gerenderde
+   chrome) i.p.v. body-class-CSS → werkt betrouwbaar ook na htmx-navigatie. */
+.vs-agenda.is-active { color: var(--ink); font-weight: 600; }
 
 .grid-cols-picker {
@@ -97 +98 @@
 }
 
-/* Op de agenda- én downloads-pagina is ALLES behalve de Agenda-pill neutraal/grijs
-   (je bent daar niet in een feed-weergave). !important + body.on-X (betrouwbaar
-   gezet/gestript via PAGE_CLASSES) → overrult de feed-active-regel ZONDER naar de
-   feed te lekken (de selector matcht alleen op die pagina's). */
-body.on-shows .view-switch-btn,
-body.on-downloads .view-switch-btn {
-  background: transparent !important;
-  color: var(--ink-muted, var(--ink-soft)) !important;
-  border-color: var(--rule) !important;
-}
-body.on-shows .feed-scope-btn.is-active,
-body.on-downloads .feed-scope-btn.is-active {
-  background: transparent !important;
-  color: var(--ink-muted, var(--ink-soft)) !important;
-}
-body.on-shows .grid-cols-btn.is-active,
-body.on-downloads .grid-cols-btn.is-active {
-  background: var(--paper-2) !important;
-  color: var(--ink-muted, var(--ink-soft)) !important;
-  border-color: var(--rule) !important;
-}
 
 /* Spacing between switcher-bar and the page content below.