Page au format A4 paysage à taille fixe ; un mini-jeu occupe toute la page à lui seul

- .docPage passe à une taille FIXE (960px, ratio A4 paysage 297:210
  via aspect-ratio) au lieu de grandir avec le contenu, et
  overflow:hidden — le contenu qui dépasse ne défile plus, au
  créateur de le répartir sur une autre page (comme une vraie
  diapositive, jamais de reflow automatique).
- Un mini-jeu ne peut plus partager sa page avec un autre élément, ni
  l'inverse : vérifié côté serveur (routes/document/
  document_element_add.py, point d'entrée unique de tout ajout),
  jamais dupliqué côté client qui se contente d'afficher l'erreur
  renvoyée (forgeDocApiAdd). Un mini-jeu ne peut pas non plus rejoindre
  une rangée. 4 nouveaux tests de non-régression.
- CSS : quand un mini-jeu est l'unique enfant de la page
  (.docPageContent > .docMinigame:only-child, invariant garanti par le
  serveur), il s'étire en plein cadre (padding de la page à 0, coins
  non arrondis, joueur en flex:1).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-09-23 10:36:10 +02:00
co-authored by Claude Sonnet 5
parent 60047a3658
commit 1a80cb32b5
4 changed files with 114 additions and 3 deletions
+44 -2
View File
@@ -353,16 +353,27 @@ body.objectEditBody > main.content {
position: relative;
}
/* Page au format A4 PAYSAGE, taille FIXE comme une vraie diapositive
(retour utilisateur du 23/09/2026 : "une page [...] dois etre un
format a4 orienter horizontalement comme une slide [...] le contenu
ne defile pas, si ya plus de place les contenu va sur une autre
page") — ratio 297:210 (A4 paysage) fixé par aspect-ratio, jamais
height:fit-content comme avant (la page ne grandit plus avec son
contenu). overflow:hidden : le contenu qui dépasse est clipsé, PAS
de défilement interne — au créateur de répartir sur plusieurs pages,
comme un vrai logiciel de diaporama ne reflow jamais automatiquement
une diapositive trop pleine. */
.docPage {
width: 760px;
width: 960px;
max-width: 100%;
height: fit-content;
aspect-ratio: 297 / 210;
background: var(--doc-card);
border: 1px solid var(--doc-border);
border-radius: 16px;
box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
padding: 48px 52px;
position: relative;
overflow: hidden;
transform-origin: top center;
transition: width 0.2s ease;
}
@@ -374,6 +385,7 @@ body.objectEditBody > main.content {
display: flex;
flex-direction: column;
gap: 18px;
height: 100%;
}
.docPage.docPage--fixedWidth {
@@ -381,6 +393,36 @@ body.objectEditBody > main.content {
padding: 28px 20px;
}
/* Un mini-jeu occupe TOUTE la page, à lui seul (retour utilisateur du
23/09/2026 : "un mini jeu dois occupper toute une page" — confirmé :
"une page avec mini-jeu = uniquement ce mini-jeu"). Garantie posée
côté serveur (routes/document/document_element_add.py : impossible
d'ajouter un mini-jeu sur une page non vide, ni d'ajouter autre chose
sur une page qui en contient déjà un) — :only-child ici n'est donc
jamais un cas ambigu, juste la mise en forme plein-cadre de cette
garantie. Le padding de .docPage disparaît (plein bord) et le badge
mini-jeu (nom/description courts) laisse toute la place au joueur. */
.docPage:has(> .docPageContent > .docMinigame:only-child) {
padding: 0;
}
.docPageContent > .docMinigame:only-child {
flex: 1;
display: flex;
flex-direction: column;
border-radius: 0;
border-width: 0;
}
.docPageContent > .docMinigame:only-child .docMinigameBadge {
flex-shrink: 0;
}
.docPageContent > .docMinigame:only-child > [class$="Player"] {
flex: 1;
min-height: 0;
}
.docRow {
position: relative;
}
+15 -1
View File
@@ -52,7 +52,21 @@ function forgeDocApiAdd(kind, parentId) {
body.set('page_id', String(window.forgeDocState.activePageId));
if (parentId !== null && parentId !== undefined) body.set('parent_id', String(parentId));
return fetch(`/document/${window.forgeDocState.slug}/elements/add`, { method: 'POST', body })
.then((r) => r.json());
.then((r) => r.json())
.then((result) => {
// Point d'entrée UNIQUE de tout ajout (voir routes/document/
// document_element_add.py) : gérer l'erreur ICI, une fois, couvre
// tous les appelants (bibliothèque, glisser-déposer, création de
// rangée à la volée, Annuler/Rétablir) sans dupliquer la logique
// dans chacun — la promesse rejetée interrompt simplement leur
// .then() sans autre effet de bord (pas de commande Annuler pour
// un ajout qui n'a jamais eu lieu).
if (result.error) {
alert(result.error);
return Promise.reject(new Error(result.error));
}
return result;
});
}
function forgeDocApiUpdate(id, attributes) {