fix(stats): les grosses journées ne s'écrasent plus à la même hauteurUnverified
La barre en height:% se faisait comprimer par flexbox dès que barre + étiquettes dépassaient les 190 px de la zone (9 h rendu à la hauteur de 6 h 30, sur les 5 graphiques). Étiquettes à hauteur fixe et barre en calc((100% - 45px) * --h / 100) : proportions exactes, plus de compression possible. Claude-Session: https://claude.ai/code/session_01D114WAMbcTKTZShiyksS1z
9001821 parent: 01c726d modified
assets/style.css +7 -2 | @@ -445,10 +445,15 @@ a.team-pill:hover { filter: brightness(.96); } | ||
| 445 | 445 | .chart-empty { font-size: 14px; opacity: .7; margin: 0; padding: var(--space-6) 0; } |
| 446 | 446 | .cols { display: flex; align-items: flex-end; gap: var(--space-4); height: 190px; padding-top: var(--space-2); } |
| 447 | 447 | .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; } |
| 448 | -.col .total { font-size: 12px; opacity: .7; } | |
| 449 | -.col .user { font-size: 13px; font-weight: 600; } | |
| 448 | +/* Étiquettes à hauteur FIXE et barre en % de l'espace restant (--h posé en | |
| 449 | + inline par le template) : avec height:% direct, flexbox comprimait les | |
| 450 | + colonnes proches du max (barre + étiquettes > 190 px) et les grosses | |
| 451 | + journées s'égalisaient — 9 h rendu à la hauteur de 6 h 30. */ | |
| 452 | +.col .total { font-size: 12px; opacity: .7; height: 15px; line-height: 15px; } | |
| 453 | +.col .user { font-size: 13px; font-weight: 600; height: 18px; line-height: 18px; white-space: nowrap; } | |
| 450 | 454 | .col-bar { |
| 451 | 455 | width: 100%; max-width: 64px; display: flex; flex-direction: column; |
| 456 | + flex: none; height: calc((100% - 45px) * var(--h, 2) / 100); | |
| 452 | 457 | border-radius: var(--radius-md); overflow: hidden; background: var(--color-neutral-200); |
| 453 | 458 | } |
| 454 | 459 | /* 24px : cible tactile minimale (WCAG 2.5.8) — la hauteur cliquable prime |
| @@ -445,10 +445,15 @@ a.team-pill:hover { filter: brightness(.96); } | |||
| 445 | .chart-empty { font-size: 14px; opacity: .7; margin: 0; padding: var(--space-6) 0; } | 445 | .chart-empty { font-size: 14px; opacity: .7; margin: 0; padding: var(--space-6) 0; } |
| 446 | .cols { display: flex; align-items: flex-end; gap: var(--space-4); height: 190px; padding-top: var(--space-2); } | 446 | .cols { display: flex; align-items: flex-end; gap: var(--space-4); height: 190px; padding-top: var(--space-2); } |
| 447 | .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; } | 447 | .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; } |
| 448 | -.col .total { font-size: 12px; opacity: .7; } | 448 | +/* Étiquettes à hauteur FIXE et barre en % de l'espace restant (--h posé en |
| 449 | -.col .user { font-size: 13px; font-weight: 600; } | 449 | + inline par le template) : avec height:% direct, flexbox comprimait les |
| 450 | + colonnes proches du max (barre + étiquettes > 190 px) et les grosses | ||
| 451 | + journées s'égalisaient — 9 h rendu à la hauteur de 6 h 30. */ | ||
| 452 | +.col .total { font-size: 12px; opacity: .7; height: 15px; line-height: 15px; } | ||
| 453 | +.col .user { font-size: 13px; font-weight: 600; height: 18px; line-height: 18px; white-space: nowrap; } | ||
| 450 | .col-bar { | 454 | .col-bar { |
| 451 | width: 100%; max-width: 64px; display: flex; flex-direction: column; | 455 | width: 100%; max-width: 64px; display: flex; flex-direction: column; |
| 456 | + flex: none; height: calc((100% - 45px) * var(--h, 2) / 100); | ||
| 452 | border-radius: var(--radius-md); overflow: hidden; background: var(--color-neutral-200); | 457 | border-radius: var(--radius-md); overflow: hidden; background: var(--color-neutral-200); |
| 453 | } | 458 | } |
| 454 | /* 24px : cible tactile minimale (WCAG 2.5.8) — la hauteur cliquable prime | 459 | /* 24px : cible tactile minimale (WCAG 2.5.8) — la hauteur cliquable prime |
modified
templates/stats.html +2 -2 | @@ -45,7 +45,7 @@ | ||
| 45 | 45 | <span class="total">{{ t }}</span> |
| 46 | 46 | {% endif %} |
| 47 | 47 | {% if !col.muted %} |
| 48 | - <div class="col-bar" style="height:{{ col.height_pct }}%"> | |
| 48 | + <div class="col-bar" style="--h:{{ col.height_pct }}"> | |
| 49 | 49 | {% for s in col.segs %} |
| 50 | 50 | <a href="#{{ s.sheet_id }}" style="flex-grow:{{ s.flex }};background:{{ s.color }}" |
| 51 | 51 | title="{{ s.aria }}" aria-label="{{ s.aria }}"></a> |
| @@ -88,7 +88,7 @@ | ||
| 88 | 88 | {% for row in c.rows %} |
| 89 | 89 | <div class="col"> |
| 90 | 90 | <span class="total">{{ row.total }}</span> |
| 91 | - <div class="col-bar" style="height:{{ row.height_pct }}%"> | |
| 91 | + <div class="col-bar" style="--h:{{ row.height_pct }}"> | |
| 92 | 92 | {% for s in row.segs %} |
| 93 | 93 | <a href="#{{ s.sheet_id }}" style="flex-grow:{{ s.flex }};background:{{ s.color }}" |
| 94 | 94 | title="{{ s.aria }}" aria-label="{{ s.aria }}"></a> |
| @@ -45,7 +45,7 @@ | |||
| 45 | <span class="total">{{ t }}</span> | 45 | <span class="total">{{ t }}</span> |
| 46 | {% endif %} | 46 | {% endif %} |
| 47 | {% if !col.muted %} | 47 | {% if !col.muted %} |
| 48 | - <div class="col-bar" style="height:{{ col.height_pct }}%"> | 48 | + <div class="col-bar" style="--h:{{ col.height_pct }}"> |
| 49 | {% for s in col.segs %} | 49 | {% for s in col.segs %} |
| 50 | <a href="#{{ s.sheet_id }}" style="flex-grow:{{ s.flex }};background:{{ s.color }}" | 50 | <a href="#{{ s.sheet_id }}" style="flex-grow:{{ s.flex }};background:{{ s.color }}" |
| 51 | title="{{ s.aria }}" aria-label="{{ s.aria }}"></a> | 51 | title="{{ s.aria }}" aria-label="{{ s.aria }}"></a> |
| @@ -88,7 +88,7 @@ | |||
| 88 | {% for row in c.rows %} | 88 | {% for row in c.rows %} |
| 89 | <div class="col"> | 89 | <div class="col"> |
| 90 | <span class="total">{{ row.total }}</span> | 90 | <span class="total">{{ row.total }}</span> |
| 91 | - <div class="col-bar" style="height:{{ row.height_pct }}%"> | 91 | + <div class="col-bar" style="--h:{{ row.height_pct }}"> |
| 92 | {% for s in row.segs %} | 92 | {% for s in row.segs %} |
| 93 | <a href="#{{ s.sheet_id }}" style="flex-grow:{{ s.flex }};background:{{ s.color }}" | 93 | <a href="#{{ s.sheet_id }}" style="flex-grow:{{ s.flex }};background:{{ s.color }}" |
| 94 | title="{{ s.aria }}" aria-label="{{ s.aria }}"></a> | 94 | title="{{ s.aria }}" aria-label="{{ s.aria }}"></a> |