From b55d77ab3ac1f23e49137ee97ffbd8cd322d83a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9sar=20Watrin?= Date: Thu, 5 Nov 2026 11:07:42 +0100 Subject: [PATCH 1/2] feat(site): keep the filters in a sticky column on the right of wide screens From 1536 px the period, the dates and the search leave the top of the page for a column on its right that stays in view as the page scrolls: they apply to every page. The column stays on the pages without filters so that the content keeps its width, as wide as beside the sidebar at 1280 px. Narrower screens keep the filters at the top of the page. Co-Authored-By: Claude Opus 5.5 --- .claude/rules/site.md | 6 +++-- .claude/rules/workflow.md | 2 +- README.md | 3 ++- site/style.css | 53 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 60 insertions(+), 4 deletions(-) diff --git a/.claude/rules/site.md b/.claude/rules/site.md index c3efbda..82c5090 100644 --- a/.claude/rules/site.md +++ b/.claude/rules/site.md @@ -149,8 +149,10 @@ paths: - Colors are tokens on `:root`, redefined for dark mode (system preference and `data-theme`). Data series use `--series-1` (blue), `--series-2` (orange), `--series-3` (green), a palette checked for color blindness; text never takes a series color. Repository types are labelled front, back, mobile or full-stack. -- Layout: a sidebar from 1280 px, a top bar below. Tables fit at 1080 px without horizontal scrolling. Check 1920, - 1280, 1080 and 390 px (phone), light and dark. +- Layout: a sidebar from 1280 px, a top bar below. From 1536 px the filters (`[data-filters]`) move from the top of + the page to a sticky column on its right, kept on the pages without filters so that the content keeps its width; + beside it the content is as wide as beside the sidebar at 1280 px, so whatever fits there fits there too. Tables + fit at 1080 px without horizontal scrolling. Check 1920, 1536, 1280, 1080 and 390 px (phone), light and dark. - Hiding: the `hidden` attribute, which a rule of `style.css` makes win over any `display`; never a class of its own. - Motion: pages enter with `.is-entering` and a staggered `--delay`; everything stops under `prefers-reduced-motion`. diff --git a/.claude/rules/workflow.md b/.claude/rules/workflow.md index 8fb9135..fa295c0 100644 --- a/.claude/rules/workflow.md +++ b/.claude/rules/workflow.md @@ -32,7 +32,7 @@ from `.env` (never written in a command nor printed), swaps `syncTrigger` for a fake one and encrypts it again with a throwaway password. - Link the `site/` files into that folder and serve it with `PORT= node scripts/serve.mjs`. - - Check 1920, 1280, 1080 and 390 px, light and dark mode, and an empty console. + - Check 1920, 1536, 1280, 1080 and 390 px, light and dark mode, and an empty console. - The README and the "Méthode" page follow any change of behavior or definition. ## Shared resources diff --git a/README.md b/README.md index 81de1e3..3919693 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,8 @@ Site statique sans build ni dépendance, déployé sur GitHub Pages par un workf chaque minute et anime les compteurs quand de nouvelles PR, merges ou reviews arrivent. Le dashboard est découpé en pages, dans une barre latérale (une barre en haut sur les écrans étroits). La période et -la recherche s'appliquent à toutes. Tous les délais ne comptent que les heures ouvrées, du lundi au vendredi de 9 h à +la recherche s'appliquent à toutes : sur les grands écrans (1536 px et plus), elles quittent le haut de la page pour +une colonne à droite, qui reste à portée quand la page défile. Tous les délais ne comptent que les heures ouvrées, du lundi au vendredi de 9 h à 18 h, heure de Paris ; un jour en compte 9. Seules les durées des exécutions de CI restent en temps réel : - **Vue d'ensemble** : l'activité du jour, puis celle de la période en trois volets, livraison (PR ouvertes et diff --git a/site/style.css b/site/style.css index 40d42ca..897e7ef 100644 --- a/site/style.css +++ b/site/style.css @@ -865,6 +865,59 @@ h3 { font: inherit; } +/* With room to spare on the right, the filters, which apply to every page, leave the top of the page for a column of + their own that stays in view as the page scrolls. The column stays on the pages without filters, so that the page + keeps its width from one to the next. The content is never narrower than beside the sidebar at 1280 px (968 px), + nor wider than without the column (1240 px); the column is wide enough for the placeholder of the search. */ +@media (min-width: 1536px) { + .page { + display: grid; + grid-template-columns: minmax(0, 1fr) 240px; + align-content: start; + column-gap: 32px; + max-width: calc(40px + 1240px + 32px + 240px + 24px); + padding-right: 24px; + } + + .page > :not(.filters) { + grid-column: 1; + } + + .filters { + position: sticky; + z-index: 6; + top: 32px; + grid-column: 2; + grid-row: 1 / span 4; + align-self: start; + flex-direction: column; + flex-wrap: nowrap; + gap: 10px; + margin: 0; + } + + .segmented { + flex-direction: column; + gap: 2px; + } + + .segmented button { + padding: 7px 12px; + text-align: left; + } + + .filters .search { + flex: none; + width: 100%; + } + + /* The column ends near the right edge: the panel opens towards the page. */ + .date-range-panel { + right: 0; + left: auto; + } +} + button:focus-visible, input:focus-visible, a:focus-visible, From fe3a01ade3270ef51855562340775d7bb4ff2476 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9sar=20Watrin?= Date: Thu, 5 Nov 2026 11:19:01 +0100 Subject: [PATCH 2/2] style(site): name the filters column and tint the period shown like the current page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The column gets the name « Filtres », and the period shown, or picked dates, take the light tint of the current page in the sidebar rather than the black of the segmented control. The column grows to 256 px so that the placeholder of the search fits beside the room the browser keeps for its clear button, with narrower gaps so that the content keeps its width at 1536 px. Co-Authored-By: Claude Opus 5.5 --- .claude/rules/site.md | 3 ++- site/index.html | 2 ++ site/style.css | 42 +++++++++++++++++++++++++++++++++++++----- 3 files changed, 41 insertions(+), 6 deletions(-) diff --git a/.claude/rules/site.md b/.claude/rules/site.md index 82c5090..76396f5 100644 --- a/.claude/rules/site.md +++ b/.claude/rules/site.md @@ -150,7 +150,8 @@ paths: `--series-1` (blue), `--series-2` (orange), `--series-3` (green), a palette checked for color blindness; text never takes a series color. Repository types are labelled front, back, mobile or full-stack. - Layout: a sidebar from 1280 px, a top bar below. From 1536 px the filters (`[data-filters]`) move from the top of - the page to a sticky column on its right, kept on the pages without filters so that the content keeps its width; + the page to a sticky column on its right, under the name « Filtres », the period shown tinted like the current page + of the sidebar; the column stays on the pages without filters so that the content keeps its width; beside it the content is as wide as beside the sidebar at 1280 px, so whatever fits there fits there too. Tables fit at 1080 px without horizontal scrolling. Check 1920, 1536, 1280, 1080 and 390 px (phone), light and dark. - Hiding: the `hidden` attribute, which a rule of `style.css` makes win over any `display`; never a class of its own. diff --git a/site/index.html b/site/index.html index b6aa740..e4d4bc6 100644 --- a/site/index.html +++ b/site/index.html @@ -178,6 +178,8 @@

Vue d’ensemble