bachir/d9-eql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css print

Browse Source
This commit is contained in:
ouidade
2025-12-12 12:02:07 +01:00
parent d3ec580884
commit d05acf87b3
3 changed files with 123 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/eql/dist/assets/css/bundle.css
Vendored
+56 -20
View File
@@ -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*/
web/themes/custom/eql/scss/global/_print.scss
+64 -44
View File
@@ -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; }
}
web/themes/custom/eql/templates/layout/page.html.twig
+3 -3
View File
@@ -32,7 +32,7 @@
#}
<div class="layout-container">
<div class="layout-container print-page">
@@ -44,7 +44,7 @@
{{ page.header_bottom }}
</header>
<div class="print_only cover no-print-after">{# div pour couverture print only #}
<div class="print-only cover print no-print-after">{# div pour couverture print only #}
{{ page.header_top_left }}
{{ page.header_top_rigth }}
</div>
@@ -80,7 +80,7 @@
{{ page.footer_bottom_right }}
</section>
</footer>
<div class="print_only back-cover no-print-after">{# div pour 4eme de couverture print only #}
<div class="print print-only back-cover no-print-after">{# div pour 4eme de couverture print only #}
{{ page.footer_bottom_left }}
{{ page.footer_bottom_middle }}
</div>