From e1216e99d5fd281e04d64e314cf7595db7bbd586 Mon Sep 17 00:00:00 2001 From: william Date: Thu, 27 Aug 2026 11:04:13 +0200 Subject: [PATCH] =?UTF-8?q?Rend=20le=20panneau=20"Nouvel=20objet"=20compac?= =?UTF-8?q?t=20=E2=80=94=20lignes=20de=20tableau,=20pas=20des=20cartes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Chaque champ prenait une grosse carte (~250px de haut : libellés Bulma pleine taille, "Retirer ce champ" en texte) — inutilisable pour un objet à 10+ champs, ce qui est pourtant l'usage visé par ce panneau. Remplacé par une vraie ligne de tableau dense, sur le même principe que "Champs existants" dans object_edit.html (déjà compact et sobre dans le reste de l'outil) : une ligne = un champ, colonnes Nom/Type/Objet lié/Mini/Maxi/Obligatoire, action "Retirer" réduite à une icône. Les colonnes conditionnelles (Objet lié pour une relation, Mini/Maxi pour un nombre) restent TOUJOURS présentes — sans quoi les colonnes de lignes différentes ne s'aligneraient plus — seul leur contenu bascule entre le vrai champ de saisie et un espace réservé "—", au lieu de masquer toute la cellule comme avant. object_form.js adapté en conséquence : bounds désormais 2 cibles séparées (mini/maxi, chacune dans sa propre cellule) au lieu d'une seule enveloppe commune, et chaque bascule s'accompagne de celle de son espace réservé. Co-Authored-By: Claude Sonnet 5 --- static/object_form.js | 24 +++++-- templates/game_dashboard.html | 121 +++++++++++++++------------------- 2 files changed, 74 insertions(+), 71 deletions(-) diff --git a/static/object_form.js b/static/object_form.js index c0202878..5125678f 100644 --- a/static/object_form.js +++ b/static/object_form.js @@ -17,12 +17,28 @@ var NUMERIC_FIELD_TYPES = ['nombre_entier', 'nombre_decimal']; function wireRow(row) { + // Ligne de TABLEAU dense (une ligne = un champ, comme "Champs + // existants" dans object_edit.html) : "Objet lié" et "Mini"/"Maxi" + // gardent toujours leur colonne (jamais masquée, sinon les colonnes + // des différentes lignes ne s'alignent plus) — seul leur CONTENU + // bascule entre le vrai champ de saisie et un espace réservé "—" + // quand il ne s'applique pas au type choisi. var typeSelect = row.querySelector('.fieldTypeSelect'); - var relationWrap = row.querySelector('.relationTarget'); - var boundsWrap = row.querySelector('.boundsTarget'); + var relationTarget = row.querySelector('.relationTarget'); + var relationPlaceholder = row.querySelector('.relationPlaceholder'); + var boundsTargets = row.querySelectorAll('.boundsTarget'); + var boundsPlaceholders = row.querySelectorAll('.boundsPlaceholder'); + + function toggle(target, placeholder, visible) { + target.style.display = visible ? '' : 'none'; + placeholder.style.display = visible ? 'none' : ''; + } + function syncFieldTypeVisibility() { - relationWrap.style.display = typeSelect.value === 'relation' ? 'block' : 'none'; - if (boundsWrap) boundsWrap.style.display = NUMERIC_FIELD_TYPES.includes(typeSelect.value) ? 'flex' : 'none'; + var isRelation = typeSelect.value === 'relation'; + var isNumeric = NUMERIC_FIELD_TYPES.includes(typeSelect.value); + toggle(relationTarget, relationPlaceholder, isRelation); + boundsTargets.forEach(function (el, i) { toggle(el, boundsPlaceholders[i], isNumeric); }); } typeSelect.addEventListener('change', syncFieldTypeVisibility); syncFieldTypeVisibility(); diff --git a/templates/game_dashboard.html b/templates/game_dashboard.html index ee9ed1f5..5feb20a3 100644 --- a/templates/game_dashboard.html +++ b/templates/game_dashboard.html @@ -213,8 +213,11 @@ position persistée en localStorage ici, contrairement aux panneaux de l'éditeur d'écran — inutile pour un panneau ouvert ponctuellement). Contenu repris de l'ancienne page "Définir un nouvel objet" - (object_form.html, retirée) : même formulaire, même gabarit de ligne - de champ, même script (object_form.js). --> + (object_form.html, retirée), mais avec un gabarit de ligne dense — + une vraie ligne de tableau (comme "Champs existants" dans + object_edit.html) plutôt qu'une grosse carte par champ — pensé pour + ajouter beaucoup de champs d'affilée sans que le panneau explose en + hauteur. -->