diff --git a/static/style.css b/static/style.css index f1cf730a..7aed9c80 100644 --- a/static/style.css +++ b/static/style.css @@ -67,14 +67,46 @@ button.danger{ color:var(--danger); border-color:rgba(226,104,95,.4); } .twoCol{ display:flex; gap:24px; align-items:flex-start; margin-top:10px; } .twoCol .colLeft{ flex:0 0 340px; } .twoCol .colRight{ flex:1; min-width:0; } -.fieldEditCard{ display:flex; flex-direction:column; gap:10px; } -.fieldEditCard input[disabled]{ color:var(--text-dim); opacity:.8; } -.fieldEditActions{ margin-top:6px; } @media (max-width: 820px){ .twoCol{ flex-direction:column; } .twoCol .colLeft{ flex:none; width:100%; } + /* En dessous de 820px, les deux colonnes s'empilent : le défilement + interne séparé par colonne n'a plus de sens (il n'y a plus qu'une + colonne) — on revient à une page classique qui défile normalement, + comme pour l'éditeur d'écran ci-dessous. */ + body.objectEditBody{ height:auto; overflow:visible; } + body.objectEditBody > main.content{ overflow:visible; } + .content-objectEdit .colLeft, .content-objectEdit .colRight{ height:auto; overflow:visible; } + .fieldsTableWrap{ max-height:60vh; } } +/* ---------- Modifier un objet : tableau des champs existants ---------- */ +/* Comme l'éditeur d'écran (body.builderBody, plus bas) : la page ne défile + jamais elle-même, seules les zones internes (colonne de gauche, tableau + des champs) défilent chacune de leur côté — indispensable dès qu'un objet + 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{ 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; } +.content-objectEdit > h1, .content-objectEdit > .hint, .content-objectEdit > form{ flex:0 0 auto; } +.content-objectEdit .twoCol{ flex:1 1 auto; min-height:0; align-items:stretch; } +.content-objectEdit .colLeft{ overflow-y:auto; height:100%; } +.content-objectEdit .colRight{ display:flex; flex-direction:column; min-height:0; height:100%; } +.content-objectEdit .colRight h2{ flex:0 0 auto; } +.content-objectEdit .colRight > .hint{ flex:0 0 auto; } + +.fieldsTableWrap{ flex:1 1 auto; min-height:0; overflow:auto; border:1px solid var(--border); border-radius:8px; } +.fieldsTable{ width:100%; border-collapse:collapse; font-size:12.5px; } +.fieldsTable th, .fieldsTable td{ border-bottom:1px solid var(--border); padding:8px 10px; text-align:left; white-space:nowrap; } +.fieldsTable th{ position:sticky; top:0; background:var(--panel2); color:var(--text-dim); z-index:1; } +.fieldsTable tbody tr:hover{ background:rgba(255,255,255,.02); } +.fieldsTable tbody tr:last-child td{ border-bottom:none; } +.fieldsTable td input, .fieldsTable td select{ min-width:120px; width:auto; } +.fieldsTableActions{ display:flex; gap:6px; } + /* ---------- Éditeur d'écrans (façon Elementor/Bricks) ---------- */ /* La page de l'éditeur d'écran ne doit jamais défiler elle-même : elle occupe exactement la hauteur de la fenêtre (topbar + zone de travail), et diff --git a/templates/object_edit.html b/templates/object_edit.html index 4d9ca16e..09d85ca0 100644 --- a/templates/object_edit.html +++ b/templates/object_edit.html @@ -1,6 +1,7 @@ {% extends "base.html" %} {% block title %}Modifier {{ definition.name }} — {{ game.name }}{% endblock %} -{% block content_class %}content-wide{% endblock %} +{% block content_class %}content-wide content-objectEdit{% endblock %} +{% block body_class %}objectEditBody{% endblock %} {% block breadcrumb %} {{ game.name }} / @@ -82,54 +83,69 @@

Champs existants

{% if definition.fields %} {% for f in definition.fields %} -
-
-
-
- - -
-
- - -
-
- {% if f.type == 'relation' %} - - - {% endif %} - {% if f.type in ('nombre_entier', 'nombre_decimal') %} -
-
- - -
-
- - -
-
-

Laisser vide = pas de limite. S'applique à "Donner cette valeur", "Augmenter de..." et "Diminuer de..." dans le graphe de logique.

- {% endif %} - - -
- -
-
-
- -
-
+
+
{% endfor %} +
+ + + + + + + + + + + + + + {% for f in definition.fields %} + + + + + + + + + + {% endfor %} + +
Nom du champTypeObjet liéMiniMaxiObligatoire ?
{{ field_types.get(f.type, {}).get('label', f.type) }} + {% if f.type == 'relation' %} + + {% else %} + — + {% endif %} + + {% if f.type in ('nombre_entier', 'nombre_decimal') %} + + {% else %} + — + {% endif %} + + {% if f.type in ('nombre_entier', 'nombre_decimal') %} + + {% else %} + — + {% endif %} + + + + + +
+
+

Mini/Maxi (bornage automatique) : laisser vide = pas de limite. S'applique à "Donner cette valeur", "Augmenter de..." et "Diminuer de..." dans le graphe de logique.

{% else %}

Aucun champ pour l'instant.

{% endif %}