Forge-Store/Forge-Engine
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+33 -20
View File
@@ -1,34 +1,47 @@
{% extends "base.html" %}
{% block title %}Forge Engine — Mes jeux{% endblock %}
{% block breadcrumb_wrap %}{% endblock %}
{% block content %}
<h1>Mes jeux</h1>
<h1 class="title">Mes jeux</h1>
<form method="post" action="{{ url_for('games_new') }}" class="card inline-form">
<label for="name">Nom du nouveau jeu</label>
<div class="fieldRow">
<input type="text" id="name" name="name" placeholder="ex. CyberQuest RGPD" required>
<button type="submit" class="primary">+ Créer le jeu</button>
<form method="post" action="{{ url_for('games_new') }}" class="box">
<div class="field">
<label class="label" for="name">Nom du nouveau jeu</label>
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" type="text" id="name" name="name" placeholder="ex. CyberQuest RGPD" required>
</div>
<div class="control">
<button type="submit" class="button is-primary">+ Créer le jeu</button>
</div>
</div>
<p class="help">Crée un dossier avec index.html / index.css / index.js reliés entre eux, et une base de données dédiée à ce jeu.</p>
</div>
<p class="hint">Crée un dossier avec index.html / index.css / index.js reliés entre eux, et une base de données dédiée à ce jeu.</p>
</form>
<h2>Jeux existants</h2>
<h2 class="subtitle">Jeux existants</h2>
{% if games %}
<div class="list">
<div class="table-container">
<table class="table is-fullwidth is-hoverable">
<tbody>
{% for g in games %}
<div class="listRow listRowFlex">
<a class="rowLink" href="{{ url_for('game_dashboard', slug=g.slug) }}">
<div class="rowTitle">{{ g.name }}</div>
<div class="rowSub">projects/{{ g.slug }}/</div>
</a>
<form method="post" action="{{ url_for('game_delete', slug=g.slug) }}"
onsubmit="return confirm('Supprimer définitivement le jeu « {{ g.name }} » et tout son contenu (dossier + base de données) ?');">
<button type="submit" class="smallBtn danger" title="Supprimer ce jeu">🗑️</button>
</form>
</div>
<tr>
<td class="is-vcentered">
<a href="{{ url_for('game_dashboard', slug=g.slug) }}" class="has-text-weight-semibold">{{ g.name }}</a>
<br><span class="is-size-7 has-text-grey">projects/{{ g.slug }}/</span>
</td>
<td class="is-vcentered has-text-right">
<form method="post" action="{{ url_for('game_delete', slug=g.slug) }}" class="is-inline-block"
onsubmit="return confirm('Supprimer définitivement le jeu « {{ g.name }} » et tout son contenu (dossier + base de données) ?');">
<button type="submit" class="button is-small is-danger" title="Supprimer ce jeu">🗑️</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p class="hint">Aucun jeu pour l'instant — crée le premier ci-dessus.</p>
<p class="help">Aucun jeu pour l'instant — crée le premier ci-dessus.</p>
{% endif %}
{% endblock %}