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
+78
-68
@@ -1,7 +1,7 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ definition.name }} — {{ game.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 class="is-active"><a>{{ definition.name }}</a></li>
|
||||
@@ -28,74 +28,84 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<a class="addBtn" href="{{ url_for('data_new', slug=game.slug, definition_id=definition.id) }}">+ Ajouter une entrée</a>
|
||||
|
||||
<h2>Données enregistrées</h2>
|
||||
<div class="scrollArea">
|
||||
{% if rows %}
|
||||
{% macro row_field_display(f, r) %}
|
||||
{%- if f.type == 'relation' -%}
|
||||
{{ relation_labels.get(f.id, {}).get(r[(f.name|colname) ~ '_id'], '—') }}
|
||||
{%- elif f.type == 'booleen' -%}
|
||||
{{ 'Oui' if r[f.name|colname] else 'Non' }}
|
||||
{%- else -%}
|
||||
{{ r[f.name|colname] }}
|
||||
{%- endif -%}
|
||||
{% endmacro %}
|
||||
<div class="fieldsTableWrap">
|
||||
<table class="table is-fullwidth is-hoverable dataTable fieldsTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
{% for f in definition.fields %}<th>{{ f.name }}</th>{% endfor %}
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for r in rows %}
|
||||
<tr>
|
||||
<td>{{ r.id }}</td>
|
||||
{% for f in definition.fields %}
|
||||
<td>{{ row_field_display(f, r) }}</td>
|
||||
{% endfor %}
|
||||
<td>
|
||||
<div class="buttons is-inline-flex are-small">
|
||||
<button type="button" class="button is-small" title="Voir cette entrée en détail" onclick="openRowDetail({{ r.id }})">👁️</button>
|
||||
<a class="button is-small" href="{{ url_for('data_edit', slug=game.slug, definition_id=definition.id, row_id=r.id) }}">✏️</a>
|
||||
<form method="post" action="{{ url_for('data_delete', slug=game.slug, definition_id=definition.id, row_id=r.id) }}"
|
||||
onsubmit="return confirm('Supprimer définitivement l\'entrée #{{ r.id }} ?');">
|
||||
<button type="submit" class="button is-small is-danger">🗑️</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% for r in rows %}
|
||||
<div class="modal" id="rowDetail{{ r.id }}">
|
||||
<div class="modal-background" onclick="closeRowDetail({{ r.id }})"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Entrée #{{ r.id }}</p>
|
||||
<button class="delete" aria-label="Fermer" onclick="closeRowDetail({{ r.id }})"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
{% for f in definition.fields %}
|
||||
<div class="rowDetailField">
|
||||
<div class="rowDetailLabel">{{ f.name }}</div>
|
||||
<div class="rowDetailValue">{{ row_field_display(f, r) }}</div>
|
||||
<div class="twoCol">
|
||||
<div class="colLeft">
|
||||
<h2>Ajouter</h2>
|
||||
<div class="card">
|
||||
<p class="hint">Une entrée, c'est une ligne de la table SQL « {{ definition.table_name }} ».</p>
|
||||
<div class="actionsRow">
|
||||
<a class="button is-primary is-outlined is-fullwidth" href="{{ url_for('data_new', slug=game.slug, definition_id=definition.id) }}">+ Ajouter une entrée</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="colRight">
|
||||
<h2>Données enregistrées</h2>
|
||||
{% if rows %}
|
||||
{% macro row_field_display(f, r) %}
|
||||
{%- if f.type == 'relation' -%}
|
||||
{{ relation_labels.get(f.id, {}).get(r[(f.name|colname) ~ '_id'], '—') }}
|
||||
{%- elif f.type == 'booleen' -%}
|
||||
{{ 'Oui' if r[f.name|colname] else 'Non' }}
|
||||
{%- else -%}
|
||||
{{ r[f.name|colname] }}
|
||||
{%- endif -%}
|
||||
{% endmacro %}
|
||||
<div class="fieldsTableWrap">
|
||||
<table class="table is-fullwidth is-hoverable dataTable fieldsTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
{% for f in definition.fields %}<th>{{ f.name }}</th>{% endfor %}
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for r in rows %}
|
||||
<tr>
|
||||
<td>{{ r.id }}</td>
|
||||
{% for f in definition.fields %}
|
||||
<td>{{ row_field_display(f, r) }}</td>
|
||||
{% endfor %}
|
||||
<td>
|
||||
<div class="buttons is-inline-flex are-small">
|
||||
<button type="button" class="button is-small" title="Voir cette entrée en détail" onclick="openRowDetail({{ r.id }})">👁️</button>
|
||||
<a class="button is-small" href="{{ url_for('data_edit', slug=game.slug, definition_id=definition.id, row_id=r.id) }}">✏️</a>
|
||||
<form method="post" action="{{ url_for('data_delete', slug=game.slug, definition_id=definition.id, row_id=r.id) }}"
|
||||
onsubmit="return confirm('Supprimer définitivement l\'entrée #{{ r.id }} ?');">
|
||||
<button type="submit" class="button is-small is-danger">🗑️</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% for r in rows %}
|
||||
<div class="modal" id="rowDetail{{ r.id }}">
|
||||
<div class="modal-background" onclick="closeRowDetail({{ r.id }})"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Entrée #{{ r.id }}</p>
|
||||
<button class="delete" aria-label="Fermer" onclick="closeRowDetail({{ r.id }})"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
{% for f in definition.fields %}
|
||||
<div class="rowDetailField">
|
||||
<div class="rowDetailLabel">{{ f.name }}</div>
|
||||
<div class="rowDetailValue">{{ row_field_display(f, r) }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p class="hint">Aucune donnée enregistrée pour l'instant.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p class="hint">Aucune donnée enregistrée pour l'instant.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user