Fix Jauge bar collapsing to 0px when nested with a name label

A Jauge posée dans un conteneur a une hauteur "auto" (voir
_style_string) — "flex:1 1 auto" seul n'avait alors rien à répartir
(le conteneur flex lui-même n'a pas de hauteur définie), donc le
wrapper de la barre s'effondrait à 0px : seul le nom restait visible,
la jauge elle-même disparaissait. Ajout d'un "min-height" plancher
sur ce wrapper, qui laisse toujours la barre visible dans ce cas tout
en la laissant grandir avec flex:1 si l'élément a une vraie hauteur.
This commit is contained in:
william
2026-08-23 18:55:44 +02:00
parent c9d3069f47
commit 7e4df3fa3a
2 changed files with 34 additions and 1 deletions
+9 -1
View File
@@ -115,9 +115,17 @@ def _render_jauge(el, meta, slug, children_map=None, ctx=None, parent_flex_direc
f'<div class="jaugeBar" style="position:absolute; left:0; top:0; bottom:0; width:{percent}%; '
f'background-color:{fill_color}; transition:width .3s ease, background-color .3s ease;"></div>'
)
# min-height (pas 0) : un élément posé DANS un conteneur a une hauteur
# "auto" par défaut (voir _style_string) — "flex:1 1 auto" seul n'a
# alors rien à répartir (le conteneur flex lui-même n'a pas de hauteur
# définie tant que rien ne la contraint) et la barre s'effondrait à 0px,
# ne laissant plus que le nom visible. Cette valeur plancher garde la
# barre visible dans ce cas, tout en la laissant grandir avec flex:1 si
# l'élément a une vraie hauteur (posé directement sur un écran, ou
# hauteur fixée via "Position & taille").
bar_wrap = (
f'<div style="position:relative; overflow:hidden; background:#1c2130; border-radius:6px; '
f'flex:1 1 auto; min-height:0;">{bar}{label_html}</div>'
f'flex:1 1 auto; min-height:14px;">{bar}{label_html}</div>'
)
return (
f'<div id="{_auto_id(el)}" data-element-id="{el["id"]}" style="{html_lib.escape(style)}">'
+25
View File
@@ -165,6 +165,31 @@ def test_gauge_without_champ_nom_shows_no_name_no_regression(client, game):
assert ">Confiance<" not in html
def test_gauge_bar_stays_visible_when_nested_in_a_container_with_a_name(client, game):
"""Régression : posée À L'INTÉRIEUR d'un conteneur (donc en hauteur
"auto", voir _style_string), la Jauge avec un nom affiché au-dessus ne
doit pas voir sa barre s'effondrer à 0px — "flex:1 1 auto" seul n'a
rien à répartir dans un conteneur flex sans hauteur définie, d'où le
"min-height" plancher sur le wrapper de la barre (voir render_jauge.py).
On vérifie ici que la classe "jaugeBar" reste dans un wrapper qui porte
bien un min-height non nul, pas seulement sa présence dans le HTML."""
def_id, row_ids = _create_jauge_object_with_rows(client, game)
screen_id = _create_screen(client, game)
resp = client.post(f"/game/{game}/screens/{screen_id}/elements/add", data={"widget": "conteneur"}, follow_redirects=False)
container_id = int(re.search(r"selected=(\d+)", resp.headers["Location"]).group(1))
resp = client.post(f"/game/{game}/elements/{container_id}/children/add", data={"widget": "jauge"}, follow_redirects=False)
jauge_id = int(re.search(r"selected=(\d+)", resp.headers["Location"]).group(1))
client.post(f"/game/{game}/elements/{jauge_id}/save", data={
"ctrl_definition_id": str(def_id), "ctrl_row_id": str(row_ids["Confiance"]),
"ctrl_champ": "value", "ctrl_champ_nom": "name", "ctrl_min": "0", "ctrl_max": "100",
})
html = client.get(f"/game/{game}/play").data.decode()
assert ">Confiance<" in html
idx = html.find("jaugeBar")
wrap_style = html[html.rfind('style="', 0, html.rfind('<div', 0, idx)):idx]
assert "min-height:14px" in wrap_style
# ---------- Régression : clics multipliés après un rafraîchissement de
# données (bouton +10/-10 relié à une jauge) ----------