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/object_form.html
+66 -44
View File
@@ -1,70 +1,92 @@
{% extends "base.html" %}
{% block title %}Nouvel objet — {{ game.name }}{% endblock %}
{% block breadcrumb %}
<a class="crumb" href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a>
<span class="crumb-sep">/</span><span class="crumb">Nouvel objet</span>
<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
<li class="is-active"><a>Nouvel objet</a></li>
{% endblock %}
{% block content %}
<h1>Définir un nouvel objet</h1>
<h1 class="title">Définir un nouvel objet</h1>
<form method="post" class="card" id="objectForm">
<label for="object_name">Nom de l'objet (ex. Personnage, Niveau, Question...)</label>
<input type="text" id="object_name" name="object_name" required>
<form method="post" class="box" id="objectForm">
<div class="field">
<label class="label" for="object_name">Nom de l'objet (ex. Personnage, Niveau, Question...)</label>
<div class="control"><input class="input" type="text" id="object_name" name="object_name" required></div>
</div>
<h3>Champs</h3>
<h3 class="title is-6">Champs</h3>
<div id="fieldsList"></div>
<button type="button" class="addBtn" id="btnAddField">+ Ajouter un champ</button>
<button type="button" class="button is-outlined is-fullwidth mb-4" id="btnAddField">+ Ajouter un champ</button>
<div class="actionsRow">
<button type="submit" class="primary">Créer l'objet</button>
<div class="field">
<button type="submit" class="button is-primary">Créer l'objet</button>
</div>
</form>
<template id="fieldRowTemplate">
<div class="fieldRowCard card">
<div class="fieldRow">
<div>
<label>Nom du champ</label>
<input type="text" name="field_name[]" placeholder="ex. nom, description, pv..." required>
<div class="fieldRowCard box">
<div class="columns">
<div class="column">
<div class="field">
<label class="label">Nom du champ</label>
<div class="control"><input class="input" type="text" name="field_name[]" placeholder="ex. nom, description, pv..." required></div>
</div>
</div>
<div>
<label>Type</label>
<select name="field_type[]" class="fieldTypeSelect">
{% for key, val in field_types.items() %}
<option value="{{ key }}">{{ val.label }}</option>
{% endfor %}
</select>
<div class="column">
<div class="field">
<label class="label">Type</label>
<div class="control">
<div class="select is-fullwidth">
<select name="field_type[]" class="fieldTypeSelect">
{% for key, val in field_types.items() %}
<option value="{{ key }}">{{ val.label }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
</div>
<div class="relationTarget" style="display:none;">
<label>Objet lié</label>
<select name="field_relation[]">
{% for d in existing_definitions %}
<option value="{{ d.id }}">{{ d.name }}</option>
{% endfor %}
</select>
<div class="relationTarget field" style="display:none;">
<label class="label">Objet lié</label>
<div class="control">
<div class="select is-fullwidth">
<select name="field_relation[]">
{% for d in existing_definitions %}
<option value="{{ d.id }}">{{ d.name }}</option>
{% endfor %}
</select>
</div>
</div>
{% if not existing_definitions %}
<p class="hint">Aucun autre objet défini.</p>
<p class="help">Aucun autre objet défini.</p>
{% endif %}
</div>
<div class="boundsTarget fieldRow" style="display:none;">
<div>
<label>Valeur mini</label>
<input type="number" step="any" name="field_min[]" placeholder="ex. 0">
<div class="boundsTarget columns" style="display:none;">
<div class="column">
<div class="field">
<label class="label">Valeur mini</label>
<div class="control"><input class="input" type="number" step="any" name="field_min[]" placeholder="ex. 0"></div>
</div>
</div>
<div>
<label>Valeur maxi</label>
<input type="number" step="any" name="field_max[]" placeholder="ex. 100">
<div class="column">
<div class="field">
<label class="label">Valeur maxi</label>
<div class="control"><input class="input" type="number" step="any" name="field_max[]" placeholder="ex. 100"></div>
</div>
</div>
</div>
<div>
<label>Obligatoire ?</label>
<select name="field_required[]">
<option value="0">Non</option>
<option value="1">Oui</option>
</select>
<div class="field">
<label class="label">Obligatoire ?</label>
<div class="control">
<div class="select is-fullwidth">
<select name="field_required[]">
<option value="0">Non</option>
<option value="1">Oui</option>
</select>
</div>
</div>
</div>
<button type="button" class="smallBtn danger btnRemoveField">🗑️ Retirer ce champ</button>
<button type="button" class="button is-small is-danger btnRemoveField">🗑️ Retirer ce champ</button>
</div>
</template>