bachir/drupal-figli-compta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix diverging year-bars chart: bars were pinned to the top, not the zero line

Browse Source 
Root cause: .figli-year-bar was position: relative with an explicit
height (set inline by barStyle()), which opts it out of the flex
container's default stretch alignment -- so it rendered flex-start
(top) aligned first, and the top/bottom: 50% from barStyle() only
*offset* that already-top position instead of anchoring an edge to the
middle. Visibly: green (positive) bars piling up near the top instead
of growing upward from the zero line.

Fixed by wrapping each bar in a .figli-year-bar-slot that stays in the
normal flex flow (so horizontal side-by-side layout for two bars/year
still works) and giving the bar itself position: absolute, anchored
against the slot's full-height box -- that's what makes a 50% top/
bottom offset actually mean "the zero line" instead of "50% further
down/up from wherever flex already put it."

Verified geometrically in-browser: bars now straddle the track's
midpoint and extend outward in the correct direction (positive up,
negative down) on both "Entrées vs versements par année" and
"Évolution du solde".

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
bachir
2026-09-06 18:14:00 +02:00
co-authored by Claude Sonnet 5
parent 22f57379e5
commit bd251d0a5e
2 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/modules/custom/figli_compta_ledger/css/dashboard.css
+17 -1
View File
@@ -178,9 +178,25 @@ html.gin--dark-mode #figli-dashboard-app {
justify-content: center;
gap: 2px;
}
#figli-dashboard-app .figli-year-bar {
/* Slot stays in normal flex flow (so justify-content/gap on
.figli-year-bars above still lays several bars out side by side) and
gives the bar a definite height (100% of the track) to anchor
against. The bar itself must be position: absolute, not relative --
with relative, an explicit height opts it out of the flex stretch
default, so it renders flex-start (top) aligned *first*, and the
top/bottom: 50% from barStyle() only *offsets* that already-top
position instead of anchoring the edge to the middle -- the visible
bug this replaces (bars pinned near the top instead of growing from
the zero line). */
#figli-dashboard-app .figli-year-bar-slot {
position: relative;
width: 0.9rem;
height: 100%;
}
#figli-dashboard-app .figli-year-bar {
position: absolute;
left: 0;
right: 0;
min-height: 2px;
border-radius: 2px;
}
web/modules/custom/figli_compta_ledger/js/dashboard-compte.js
+3 -1
View File
@@ -171,7 +171,9 @@
'<div class="figli-year-col" v-for="y in years" :key="y.label">' +
'<div class="figli-year-track">' +
'<div class="figli-year-bars">' +
'<div class="figli-year-bar" v-for="(bar, i) in y.bars" :key="i" :style="barStyle(bar)" :title="bar.title + \' : \' + formatValue(bar.value)"></div>' +
'<div class="figli-year-bar-slot" v-for="(bar, i) in y.bars" :key="i">' +
'<div class="figli-year-bar" :style="barStyle(bar)" :title="bar.title + \' : \' + formatValue(bar.value)"></div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="figli-year-label">{{ y.label }}</div>' +