From 5bc21e1840add14e0a9e9e2f59556a27da69fa15 Mon Sep 17 00:00:00 2001 From: Spark Date: Wed, 21 Oct 2026 11:34:18 -0400 Subject: [PATCH] =?UTF-8?q?fix:=20barre=20commune=20pleine=20largeur,=20pa?= =?UTF-8?q?lier=20mobile=20v0.1.2,=20animation=20lat=C3=A9rale=20fluide=20?= =?UTF-8?q?(#28)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 17 +++++++++++++++++ app/config.py | 2 +- app/templates/_draco_bar.html | 2 +- pyproject.toml | 2 +- static/css/draco-barre.css | 21 ++++++++++++++++----- static/css/style.css | 24 +++++++++++++++++++----- tests/test_draco_barre.py | 11 +++++++++++ 7 files changed, 66 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 51876b9..80b1555 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,22 @@ # Changelog +## 0.23.1 — 2026-10-21 + +### Correctifs — barre commune et barre latérale (retours de Bruno) + +- **Barre d'apps pleine largeur** : elle était repoussée à droite + de la barre latérale par le `padding-left` du cadre ; elle est + maintenant fixe, pleine largeur, et le cadre entier est décalé + de sa hauteur (60 px, 52 px en mobile). +- **Barre commune v0.1.2** (dracodev-commons) : palier mobile + resserré selon la spec — app courante, alertes, Spark, avatar ; + rail, recherche, domaines et menu disparaissent au profit des + contrôles natifs de chaque app. +- **Animation du repli de la barre latérale** : durée et courbe + unifiées (0,26 s, `cubic-bezier(0.4, 0, 0.2, 1)`) entre le corps + et la barre, et retrait du `backdrop-filter` (fond déjà opaque + à 96 %) qui rendait l'animation de largeur saccadée. + ## 0.23.0 — 2026-10-21 ### Fusion — Kanbante rejoint l'accès centralisé (cartes #27, #28) diff --git a/app/config.py b/app/config.py index d9c86e6..fe1cd86 100644 --- a/app/config.py +++ b/app/config.py @@ -104,7 +104,7 @@ from pathlib import Path BASE_DIR = Path(__file__).resolve().parent.parent -APP_VERSION = "0.23.0" +APP_VERSION = "0.23.1" def _env_bool(name: str, default: bool) -> bool: diff --git a/app/templates/_draco_bar.html b/app/templates/_draco_bar.html index 46b748a..519e225 100644 --- a/app/templates/_draco_bar.html +++ b/app/templates/_draco_bar.html @@ -1,5 +1,5 @@ {# Barre d'apps commune dracodev — Fusion ACC-1 (issue kanbante#28). - Snippet FIGÉ vendangé depuis Projets/dracodev-commons v0.1.1 + Snippet FIGÉ vendangé depuis Projets/dracodev-commons v0.1.2 (ui/barre-apps/) : ne pas modifier la structure ici ; toute évolution passe par une nouvelle version de commons. CSS/JS : /static/css/draco-barre.css, /static/js/draco-barre.js. diff --git a/pyproject.toml b/pyproject.toml index 5ae3f09..2fd3088 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,6 +1,6 @@ [project] name = "kanbante" -version = "0.23.0" +version = "0.23.1" description = "Kanban project manager integrated with Gitea" requires-python = ">=3.11" dependencies = [ diff --git a/static/css/draco-barre.css b/static/css/draco-barre.css index 02b1488..9014a47 100644 --- a/static/css/draco-barre.css +++ b/static/css/draco-barre.css @@ -1,4 +1,5 @@ -/* Barre d'apps commune dracodev — v0.1.0 (bloc 0, ACC-0.2) +/* Barre d'apps commune dracodev — v0.1.0 (bloc 0, ACC-0.2) ; + v0.1.2 : palier mobile resserré selon la spec (voir @media 700px). Jetons repris du prototype validé Console v7.2. Thème : clair par défaut, sombre via [data-theme="dark"] sur ou prefers-color-scheme si l'app intégratrice ne force rien. */ @@ -120,8 +121,18 @@ .draco-bar-droite { justify-content: flex-end; } } @media (max-width: 700px) { - /* Mobile : la barre du haut se condense ; la navigation d'apps passe - en barre basse propre à chaque app (patron du prototype v5+). */ - .draco-apptabs, .draco-domaines-lbl { display: none; } - .draco-bar { height: 52px; } + /* Mobile (spec des barres, § Mobile) : la barre se resserre sur + l'essentiel — marque, onglet de l'app courante, alertes, Spark, + avatar. Le rail, la recherche, les domaines et le menu « ••• » + disparaissent : chaque app garde ses contrôles natifs (barre + basse, en-tête) — un seul hamburger visible, celui de l'app. + (v0.1.2 — avant, les onglets entiers et les pastilles domaines + restaient affichés et la barre débordait sur téléphone.) */ + .draco-bar { height: 52px; grid-template-columns: auto 1fr auto; } + .draco-bar-centre, .draco-domaines, .draco-bar .draco-icon-btn { display: none; } + .draco-apptab { display: none; } + .draco-bar[data-current="obsigate"] .draco-apptab[data-app="obsigate"], + .draco-bar[data-current="flowdeck"] .draco-apptab[data-app="flowdeck"], + .draco-bar[data-current="tiktak"] .draco-apptab[data-app="tiktak"], + .draco-bar[data-current="kanbante"] .draco-apptab[data-app="kanbante"] { display: flex; } } diff --git a/static/css/style.css b/static/css/style.css index 7dd7618..7448d52 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1210,16 +1210,22 @@ footer { } /* ── Barre latérale (0.16.0, #16 refonte) ── */ -body.with-sidebar { padding-left: 238px; transition: padding-left 0.18s ease; } +/* Fluidité (0.23.1) : durée et courbe UNIFIÉES entre le padding du + corps et la largeur de la barre (avant : 0.18 s ease des deux + côtés mais transform à 0.22 s — mouvements désynchronisés), et + retrait du backdrop-filter : le fond est déjà opaque à 96 %, + le flou forçait un re-rendu coûteux à chaque image de l'animation + de largeur, d'où l'effet « lent et saccadé » signalé par Bruno. */ +body.with-sidebar { padding-left: 238px; transition: padding-left 0.26s cubic-bezier(0.4, 0, 0.2, 1); } body.with-sidebar.sidebar-collapsed { padding-left: 68px; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 200; width: 238px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 16px 12px 12px; overflow-y: auto; overflow-x: hidden; - background: rgba(13, 16, 24, 0.96); backdrop-filter: blur(14px); + background: rgba(13, 16, 24, 0.96); border-right: 1px solid var(--border); - transition: width 0.18s ease, transform 0.22s ease; + transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1), transform 0.26s cubic-bezier(0.4, 0, 0.2, 1); } body.sidebar-collapsed .sidebar { width: 68px; } .side-logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; color: var(--text); font-size: 1.18rem; font-weight: 700; white-space: nowrap; } @@ -1619,6 +1625,14 @@ a.ms-title:hover { text-decoration: underline; } .login-foot { margin: 18px 0 0; text-align: center; color: var(--text-3, #8b94a5); font-size: 0.8rem; } /* ── Fusion ACC-1 (kanbante#28) : cohabitation avec la barre commune ── - La barre d'apps (60 px, en flux en haut du body) repousse la barre - latérale fixe sous elle ; le reste du cadre suit le flux. */ + La barre d'apps est FIXE et pleine largeur (0.23.1 — en flux, le + padding-left du cadre la repoussait à droite de la barre latérale, + constat de Bruno sur capture) ; le cadre entier est décalé de sa + hauteur, et la barre latérale fixe démarre sous elle. */ +body.has-draco-bar { padding-top: 60px; } +body.has-draco-bar .draco-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 250; } body.has-draco-bar .sidebar { top: 60px; } +@media (max-width: 700px) { + body.has-draco-bar { padding-top: 52px; } + body.has-draco-bar .sidebar { top: 52px; } +} diff --git a/tests/test_draco_barre.py b/tests/test_draco_barre.py index 61a6c8a..31e856a 100644 --- a/tests/test_draco_barre.py +++ b/tests/test_draco_barre.py @@ -26,6 +26,17 @@ def test_statiques_de_la_barre_servis(client): assert client.get("/static/js/draco-barre.js").status_code == 200 +def test_barre_pleine_largeur_et_palier_mobile(client): + # 0.23.1 : la barre est fixe pleine largeur (le padding du cadre + # ne la repousse plus) et le palier mobile commons v0.1.2 ne + # garde que l'onglet de l'app courante. + style = client.get("/static/css/style.css").text + assert "body.has-draco-bar .draco-bar" in style + assert "position: fixed" in style + barre = client.get("/static/css/draco-barre.css").text + assert '.draco-bar[data-current="kanbante"] .draco-apptab[data-app="kanbante"]' in barre + + def test_pas_de_barre_sur_le_login(monkeypatch, fake_gitea): from fastapi.testclient import TestClient