Reskin the whole admin UI (not just game widgets) with Bulma

Loads Bulma 1.0.2 in base.html (data-theme="dark" for its native dark palette) for every page that extends it, plus play.html directly. Converts every admin template — index, game dashboard, screens list, element types, object new/edit, data form/list — to real Bulma markup: navbar, breadcrumb component, box/card, field/control/input/select, table, notification, buttons, and a native Bulma modal for the data-row detail popup. Forge's own style.css keeps only what Bulma doesn't cover (the fixed-viewport builder/object-edit layouts, the element tree, canvas, flow-graph editor) and now acts as a secondary/override layer rather than a competing design system, matching how per-element inline customization already overrides widget defaults.

screen_edit.html (the 3-panel screen builder) gets the same navbar/breadcrumb/button treatment plus its top rename form, but its flow-graph node editor, canvas and element tree keep their existing custom styling — several of their inputs have JS relying on exact DOM sibling structure (e.g. slider oninput reading nextElementSibling) or Bulma's own select/wrapper requirement, and reskinning them without a browser to verify against risked silently breaking the app's most complex feature. Buttons and headings there are still fully converted (safe, purely additive class changes).

Verified: full test suite green, every route smoke-rendered 200 OK via the test client after the change.
This commit is contained in:
william
2026-08-24 13:19:02 +02:00
parent 38f33d88d9
commit 25a331830b
11 changed files with 454 additions and 352 deletions
+15 -5
View File
@@ -1,17 +1,27 @@
<!DOCTYPE html>
<html lang="fr">
<html lang="fr" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Forge Engine{% endblock %}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
{% block extra_head %}{% endblock %}
</head>
<body class="{% block body_class %}{% endblock %}">
<header class="topbar">
<a href="{{ url_for('index') }}" class="brand">🛠️ Forge Engine</a>
{% block breadcrumb %}{% endblock %}
</header>
<nav class="navbar topbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a href="{{ url_for('index') }}" class="navbar-item brand"><strong>🛠️ Forge Engine</strong></a>
</div>
</nav>
{% block breadcrumb_wrap %}
<nav class="breadcrumb breadcrumbBar" aria-label="breadcrumbs">
<ul>
<li><a href="{{ url_for('index') }}">🛠️ Mes jeux</a></li>
{% block breadcrumb %}{% endblock %}
</ul>
</nav>
{% endblock %}
<main class="content {% block content_class %}{% endblock %}">
{% block content %}{% endblock %}
</main>