From 20ee8ef35b0ec03815cb3b628853fc9c2f28eed9 Mon Sep 17 00:00:00 2001 From: william Date: Wed, 23 Sep 2026 11:18:12 +0200 Subject: [PATCH] =?UTF-8?q?Aper=C3=A7u=20en=20plein=20=C3=A9cran=20r=C3=A9?= =?UTF-8?q?el,=20sans=20espace=20autour=20du=20mini-jeu,=20contenu=20align?= =?UTF-8?q?=C3=A9=20en=20haut?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Mode Aperçu bascule désormais en VRAI plein écran (Fullscreen API, forgeDocSetPreviewMode) au lieu d'un simple agrandissement CSS — contourne d'un coup le clipping par overflow:hidden de main.content documenté ailleurs dans ce fichier. .docTopbar est masqué comme le reste du chrome ; un nouveau bouton flottant .docPreviewExitBtn (visible seulement en Aperçu) permet de revenir à l'éditeur, en plus d'Échap (natif, resynchronisé via fullscreenchange). - .docCanvasArea perd son padding et .docPage abandonne son format A4 fixe en Aperçu (width/height:100%, aspect-ratio:unset) — le mini-jeu remplit tout l'écran, sans bordure vide autour (retour utilisateur du 23/09/2026 : "il doit prendre toute la place"). - Le contenu des cartes de mini-jeu (.docQuizCard/.docAssocCard/ .docMemoryCardWrap) passe de justify-content:center à flex-start — aligné en haut, pas centré verticalement (retour utilisateur du 23/09/2026 : "le contenu aligner en haut"). Vérifié par getComputedStyle dans les deux modes (padding/aspect-ratio de la page, visibilité du bouton de sortie et du bandeau, alignement du contenu, gating pointer-events des mini-jeux — tout reste cohérent simultanément). Co-Authored-By: Claude Sonnet 5 --- static/document/document-editor.css | 63 +++++++++++++++++++++++---- static/document/js/document-editor.js | 33 ++++++++++++-- templates/document/document_edit.html | 5 +++ 3 files changed, 90 insertions(+), 11 deletions(-) diff --git a/static/document/document-editor.css b/static/document/document-editor.css index 3dab1c37..f4f06ef7 100644 --- a/static/document/document-editor.css +++ b/static/document/document-editor.css @@ -598,13 +598,13 @@ img.docImage { /* Toute la hauteur/largeur du DOCUMENT (retour utilisateur du 23/09/2026), pas juste une carte confortable centrée : la carte elle-même (fond/bordure) couvre désormais toute la page ; - display:flex + justify-content:center centre son CONTENU à - l'intérieur de cette grande surface, plutôt que de le laisser - collé en haut ou étiré verticalement de façon disgracieuse. */ + display:flex + justify-content:flex-start ALIGNE SON CONTENU EN + HAUT de cette grande surface (retour utilisateur du 23/09/2026 : + "le contenu aligner en haut", pas centré verticalement). */ width: 100%; display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2)); border: 1px solid var(--doc-border); border-radius: 16px; @@ -812,7 +812,7 @@ img.docImage { width: 100%; display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2)); border: 1px solid var(--doc-border); border-radius: 16px; @@ -968,7 +968,7 @@ img.docImage { width: 100%; display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2)); border: 1px solid var(--doc-border); border-radius: 16px; @@ -1705,7 +1705,12 @@ img.docImage { display: none; } -/* ===== MODE APERÇU : masque tout le chrome d'édition ===== */ +/* ===== MODE APERÇU : plein écran RÉEL (Fullscreen API, voir + forgeDocSetPreviewMode), tout le chrome d'édition masqué — y compris + .docTopbar désormais (retour utilisateur du 23/09/2026 : "en mode + apercu en plein ecrant"), avec .docPreviewExitBtn comme seul moyen + de revenir à l'éditeur. ===== */ +.docEditor3.docEditor3--preview .docTopbar, .docEditor3.docEditor3--preview .docSidebarLeft, .docEditor3.docEditor3--preview .docSidebarRight, .docEditor3.docEditor3--preview .docBottomNav, @@ -1724,8 +1729,50 @@ img.docImage { outline: none; } +/* Aucun espace autour du mini-jeu en Aperçu (retour utilisateur du + 23/09/2026 : "pourquoi je voi de l'espace autour du composant mini + jeu en apercu ? il doit prendre toute la place") — la page elle-même + abandonne son format A4 fixe pour remplir tout l'écran plein écran, + plutôt qu'un rectangle A4 plus petit flottant avec des bords vides + autour. */ .docEditor3.docEditor3--preview .docCanvasArea { - padding: 40px; + padding: 0; +} + +.docEditor3.docEditor3--preview .docPage { + width: 100%; + height: 100%; + aspect-ratio: unset; + border: none; + border-radius: 0; + box-shadow: none; +} + +.docPreviewExitBtn { + display: none; + position: absolute; + top: 20px; + right: 20px; + z-index: 50; + align-items: center; + gap: 6px; + height: 36px; + padding: 0 16px; + border: 1px solid var(--doc-border); + border-radius: 10px; + background: var(--doc-bg-2); + color: var(--doc-text); + font-size: 13px; + font-weight: 600; + cursor: pointer; +} + +.docPreviewExitBtn:hover { + border-color: var(--doc-accent); +} + +.docEditor3.docEditor3--preview .docPreviewExitBtn { + display: flex; } /* ---- Modale générique (utilisée aujourd'hui par l'éditeur d'arbre du diff --git a/static/document/js/document-editor.js b/static/document/js/document-editor.js index 3cb7912e..a8d9fd66 100644 --- a/static/document/js/document-editor.js +++ b/static/document/js/document-editor.js @@ -2726,11 +2726,38 @@ function forgeDocBindWidthPicker() { }); } +function forgeDocSetPreviewMode(enabled) { + // Mode Aperçu = plein écran RÉEL, pas un simple agrandissement CSS + // (retour utilisateur du 23/09/2026 : "en mode apercu en plein + // ecrant avec possibilité de retourner à l'éditeur") — la Fullscreen + // API contourne d'un coup toute la question de clipping par + // overflow:hidden sur main.content (voir les commentaires CSS sur + // .docEditor3/la modale Scénario) : l'élément quitte entièrement le + // rendu normal de la page, plus de souci d'ancêtre. + window.forgeDocState.previewMode = enabled; + const editor = document.getElementById('docEditor3'); + editor.classList.toggle('docEditor3--preview', enabled); + forgeDocUpdatePageNavPill(); + if (enabled) { + if (editor.requestFullscreen) editor.requestFullscreen().catch(() => {}); + } else if (document.fullscreenElement) { + document.exitFullscreen().catch(() => {}); + } +} + function forgeDocBindPreviewToggle() { document.getElementById('docPreviewBtn').addEventListener('click', () => { - window.forgeDocState.previewMode = !window.forgeDocState.previewMode; - document.getElementById('docEditor3').classList.toggle('docEditor3--preview', window.forgeDocState.previewMode); - forgeDocUpdatePageNavPill(); + forgeDocSetPreviewMode(!window.forgeDocState.previewMode); + }); + document.getElementById('docPreviewExitBtn').addEventListener('click', () => forgeDocSetPreviewMode(false)); + // Synchronise l'état si le créateur quitte le plein écran nativement + // (Échap, F11...) sans passer par nos boutons — sinon previewMode + // resterait vrai (mini-jeux "jouables") alors que l'écran normal de + // l'éditeur est revenu. + document.addEventListener('fullscreenchange', () => { + if (!document.fullscreenElement && window.forgeDocState.previewMode) { + forgeDocSetPreviewMode(false); + } }); } diff --git a/templates/document/document_edit.html b/templates/document/document_edit.html index ea35ef39..3b8def53 100644 --- a/templates/document/document_edit.html +++ b/templates/document/document_edit.html @@ -184,6 +184,11 @@
{{ rendered_document|safe }}
{# //NOSONAR S5247 - rendered_document vient de document_engine.render_document, qui échappe (html.escape) tout contenu utilisateur avant interpolation (voir document_engine/rendering/render_document_element.py) ; jamais de HTML brut non échappé ici #} +
100%