From ac0f003663cd637063015b204b21263f851e04b3 Mon Sep 17 00:00:00 2001 From: william Date: Tue, 25 Aug 2026 10:31:43 +0200 Subject: [PATCH] =?UTF-8?q?Rend=20le=20tableau=20de=20bord=20du=20jeu=20pl?= =?UTF-8?q?us=20compact,=20sobre=20et=20sans=20d=C3=A9filement=20de=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Réutilise le système déjà en place pour l'édition d'objet (body.objectEditBody + .content-objectEdit) : la page occupe exactement la hauteur de la fenêtre, seules les deux colonnes défilent chacune de leur côté si besoin - plus la page elle-même, qui ne doit jamais défiler. Colonne de gauche ("Créer") : nouvelle nav à une ligne (.navRow/.navList, icône + libellé, sous-titre en info-bulle) plutôt que des cartes à deux lignes - plus dense, plus sobre. Colonne de droite ("Objets définis") : remplace les cartes par le tableau compact à en-tête collant déjà utilisé pour les champs d'un objet (.fieldsTable) - format nettement plus adapté à beaucoup de lignes. Réduit aussi le padding par défaut de .listRow/.dangerZone (encore utilisés par la page Variables), dans le même esprit. Co-Authored-By: Claude Sonnet 5 --- static/style.css | 20 ++++++++---- templates/game_dashboard.html | 59 +++++++++++++++-------------------- 2 files changed, 39 insertions(+), 40 deletions(-) diff --git a/static/style.css b/static/style.css index 7f4ddd3d..5c6677f3 100644 --- a/static/style.css +++ b/static/style.css @@ -36,24 +36,32 @@ button.danger{ color:var(--danger); border-color:rgba(226,104,95,.4); } .addBtn{ display:inline-block; margin:10px 0; padding:9px 14px; border-radius:6px; border:1px dashed var(--border); color:var(--accent); text-decoration:none; font-size:13px; } .actionsRow{ margin-top:16px; } -.list{ display:flex; flex-direction:column; gap:6px; } -.listRow{ display:block; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--panel); text-decoration:none; color:var(--text); } +.list{ display:flex; flex-direction:column; gap:4px; } +.listRow{ display:block; padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:var(--panel); text-decoration:none; color:var(--text); } .listRow:hover{ background:var(--panel2); } .listRowFlex{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .listRowFlex .rowLink{ flex:1; text-decoration:none; color:var(--text); } .listRowFlex form{ margin:0; } -.rowTitle{ font-size:14px; } -.rowSub{ font-size:11px; color:var(--text-dim); margin-top:2px; } +.rowTitle{ font-size:13px; } +.rowSub{ font-size:10.5px; color:var(--text-dim); margin-top:1px; } .rowActions{ display:flex; gap:6px; align-items:center; } +/* Nav compacte à une seule ligne (icône + libellé) — pour une liste + d'actions fixe (ex. tableau de bord d'un jeu) où le sous-titre de + .listRow prendrait trop de place utile pour rien : sobre et dense plutôt + que "carte" explicative. */ +.navList{ display:flex; flex-direction:column; gap:3px; } +.navRow{ display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:var(--panel); text-decoration:none; color:var(--text); font-size:12.5px; } +.navRow:hover{ background:var(--panel2); border-color:var(--accent); } + .hint{ font-size:11.5px; color:var(--text-dim); line-height:1.5; } .autosaveStatus{ display:inline-flex; align-items:center; gap:6px; transition:color .2s ease; } .autosaveStatus.saving{ color:var(--text-dim); } .autosaveStatus.saved{ color:#7bd88f; } .warningBanner{ border:1px solid var(--danger); background:rgba(226,104,95,.1); color:var(--text); border-radius:8px; padding:10px 14px; font-size:12.5px; margin:12px 0; } -.dangerZone{ border:1px solid rgba(226,104,95,.4); border-radius:10px; padding:14px; margin-top:20px; } -.dangerZone h3{ color:var(--danger); } +.dangerZone{ border:1px solid rgba(226,104,95,.4); border-radius:8px; padding:10px 12px; margin-top:14px; } +.dangerZone h3{ color:var(--danger); margin-top:0; } .fieldsExistingRow{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border:1px solid var(--border); border-radius:6px; margin-bottom:6px; font-size:12.5px; } .fieldsExistingRow form{ margin:0; } diff --git a/templates/game_dashboard.html b/templates/game_dashboard.html index e78f35f7..54fb5922 100644 --- a/templates/game_dashboard.html +++ b/templates/game_dashboard.html @@ -1,6 +1,7 @@ {% extends "base.html" %} {% block title %}{{ game.name }} — Forge Engine{% endblock %} -{% block content_class %}content-wide{% endblock %} +{% block content_class %}content-wide content-objectEdit{% endblock %} +{% block body_class %}objectEditBody{% endblock %} {% block breadcrumb %}
  • {{ game.name }}
    • {% endblock %} {% block content %}

    {{ game.name }}

    @@ -9,27 +10,12 @@

    Créer

    -
    - -
    🖥️ Écrans du jeu
    -
    Créer et enchaîner les écrans jouables (accueil, formulaires, scènes...)
    -     - -
    🧩 Éléments de jeu
    -
    Catalogue réutilisable (Personnage, Outil, IA...)
    -     - -
    🔧 Variables
    -
    Valeurs globales au jeu entier (ex. porte ouverte, niveau débloqué...)
    -     - -
    ▶️ Jouer
    -
    Aperçu jouable du jeu
    -     - -
    🗂️ Objet
    -
    Comme une table de base de données : un nom, et des champs typés
    -     +
    + 🖥️ Écrans du jeu + 🧩 Éléments de jeu + 🔧 Variables + ▶️ Jouer + 🗂️ Objet
    @@ -51,18 +37,23 @@

    Objets définis

    {% if definitions %} -
    - {% for d in definitions %} -
    - -
    {{ d.name }}
    -
    table SQL : {{ d.table_name }}
    -     -
    - ✏️ -
    -
    - {% endfor %} +
    + + + + + + {% for d in definitions %} + + + + + + {% endfor %} + +
    NomTable SQL
    {{ d.name }}{{ d.table_name }} + ✏️ +
    {% else %}

    Aucun objet défini pour l'instant — un objet, c'est comme une table de base de données : un nom, et des champs typés.