Forge-Store/Forge-Engine
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Le mini-jeu remplit toute la hauteur/largeur du document, pas juste une carte centrée

Browse Source 
Retour utilisateur du 23/09/2026 : une carte à largeur confortable
(même centrée) ne suffisait pas, "le mini jeu dois prendre toute la
hauteur et la largeur du document". Retire le max-width des cartes
internes (.docQuizCard/.docQuizResultCard/.docAssocCard/
.docMemoryCardWrap) — leur fond/bordure couvre désormais toute la
page (width:100% + align-items:stretch côté joueur pour la hauteur) —
et centre leur CONTENU à l'intérieur via display:flex +
justify-content:center sur la carte elle-même, plutôt que de le
laisser collé en haut d'une grande surface vide. Vérifié par
getComputedStyle (max-width devient bien "none", pointer-events et
plein-cadre de la page toujours corrects dans les deux modes).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-09-23 11:03:33 +02:00
co-authored by Claude Sonnet 5
parent 82223171a9
commit fadddb7113
1 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/document/document-editor.css
+27 -13
View File
@@ -539,13 +539,16 @@ img.docImage {
sinon rien ne serait visible en édition). ---- */
/* Le joueur remplit TOUTE la hauteur/largeur disponible (voir
[class$="Player"] plus haut, flex:1 dans .docMinigame:only-child)
mais sa CARTE interne (.docQuizCard, .docAssocCard,
.docMemoryCardWrap...) garde sa taille naturelle — sans ce
display:flex + centrage, elle restait tassée en haut-gauche de cette
grande boîte au lieu d'occuper visuellement l'espace (retour
utilisateur du 23/09/2026 : "un mini jeu prend toute la place et est
centrer pas aligner en haut"). */
[class$="Player"] plus haut, flex:1 dans .docMinigame:only-child) ET
sa CARTE interne (.docQuizCard, .docAssocCard, .docMemoryCardWrap...)
doit elle aussi occuper toute cette place, pas juste une carte
centrée avec une largeur confortable (retour utilisateur du
23/09/2026 : "le mini jeu dois prendre toute la hauteur et la
largeur du document" — une carte à largeur limitée, même centrée,
ne suffisait pas). align-items:stretch (valeur par défaut, posée
explicitement pour être claire) étire la carte sur tout l'axe
croisé ; sa largeur 100% (voir chaque carte plus bas, sans
max-width) fait le reste. */
.docQuizPlayer,
.docAssocPlayer,
.docMemoryPlayer,
@@ -553,9 +556,8 @@ img.docImage {
.docScenarioPlayer {
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
align-items: stretch;
padding: 24px;
}
.docEditor3.docEditor3--preview [data-kind="quiz"],
@@ -590,8 +592,16 @@ img.docImage {
.docQuizCard,
.docQuizResultCard {
/* 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. */
width: 100%;
max-width: 640px;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
border: 1px solid var(--doc-border);
border-radius: 16px;
@@ -797,7 +807,9 @@ img.docImage {
dupliquer ces règles. ---- */
.docAssocCard {
width: 100%;
max-width: 760px;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
border: 1px solid var(--doc-border);
border-radius: 16px;
@@ -951,7 +963,9 @@ img.docImage {
visuels, voir forgeDocRenderMemoryProps ci-dessus). ---- */
.docMemoryCardWrap {
width: 100%;
max-width: 760px;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
border: 1px solid var(--doc-border);
border-radius: 16px;