diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css index d88a716..8cba531 100644 --- a/web/themes/custom/eql/dist/assets/css/bundle.css +++ b/web/themes/custom/eql/dist/assets/css/bundle.css @@ -293,6 +293,9 @@ svg.ext { img { max-width: 100%; } + ul { + list-style-type: none; + } input, textarea, select { @@ -401,6 +404,10 @@ svg.ext { .field--name-field-titre { page-break-after: avoid; } + /* Pas de saut de page après ces éléments */ + h1 { + page-break-before: right; + } /* Styles des liens */ a, a:link, @@ -438,7 +445,7 @@ svg.ext { } .page-node-type-projet .layout__region--top .top_top .slick-dots, .page-node-type-projet .layout__region--top .top_top .slick-arrow { - display: none; + display: none !important; } .page-node-type-projet .layout__region--top .top_top .top_right { width: 100% !important; @@ -450,40 +457,43 @@ svg.ext { display: none; } .page-node-type-projet .layout__region--second { - flex: 0 1 100% !important; - } - /* --- Couverture : header-top en page 1 --- */ - .layout-container header { - position: static !important; + flex: 0 0 100% !important; + margin-left: 10%; + margin-right: 10%; width: 100% !important; - box-shadow: none !important; } - #header-top { + /* 1) Le header du site ne s’imprime jamais */ + .layout-container header[role=banner] { + display: none !important; + } + /* 2) Couverture (print only) */ + .cover.print-only { display: flex !important; flex-direction: column; justify-content: center; align-items: center; - height: 100vh; + min-height: 100vh; padding: 2cm 1.5cm; text-align: center; page-break-after: always; - background: #ffffff !important; - color: #000000 !important; + break-after: page; + background: #fff !important; + color: #000 !important; } - /* On cache le menu du bas du header (la barre de navigation horizontale) */ - .region-header-bottom { - display: none !important; - } - /* Si tu as un logo + titre dans #header-top, tu peux les grossir un peu : */ - #header-top .region-header-top-left img { + /* Reprend tes règles “logo + titre” mais sur la cover */ + .cover.print-only .region-header-top-left img { max-height: 3cm; height: auto; width: auto; } - #header-top .region-header-top-rigth #block-eql-identitedusite { + .cover.print-only .region-header-top-rigth #block-eql-identitedusite { font-size: 1.4rem; text-transform: uppercase; } + /* Optionnel : pas d’URL affichée sur la cover */ + .cover.print-only a[href^=http]:after { + display: none; + } } /* 2) MODE DEBUG : voir la version print en écran via body.debug-print */ @media screen { @@ -498,6 +508,9 @@ svg.ext { body.debug-print img { max-width: 100%; } + body.debug-print ul { + list-style-type: none; + } body.debug-print input, body.debug-print textarea, body.debug-print select { @@ -620,6 +633,12 @@ svg.ext { body.debug-print .field--name-field-titre { page-break-after: avoid; } + body.debug-print { + /* Pas de saut de page après ces éléments */ + } + body.debug-print h1 { + page-break-before: right; + } body.debug-print { /* Styles des liens */ } @@ -665,7 +684,7 @@ svg.ext { } body.debug-print .page-node-type-projet .layout__region--top .top_top .slick-dots, body.debug-print .page-node-type-projet .layout__region--top .top_top .slick-arrow { - display: none; + display: none !important; } body.debug-print .page-node-type-projet .layout__region--top .top_top .top_right { width: 100% !important; @@ -677,7 +696,24 @@ svg.ext { display: none; } body.debug-print .page-node-type-projet .layout__region--second { - flex: 0 1 100% !important; + flex: 0 0 100% !important; + margin-left: 10%; + margin-right: 10%; + width: 100% !important; + } + .cover.print-only { + display: none; + } + body.debug-print .print-page { + width: 210mm; + height: 297mm; + margin: 2rem auto; + background: #fff; + box-shadow: 0 0 0 1px red; + } + /* cacher les éléments print-only à l'écran */ + .print-only { + display: none; } } /*pages*/ diff --git a/web/themes/custom/eql/scss/global/_print.scss b/web/themes/custom/eql/scss/global/_print.scss index 5935734..b5e3831 100644 --- a/web/themes/custom/eql/scss/global/_print.scss +++ b/web/themes/custom/eql/scss/global/_print.scss @@ -25,7 +25,9 @@ img { max-width: 100%; } - + ul{ + list-style-type: none; + } input, textarea, select { @@ -157,6 +159,10 @@ .field--name-field-titre { page-break-after: avoid; } + /* Pas de saut de page après ces éléments */ + h1{ + page-break-before: right; + } /* Styles des liens */ a, @@ -197,10 +203,12 @@ .block-entity-fieldnodefield-photo { width: 100% !important; } + img{ + } .slick-dots, .slick-arrow { - display: none; + display: none !important; } .top_right { @@ -218,12 +226,12 @@ } .layout__region--second { - flex: 0 1 100% !important; + flex: 0 0 100% !important; + margin-left: 10%; + margin-right: 10%; + width: 100% !important; } } - - - } /* 1) VRAIE feuille d'impression */ @@ -240,45 +248,45 @@ @include print-base(); + /* 1) Le header du site ne s’imprime jamais */ + .layout-container header[role="banner"] { + display: none !important; + } - /* --- Couverture : header-top en page 1 --- */ - .layout-container header { - position: static !important; // ne plus être fixed en print - width: 100% !important; - box-shadow: none !important; - } - - #header-top { - display: flex !important; - flex-direction: column; - justify-content: center; - align-items: center; - - height: 100vh; // occupe la hauteur de la "page" - padding: 2cm 1.5cm; // marges internes - text-align: center; - page-break-after: always; // 👉 le contenu commence sur la page suivante - - background: #ffffff !important; - color: #000000 !important; - } - - /* On cache le menu du bas du header (la barre de navigation horizontale) */ - .region-header-bottom { - display: none !important; - } - - /* Si tu as un logo + titre dans #header-top, tu peux les grossir un peu : */ - #header-top .region-header-top-left img { - max-height: 3cm; - height: auto; - width: auto; - } - - #header-top .region-header-top-rigth #block-eql-identitedusite { - font-size: 1.4rem; - text-transform: uppercase; - } + /* 2) Couverture (print only) */ + .cover.print-only { + display: flex !important; + flex-direction: column; + justify-content: center; + align-items: center; + + min-height: 100vh; + padding: 2cm 1.5cm; + text-align: center; + + page-break-after: always; + break-after: page; + + background: #fff !important; + color: #000 !important; + } + + /* Reprend tes règles “logo + titre” mais sur la cover */ + .cover.print-only .region-header-top-left img { + max-height: 3cm; + height: auto; + width: auto; + } + + .cover.print-only .region-header-top-rigth #block-eql-identitedusite { + font-size: 1.4rem; + text-transform: uppercase; + } + + /* Optionnel : pas d’URL affichée sur la cover */ + .cover.print-only a[href^="http"]:after { + display: none; + } } @@ -287,4 +295,16 @@ body.debug-print { @include print-base(); } + .cover.print-only { + display: none; + } + body.debug-print .print-page { + width: 210mm; + height: 297mm; + margin: 2rem auto; + background: #fff; + box-shadow: 0 0 0 1px red; // limite page + } + /* cacher les éléments print-only à l'écran */ + .print-only { display: none; } } diff --git a/web/themes/custom/eql/templates/layout/page.html.twig b/web/themes/custom/eql/templates/layout/page.html.twig index 27ce4c0..9145fb4 100644 --- a/web/themes/custom/eql/templates/layout/page.html.twig +++ b/web/themes/custom/eql/templates/layout/page.html.twig @@ -32,7 +32,7 @@ #} -