From dae6da166e38e49d232733dca8349b669e264129 Mon Sep 17 00:00:00 2001 From: william Date: Tue, 25 Aug 2026 11:38:29 +0200 Subject: [PATCH] =?UTF-8?q?=C3=89diteur=20de=20sc=C3=A8ne=20:=20supprime?= =?UTF-8?q?=20le=20fil=20d'Ariane,=20canevas=20remont=C3=A9,=20d=C3=A9file?= =?UTF-8?q?ment=20propre=20au=20canevas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Le fil d'Ariane disparaît entièrement sur cette page (breadcrumb_wrap vide) - le nom de l'écran est de toute façon déjà éditable juste au-dessus, dans le panneau "Éléments" (voir le tour précédent) - et .content-builder perd son padding par défaut hérité de .content, pour que le canevas commence le plus haut possible. Change aussi la façon dont le canevas est dimensionné : il était jusqu'ici contraint par la LARGEUR (width:100%), ce qui pouvait le rendre bien plus haut que la fenêtre pour un format Portrait - obligeant à défiler .builderCanvasArea (toolbar/onglets compris) pour voir le bas de l'écran. Il est maintenant contraint par la HAUTEUR disponible (height:100%, la largeur se déduisant de l'aspect-ratio), avec max-width:100% en secours si c'est la largeur qui manque en premier - l'écran entier reste donc visible sans défiler. Le défilement, s'il reste nécessaire (fenêtre très basse), se fait maintenant sur .canvasFrame lui-même, jamais sur .builderCanvasArea (repassé à overflow:hidden) : la barre d'onglets et la barre d'outils restent toujours fixes en haut. Ajoute le pendant pour le repli en page empilée (< 1300px, une seule colonne) : le "letterboxing" par hauteur suppose une chaîne de hauteurs définies qui n'existe plus une fois empilé - revient alors à un dimensionnement par largeur, cohérent avec une page qui défile normalement. Co-Authored-By: Claude Sonnet 5 --- static/style.css | 39 ++++++++++++++++++++++++++++++++++---- templates/screen_edit.html | 9 ++++----- 2 files changed, 39 insertions(+), 9 deletions(-) diff --git a/static/style.css b/static/style.css index 9bda1b28..f282a292 100644 --- a/static/style.css +++ b/static/style.css @@ -148,13 +148,23 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d l'espace restant une fois "max-width" atteint, comme voulu à l'origine. */ width:100%; max-width:1600px; + /* Sans fil d'Ariane sur cette page (voir breadcrumb_wrap dans + screen_edit.html), .content garde quand même son padding par défaut + (28px en haut) — réduit ici pour que le canevas commence le plus haut + possible sur la page. */ + padding:10px 20px 8px; } /* 3 colonnes : ajout d'éléments (gauche) / écran en grand (centre) / propriétés (droite) — toutes les trois occupent exactement la même hauteur (celle qui reste disponible), avec leur propre défilement interne si leur contenu dépasse. */ -.builder3{ display:flex; gap:20px; align-items:stretch; margin-top:14px; flex:1 1 auto; min-height:0; } -.builderCanvasArea{ flex:1 1 auto; min-width:0; height:100%; overflow-y:auto; display:flex; flex-direction:column; } +.builder3{ display:flex; gap:20px; align-items:stretch; margin-top:8px; flex:1 1 auto; min-height:0; } +/* overflow:hidden (pas auto) : le défilement doit se faire DANS le + canevas lui-même (voir .canvasFrame plus bas) ou dans l'onglet actif + (.flowCanvasWrap/.animTimelineWrap ont déjà leur propre défilement), + jamais sur cette zone entière — sans quoi la barre d'onglets et la barre + d'outils défileraient avec le contenu au lieu de rester fixes en haut. */ +.builderCanvasArea{ flex:1 1 auto; min-width:0; height:100%; overflow:hidden; display:flex; flex-direction:column; } /* ---------- Panneaux gauche/droite flottants ---------- */ /* Les deux panneaux (éléments de l'écran / propriétés) sont sortis du flux @@ -233,10 +243,25 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d .aspectBtn.active{ background:var(--accent); border-color:var(--accent); color:#fff; } .canvasFrame{ - width:100%; padding:10px; border:1px solid var(--border); border-radius:16px; background:var(--panel); + /* flex:1 1 auto + min-height:0 : occupe tout l'espace restant sous la + barre d'outils dans .builderTabPanel (voir screen_edit.html), et c'est + LUI qui défile (overflow:auto) si le canevas ne peut pas être réduit + davantage (ex. fenêtre très basse) — jamais .builderCanvasArea (voir + plus haut), pour garder la barre d'onglets/d'outils toujours visible. */ + flex:1 1 auto; min-height:0; width:100%; padding:10px; border:1px solid var(--border); border-radius:16px; background:var(--panel); + display:flex; align-items:flex-start; justify-content:center; overflow:auto; } .canvas{ - position:relative; width:100%; max-width:100%; margin:0 auto; background:#0b0d12; border-radius:8px; + /* "Monté le plus haut possible" et "je dois voir tout l'écran" : plutôt + qu'une largeur pleine (l'ancien width:100%, qui pouvait rendre un + format Portrait bien plus haut que la fenêtre), la hauteur DISPONIBLE + devient la contrainte principale (height:100%) et la largeur se déduit + de l'aspect-ratio (posé en style inline, voir screen_edit.html) — + max-width:100% prend le relais si jamais c'est la largeur qui manque + en premier (fenêtre étroite/écran Paysage). Résultat : le canevas + entier tient toujours dans la zone visible, sans avoir à défiler pour + voir le bas de l'écran. */ + position:relative; height:100%; width:auto; max-width:100%; flex:0 0 auto; margin:0 auto; background:#0b0d12; border-radius:8px; overflow:hidden; border:1px solid var(--border); } .canvasElement{ @@ -366,6 +391,12 @@ code{ background:var(--panel2); border:1px solid var(--border); border-radius:4p body.builderBody > main.content{ overflow:visible; } .builder3{ flex-direction:column; flex:none; } .builderCanvasArea{ flex:none; width:100%; height:auto; max-height:none; overflow:visible; } + /* Le "letterboxing" par hauteur (voir .canvas plus haut) suppose une + chaîne de hauteurs définies jusqu'ici — qui n'existe plus une fois + .builderCanvasArea repassée en "height:auto" ci-dessus. Revient donc à + un dimensionnement par LARGEUR, comme une page qui défile normalement. */ + .canvasFrame{ flex:none; overflow:visible; } + .canvas{ height:auto; width:100%; } /* Trop peu de largeur pour qu'un panneau flottant ait un sens (il couvrirait tout l'écran) : les deux rejoignent la pile normale et restent toujours ouverts/visibles, quel que soit l'état mémorisé — diff --git a/templates/screen_edit.html b/templates/screen_edit.html index a3bfe719..ac002e93 100644 --- a/templates/screen_edit.html +++ b/templates/screen_edit.html @@ -6,11 +6,10 @@ {% endblock %} -{% block breadcrumb %} -
  • {{ game.name }}
    • -
  • Écrans
    • -
  • {{ screen.name }}
    • -{% endblock %} + +{% block breadcrumb_wrap %}{% endblock %} {% block content %} {% if screen.is_template %}