lafrite/gestion_projets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rendre la barre cumulative identique, pliée ou dépliée

Browse Source 
Elle s'épaississait en mode plié, au motif qu'elle y était seule sur sa
ligne. Mais plier un couloir ne change rien à ce que cette barre
représente : la voir changer d'aspect au pli laissait croire à deux
objets différents.

Elle garde donc partout la hauteur de sa version dépliée, plus mince
qu'une barre de phase — puisqu'elle voisine avec elles dès que le projet
est déplié, et qu'elle ne se glisse pas.

`--hauteur-cumulative` remonte dans `:root` : la barre et le fantôme qui
la double sont frères et non imbriqués, la variable doit donc vivre
au-dessus des deux.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Bertrand Benjamin
2026-08-01 11:03:18 +02:00
parent eaca2f7813
commit 6b15972e3b
4 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
css/style.css
View File

@@ -23,6 +23,9 @@
--aujourdhui: #ef4444;
--hauteur-barre: 26px;
/* Barre cumulative d'un projet, et fantôme qui la double. Ils sont frères,
pas imbriqués : la variable doit donc vivre au-dessus des deux. */
--hauteur-cumulative: 9px;
--hauteur-ligne: 38px;
--hauteur-entete: 66px; /* trois bandes de 22 px : année, mois, semaine */
/* Doit rester en accord avec `LARGEUR_LIBELLES.defaut` (app.js), sur lequel
@@ -697,15 +700,18 @@ button[aria-pressed="true"] {
/* --- barre cumulative d'un projet ---------------------------------------- */
/* Barre unique segmentée par phase, affichée que le projet soit plié ou
déplié. Lecture seule : voir docs/decisions.md, section 8. */
déplié, et rendue à l'identique dans les deux cas — c'est le même objet, il
n'a pas à changer d'aspect quand on ouvre le couloir.
Volontairement plus mince qu'une barre de phase : elle voisine avec elles
dès que le projet est déplié, et ne se glisse pas.
Lecture seule : voir docs/decisions.md, section 8. */
.barre-cumulative {
position: absolute;
top: calc((var(--hauteur-ligne) - var(--hauteur-barre)) / 2);
height: var(--hauteur-barre);
border-radius: 4px;
top: calc((var(--hauteur-ligne) - var(--hauteur-cumulative)) / 2);
height: var(--hauteur-cumulative);
border-radius: 3px;
overflow: hidden;
display: flex;
box-shadow: var(--ombre);
background: color-mix(in srgb, var(--couleur-projet) 15%, var(--surface));
cursor: default;
z-index: 2;
@@ -735,17 +741,6 @@ button[aria-pressed="true"] {
opacity: 0.85;
}
/* Dépliée, la barre cumulative coiffe les phases du projet : elle s'amincit
pour ne pas se faire passer pour l'une d'elles — elle ne se glisse pas. */
.barre-cumulative--fine {
--hauteur-cumulative: 9px;
top: calc((var(--hauteur-ligne) - var(--hauteur-cumulative)) / 2);
height: var(--hauteur-cumulative);
border-radius: 3px;
box-shadow: none;
}
/* --- barre fantôme de référence ------------------------------------------ */
.fantome {
@@ -766,11 +761,12 @@ button[aria-pressed="true"] {
z-index: 1;
}
/* Le fantôme suit la barre qu'il double : sous une barre cumulative amincie,
il flotterait sinon dans le vide. Déclaré après `.fantome`, dont il partage
la spécificité — l'ordre est ce qui le fait gagner. */
.fantome--fin {
top: calc((var(--hauteur-ligne) + 9px) / 2);
/* Le fantôme suit la barre qu'il double. Sous la barre cumulative, plus mince
qu'une barre de phase, il flotterait sinon dans le vide. Déclaré après
`.fantome`, dont il partage la spécificité — l'ordre est ce qui le fait
gagner. */
.fantome--cumulatif {
top: calc((var(--hauteur-ligne) + var(--hauteur-cumulative)) / 2);
height: 4px;
}