Passe toutes les pages restantes en deux colonnes (créer à gauche, contenu à droite)
Généralise le principe déjà utilisé pour le tableau de bord et l'édition
d'objet à toutes les pages restantes : liste des jeux, écrans, éléments de
jeu, variables, nouvel objet, formulaire de données, tableau des données
d'un objet - colonne de gauche pour créer/agir, colonne de droite pour ce
qui existe déjà, chaque colonne défilant pour son propre compte.
Pour un formulaire qui doit rester UN SEUL <form> à cheval sur les deux
colonnes (nouvel objet : nom à gauche, champs à droite ; formulaire de
données : bouton Enregistrer à gauche, champs à droite), nouvelle classe
.formPassthrough ("display:contents") : le <form> ne devient pas lui-même
une boîte dans la mise en page flex, seul .twoCol à l'intérieur compte.
Supprime au passage .content-page/.formScroll/body.pageBody (le gabarit à
une colonne introduit au tour précédent, plus utilisé nulle part) et
.list/.listRow/.listRowFlex/.rowTitle/.rowSub/.rowActions/.addBtn (les
cartes à deux lignes remplacées par les tableaux denses et la nav
compacte) - du CSS mort plutôt que deux systèmes qui se chevauchent.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
59247694d6
commit
2051b375ac
+59
-48
@@ -1,7 +1,7 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ 'Modifier' if row else 'Ajouter' }} — {{ definition.name }}{% endblock %}
|
||||
{% block content_class %}content-page{% endblock %}
|
||||
{% block body_class %}pageBody{% endblock %}
|
||||
{% block content_class %}content-wide content-objectEdit{% endblock %}
|
||||
{% block body_class %}objectEditBody{% endblock %}
|
||||
{% block breadcrumb %}
|
||||
<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
|
||||
<li><a href="{{ url_for('object_view', slug=game.slug, definition_id=definition.id) }}">{{ definition.name }}</a></li>
|
||||
@@ -9,56 +9,67 @@
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<h1 class="title">{{ 'Modifier l\'entrée #' ~ row.id if row else 'Ajouter une entrée' }} — {{ definition.name }}</h1>
|
||||
<p class="hint mb-4">Formulaire généré automatiquement à partir de la définition de cet objet — aucun champ n'est codé en dur ici.</p>
|
||||
|
||||
<form method="post" class="formScroll">
|
||||
<div class="scrollArea">
|
||||
{% for f in definition.fields %}
|
||||
{% set col = f.name|colname %}
|
||||
{% set current = row[col] if row else none %}
|
||||
<div class="field">
|
||||
<label class="label" for="field_{{ f.id }}">{{ f.name }}{% if f.required %} *{% endif %}</label>
|
||||
<div class="control">
|
||||
|
||||
{% if f.type == 'texte' %}
|
||||
<input class="input" type="text" id="field_{{ f.id }}" name="{{ col }}" value="{{ current or '' }}" {{ 'required' if f.required else '' }}>
|
||||
|
||||
{% elif f.type == 'texte_long' %}
|
||||
<textarea class="textarea" id="field_{{ f.id }}" name="{{ col }}" rows="4" {{ 'required' if f.required else '' }}>{{ current or '' }}</textarea>
|
||||
|
||||
{% elif f.type == 'nombre_entier' %}
|
||||
<input class="input" type="number" step="1" id="field_{{ f.id }}" name="{{ col }}" value="{{ current if current is not none else '' }}" {{ 'required' if f.required else '' }}>
|
||||
|
||||
{% elif f.type == 'nombre_decimal' %}
|
||||
<input class="input" type="number" step="any" id="field_{{ f.id }}" name="{{ col }}" value="{{ current if current is not none else '' }}" {{ 'required' if f.required else '' }}>
|
||||
|
||||
{% elif f.type == 'booleen' %}
|
||||
<label class="checkbox"><input type="checkbox" id="field_{{ f.id }}" name="{{ col }}" {{ 'checked' if current else '' }}> Oui</label>
|
||||
|
||||
{% elif f.type == 'date' %}
|
||||
<input class="input" type="date" id="field_{{ f.id }}" name="{{ col }}" value="{{ current or '' }}" {{ 'required' if f.required else '' }}>
|
||||
|
||||
{% elif f.type == 'relation' %}
|
||||
{% set current_rel = row[col ~ '_id'] if row else none %}
|
||||
<div class="select is-fullwidth">
|
||||
<select id="field_{{ f.id }}" name="{{ col }}_id" {{ 'required' if f.required else '' }}>
|
||||
<option value="">—</option>
|
||||
{% for opt in relation_options.get(f.id, []) %}
|
||||
<option value="{{ opt.id }}" {{ 'selected' if current_rel == opt.id else '' }}>{{ opt.label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
{% if not relation_options.get(f.id) %}
|
||||
<p class="help">Aucune entrée n'existe encore pour l'objet lié — crée-en une d'abord si tu veux pouvoir la sélectionner ici.</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<form method="post" class="formPassthrough">
|
||||
<div class="twoCol">
|
||||
<div class="colLeft">
|
||||
<h2>Objet</h2>
|
||||
<div class="card">
|
||||
<p class="hint">Formulaire généré automatiquement à partir de la définition de « {{ definition.name }} » — aucun champ n'est codé en dur ici.</p>
|
||||
<div class="actionsRow">
|
||||
<button type="submit" class="primary">{{ 'Enregistrer les modifications' if row else 'Enregistrer en base' }}</button>
|
||||
</div>
|
||||
<p class="hint" style="margin-top:10px;"><a href="{{ url_for('object_view', slug=game.slug, definition_id=definition.id) }}">← Retour à « {{ definition.name }} »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="actionsRow">
|
||||
<button type="submit" class="primary">{{ 'Enregistrer les modifications' if row else 'Enregistrer en base' }}</button>
|
||||
<div class="colRight">
|
||||
<h2>Champs</h2>
|
||||
<div class="fieldsTableWrap" style="padding:10px;">
|
||||
{% for f in definition.fields %}
|
||||
{% set col = f.name|colname %}
|
||||
{% set current = row[col] if row else none %}
|
||||
<div class="field">
|
||||
<label class="label" for="field_{{ f.id }}">{{ f.name }}{% if f.required %} *{% endif %}</label>
|
||||
<div class="control">
|
||||
|
||||
{% if f.type == 'texte' %}
|
||||
<input class="input" type="text" id="field_{{ f.id }}" name="{{ col }}" value="{{ current or '' }}" {{ 'required' if f.required else '' }}>
|
||||
|
||||
{% elif f.type == 'texte_long' %}
|
||||
<textarea class="textarea" id="field_{{ f.id }}" name="{{ col }}" rows="4" {{ 'required' if f.required else '' }}>{{ current or '' }}</textarea>
|
||||
|
||||
{% elif f.type == 'nombre_entier' %}
|
||||
<input class="input" type="number" step="1" id="field_{{ f.id }}" name="{{ col }}" value="{{ current if current is not none else '' }}" {{ 'required' if f.required else '' }}>
|
||||
|
||||
{% elif f.type == 'nombre_decimal' %}
|
||||
<input class="input" type="number" step="any" id="field_{{ f.id }}" name="{{ col }}" value="{{ current if current is not none else '' }}" {{ 'required' if f.required else '' }}>
|
||||
|
||||
{% elif f.type == 'booleen' %}
|
||||
<label class="checkbox"><input type="checkbox" id="field_{{ f.id }}" name="{{ col }}" {{ 'checked' if current else '' }}> Oui</label>
|
||||
|
||||
{% elif f.type == 'date' %}
|
||||
<input class="input" type="date" id="field_{{ f.id }}" name="{{ col }}" value="{{ current or '' }}" {{ 'required' if f.required else '' }}>
|
||||
|
||||
{% elif f.type == 'relation' %}
|
||||
{% set current_rel = row[col ~ '_id'] if row else none %}
|
||||
<div class="select is-fullwidth">
|
||||
<select id="field_{{ f.id }}" name="{{ col }}_id" {{ 'required' if f.required else '' }}>
|
||||
<option value="">—</option>
|
||||
{% for opt in relation_options.get(f.id, []) %}
|
||||
<option value="{{ opt.id }}" {{ 'selected' if current_rel == opt.id else '' }}>{{ opt.label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
{% if not relation_options.get(f.id) %}
|
||||
<p class="help">Aucune entrée n'existe encore pour l'objet lié — crée-en une d'abord si tu veux pouvoir la sélectionner ici.</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user