Corrige la nav pjax, panneau déplaçable/redimensionnable pour éditer un objet
1) Bug pjax trouvé : swapDocument() cherchait "header.topbar", qui n'a jamais existé (c'est un <nav>, pas un <header>) — la barre de navigation du jeu (ajoutée après pjax.js) n'était donc jamais mise à jour pendant une navigation pjax : absente en arrivant sur un jeu sans Ctrl+F5, et inversement laissée en place en revenant sur l'accueil où elle n'a rien à faire. Fix : tout ce qui est hors <main> mais doit changer d'une page à l'autre (topbar + barre du jeu) est regroupé dans un nouveau conteneur stable #pageChrome, que pjax.js remplace en bloc — plus fiable qu'un sélecteur qui ne correspondait à rien. CSS (flex:0 0 auto des layouts plein-écran) mis à jour en conséquence. 2) Renommages demandés : onglet/panneau "Écrans du jeu" -> "Écrants", "Éléments de jeu" -> "Templates" (tab, titre de panneau, bouton "+ Créer un template", état vide, infobulle, confirmation de suppression). 3) Le crayon ✏️ sur une ligne d'objet ouvre désormais un panneau déplaçable ET redimensionnable (nouveau coin de redimensionnement générique, .floatPanelResizeHandle) au lieu de naviguer vers object_edit.html (retirée) — un panneau par objet, pré-rendu et caché par défaut. Reprend telles quelles les fonctionnalités de l'ancienne page : renommer l'objet, ajouter un champ (ligne compacte), modifier/supprimer un champ existant (tableau dense déjà repris pour "Nouvel objet"), supprimer l'objet. Les routes de champs (object_field_ add/edit/delete) et object_edit lui-même redirigent maintenant vers le tableau de bord avec ?edit=<id>, pour rouvrir automatiquement le bon panneau après l'action plutôt que de le fermer silencieusement. makeFloatPanelDraggable()/makeFloatPanelResizable() généralisées pour être partagées entre "Nouvel objet" et les panneaux d'édition, plutôt que du code dupliqué par panneau. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
e1216e99d5
commit
b8dfdcb205
+7
-6
@@ -5,8 +5,9 @@
|
||||
* générées en Jinja) — on intercepte simplement chaque clic sur un lien
|
||||
* interne et chaque soumission de formulaire interne, on va chercher la
|
||||
* page suivante nous-mêmes en arrière-plan (fetch), et on ne remplace que
|
||||
* <title>, la classe du <body>, l'en-tête (fil d'Ariane) et le contenu
|
||||
* principal (<main>) — au lieu de laisser le navigateur tout recharger.
|
||||
* <title>, la classe du <body>, #pageChrome (topbar + barre de navigation
|
||||
* du jeu, voir base.html) et le contenu principal (<main>) — au lieu de
|
||||
* laisser le navigateur tout recharger.
|
||||
* L'URL affichée et l'historique (bouton "précédent") restent corrects
|
||||
* grâce à history.pushState/popstate.
|
||||
*
|
||||
@@ -77,10 +78,10 @@
|
||||
currentMain.className = newMain.className;
|
||||
currentMain.innerHTML = newMain.innerHTML;
|
||||
|
||||
var newHeader = doc.querySelector("header.topbar");
|
||||
var currentHeader = document.querySelector("header.topbar");
|
||||
if (newHeader && currentHeader) {
|
||||
currentHeader.innerHTML = newHeader.innerHTML;
|
||||
var newChrome = doc.querySelector("#pageChrome");
|
||||
var currentChrome = document.querySelector("#pageChrome");
|
||||
if (newChrome && currentChrome) {
|
||||
currentChrome.innerHTML = newChrome.innerHTML;
|
||||
}
|
||||
|
||||
mergeHeadAssets(doc.head);
|
||||
|
||||
+10
-2
@@ -104,7 +104,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 > .gameNavBar{ flex:0 0 auto; }
|
||||
body.objectEditBody > #pageChrome{ 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; }
|
||||
@@ -139,7 +139,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 > .gameNavBar{ flex:0 0 auto; }
|
||||
body.builderBody > #pageChrome{ flex:0 0 auto; }
|
||||
body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
|
||||
|
||||
.content-builder{
|
||||
@@ -190,6 +190,14 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
|
||||
box-shadow:0 12px 40px rgba(0,0,0,.55);
|
||||
}
|
||||
.floatPanel.hidden{ display:none; }
|
||||
/* Coin de redimensionnement (voir wireFloatPanelResize() dans
|
||||
game_dashboard.html) — un panneau devient redimensionnable simplement en
|
||||
lui ajoutant ce coin, JS mis à part rien d'autre à faire côté CSS. */
|
||||
.floatPanelResizeHandle{
|
||||
position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize;
|
||||
background:linear-gradient(135deg, transparent 50%, var(--border) 50%, var(--border) 60%, transparent 60%, transparent 70%, var(--border) 70%, var(--border) 80%, transparent 80%);
|
||||
border-radius:0 0 10px 0;
|
||||
}
|
||||
.floatPanel--left{ left:24px; width:280px; }
|
||||
.floatPanel--right{ right:24px; width:340px; }
|
||||
.floatPanel--center{ left:50%; width:560px; max-width:calc(100vw - 48px); transform:translateX(-50%); }
|
||||
|
||||
Reference in New Issue
Block a user