Ajoute une barre de navigation persistante entre les éditeurs d'un jeu

Jusqu'ici, les liens vers les différents éditeurs d'un jeu (Écrans,
Éléments de jeu, Variables, Jouer, Objet) n'existaient que dans le
panneau "Créer" du tableau de bord (game_dashboard.html) — changer
d'éditeur obligeait à revenir sur cette page à chaque fois.

base.html expose désormais une 2e barre (.gameNavBar), sous la barre
"Forge Engine" et au-dessus du fil d'Ariane, reprenant ces mêmes 5
liens — visible sur TOUTE page qui met un `game` dans le contexte du
template (déjà fait par chaque route pour le fil d'Ariane, donc aucun
changement de route nécessaire), absente sur l'accueil (liste des jeux,
pas de jeu courant). L'onglet correspondant à la section actuelle est
mis en évidence via un simple préfixe sur request.path.

static/style.css : nouvelle barre en ligne (contrairement à .navList/
.navRow, empilés verticalement dans le panneau "Créer" du tableau de
bord, réutilisés tels quels ailleurs). Ajoutée aux règles flex:0 0 auto
de body.objectEditBody/body.builderBody (mise en page plein-écran des
éditeurs) aux côtés de .topbar/.breadcrumbBar, sans quoi elle aurait
cassé la répartition de hauteur figée de ces pages.

Vérifié en rendant plusieurs routes via le client de test Flask : barre
absente sur l'accueil, présente partout ailleurs (tableau de bord, liste
des écrans, éditeur d'écran normal ET d'écran-modèle, éléments de jeu,
variables, nouvel objet).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-08-27 09:20:05 +02:00
co-authored by Claude Sonnet 5
parent ffedb16d8a
commit de89115534
2 changed files with 28 additions and 2 deletions
+11 -2
View File
@@ -20,6 +20,15 @@ input[type=checkbox]{ width:auto; margin-top:6px; }
les rattacher au thème sombre. */
.topbar{ border-bottom:1px solid var(--border); }
.breadcrumbBar{ padding:10px 20px; background:transparent; border-bottom:1px solid var(--border); margin-bottom:0; }
/* Barre de navigation d'UN JEU (voir base.html) — toujours visible entre
les différents éditeurs d'un même jeu, en ligne (contrairement à
.navList/.navRow ci-dessous, empilés verticalement dans le panneau
"Créer" du tableau de bord). */
.gameNavBar{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 20px; background:transparent; border-bottom:1px solid var(--border); }
.gameNavLink{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:6px; background:var(--panel); text-decoration:none; color:var(--text); font-size:12.5px; }
.gameNavLink:hover{ background:var(--panel2); border-color:var(--accent); }
.gameNavLink.active{ background:var(--panel2); border-color:var(--accent); color:var(--accent); }
.content{ max-width:760px; margin:0 auto; padding:28px 20px; }
.card{ border:1px solid var(--border); border-radius:10px; padding:16px; background:var(--panel); margin:12px 0; }
@@ -96,7 +105,7 @@ button.danger{ color:var(--danger); border-color:rgba(226,104,95,.4); }
a beaucoup de champs, pour garder une vue d'ensemble sans perdre le
formulaire "Ajouter un champ" hors de l'écran. */
body.objectEditBody{ display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; }
body.objectEditBody > .topbar, body.objectEditBody > .breadcrumbBar{ flex:0 0 auto; }
body.objectEditBody > .topbar, body.objectEditBody > .gameNavBar, body.objectEditBody > .breadcrumbBar{ flex:0 0 auto; }
body.objectEditBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.content-objectEdit{ width:100%; display:flex; flex-direction:column; min-height:0; }
@@ -131,7 +140,7 @@ body.objectEditBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden
ce sont les zones internes (panneaux, écran, panneau de logique) qui
défilent chacune de leur côté si besoin. */
body.builderBody{ display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; }
body.builderBody > .topbar, body.builderBody > .breadcrumbBar{ flex:0 0 auto; }
body.builderBody > .topbar, body.builderBody > .gameNavBar, body.builderBody > .breadcrumbBar{ flex:0 0 auto; }
body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.content-builder{
+17
View File
@@ -14,6 +14,23 @@
<a href="{{ url_for('index') }}" class="navbar-item brand"><strong>🛠️ Forge Engine</strong></a>
</div>
</nav>
{% if game is defined and game %}
<!-- Barre toujours visible entre les différents éditeurs d'UN MÊME jeu (voir
"Créer" sur game_dashboard.html, dont elle reprend exactement les
liens) — sans elle, changer d'éditeur (écrans, éléments de jeu,
variables, objets) obligeait à repasser par le tableau de bord du jeu à
chaque fois. N'apparaît que si la route a mis un `game` dans le
contexte du template (toutes les pages d'un jeu le font déjà, pour la
miette de pain) — absente sur l'accueil (liste des jeux), où il n'y a
pas de jeu courant. -->
<nav class="gameNavBar" aria-label="Navigation du jeu">
<a href="{{ url_for('screens_list', slug=game.slug) }}" class="gameNavLink {{ 'active' if request.path.startswith('/game/' ~ game.slug ~ '/screens') else '' }}" title="Créer et enchaîner les écrans jouables">🖥️ Écrans du jeu</a>
<a href="{{ url_for('element_types', slug=game.slug) }}" class="gameNavLink {{ 'active' if request.path.startswith('/game/' ~ game.slug ~ '/element-types') else '' }}" title="Catalogue réutilisable (Personnage, Outil, IA...)">🧩 Éléments de jeu</a>
<a href="{{ url_for('game_variables', slug=game.slug) }}" class="gameNavLink {{ 'active' if request.path.startswith('/game/' ~ game.slug ~ '/variables') else '' }}" title="Valeurs globales au jeu entier">🔧 Variables</a>
<a href="{{ url_for('game_play', slug=game.slug) }}" target="_blank" class="gameNavLink" title="Aperçu jouable du jeu">▶️ Jouer</a>
<a href="{{ url_for('object_new', slug=game.slug) }}" class="gameNavLink {{ 'active' if request.path.startswith('/game/' ~ game.slug ~ '/objects') else '' }}" title="Comme une table de base de données : un nom, et des champs typés">🗂️ Objet</a>
</nav>
{% endif %}
{% block breadcrumb_wrap %}
<nav class="breadcrumb breadcrumbBar" aria-label="breadcrumbs">
<ul>