Make Jauge, Onglets, and every form-field widget real native Bulma elements
- Jauge now renders a real <progress class="progress"> instead of a hand-built pair of absolutely-positioned divs. The bas/haut color interpolation still works, set via Bulma's own --bulma-progress-value-background-color CSS custom property rather than fighting the class. - Onglets' tab strip is now genuine Bulma tabs markup (tabs > ul > li, is-active on the li) instead of custom forgeTabBar/forgeTabBtn classes; forgeShowTab (duplicated in screen_edit.html and play.html) now toggles is-active to match. - Champ texte/email/mot de passe get class="input", Zone de texte gets class="textarea", Case à cocher/Bouton radio's existing <label> wrapper gets class="checkbox"/"radio" (Bulma's own convention — the structure already matched, just needed the class), Liste déroulante is wrapped in Bulma's required <div class="select"> (a bare class on the <select> itself has zero effect in Bulma), Tableau gets class="table is-bordered is-fullwidth" with the per-cell inline borders removed so Bulma's own table styling applies. - Removed the now-dead .forgeTabBar/.forgeTabBtn CSS. Updated tests/test_jauge.py and tests/test_onglets_widget.py assertions to match the new markup (value="X" attribute instead of width:X% inline style, --bulma-progress-value-background-color instead of background-color, forgeShowTab(this) marker instead of the removed forgeTabBtn class) — same behavior, different rendering mechanism. Full suite green (89 passed), verified end to end against the real "test" project via the actual /play route.
This commit is contained in:
@@ -38,10 +38,14 @@ def _render_onglets(el, meta, slug, children_map=None, ctx=None, parent_flex_dir
|
||||
active = i == 0
|
||||
tab_html = render_element_html(tab, slug, children_map, ctx, parent_flex_direction=flex_dir)
|
||||
target_id = f"tabpanel-{tab['id']}"
|
||||
# <li> Bulma natif ("tabs" > "ul" > "li", "is-active" sur le <li> —
|
||||
# pas le <a> — pour l'onglet en cours) : le <li> porte le clic ET les
|
||||
# data-attributes ciblés par forgeShowTab (voir screen_edit.html /
|
||||
# play.html), le <a> imbriqué n'est là que pour le rendu visuel Bulma.
|
||||
bar_items.append(
|
||||
f'<button type="button" class="forgeTabBtn{" active" if active else ""}" '
|
||||
f'<li class="{"is-active" if active else ""}" '
|
||||
f'data-tab-btn="{group_id}" data-tab-target="{target_id}" '
|
||||
f'onclick="forgeShowTab(this)">{html_lib.escape(str(label))}</button>'
|
||||
f'onclick="forgeShowTab(this)"><a>{html_lib.escape(str(label))}</a></li>'
|
||||
)
|
||||
hidden_style = "" if active else ' style="display:none;"'
|
||||
panels.append(
|
||||
@@ -51,7 +55,7 @@ def _render_onglets(el, meta, slug, children_map=None, ctx=None, parent_flex_dir
|
||||
|
||||
return (
|
||||
f'<div {_attr_string(attrs, style)}>'
|
||||
f'<div class="forgeTabBar">{"".join(bar_items)}</div>'
|
||||
f'<div class="tabs"><ul>{"".join(bar_items)}</ul></div>'
|
||||
f'<div class="forgeTabPanels" style="flex:1 1 auto; min-height:0;">{"".join(panels)}</div>'
|
||||
f"</div>"
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user