From a36758e0d31cc707e2f7b21a0125459a5b4fa95e Mon Sep 17 00:00:00 2001 From: ouidade Date: Thu, 21 May 2026 19:42:45 +0200 Subject: [PATCH] twig header print --- .../custom/eql/dist/assets/css/bundle.css | 215 ++++++------------ web/themes/custom/eql/scss/global/_print.scss | 110 ++++----- .../global/print/_projets-complets-ecran.scss | 73 +----- .../global/print/_projets-complets-print.scss | 67 ++++-- .../templates/node--view--projets.html.twig | 12 +- 5 files changed, 188 insertions(+), 289 deletions(-) diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css index 46d0188..89feb74 100644 --- a/web/themes/custom/eql/dist/assets/css/bundle.css +++ b/web/themes/custom/eql/dist/assets/css/bundle.css @@ -270,31 +270,8 @@ svg.ext { -------------------------- */ @page { size: A4 portrait; - margin: 1.5cm; - @bottom-center { - content: "Page " counter(page) " / " counter(pages); - font-size: 9pt; - } } /* Pas de numéro sur cover / back-cover */ -.cover { - page: cover; -} - -.back-cover { - page: backcover; -} - -@page cover { - @bottom-center { - content: none; - } -} -@page backcover { - @bottom-center { - content: none; - } -} /* ------------------------- PRINT (Ctrl+P) -------------------------- */ @@ -324,84 +301,21 @@ svg.ext { margin-left: 3rem; } /* Cover */ - .cover.print-only { - display: flex !important; - min-height: 100vh; - align-items: center; - justify-content: center; - text-align: center; - break-after: page; - } - /* Back cover */ - .back-cover.print-only { - break-before: page; - } - .back-cover.print-only .views-row-wrapper { - display: flex; - flex-direction: row; - flex-wrap: wrap; - } /* Optionnel : éviter l’URL après liens sur la cover */ - .cover.print-only a[href^=http]::after, - .cover.print-only a[href^=https]::after { - content: "" !important; - } } /* ------------------------- SCREEN preview (Paged.js) -------------------------- */ -@media screen { - /* En écran normal : cacher print-only */ - body:not(.use-paged) .print-only { - display: none !important; - } - /* Fond et affichage pages */ - body.use-paged { - background: #ddd; - } - body.use-paged .pagedjs_pages { - width: 100%; - padding: 2rem 0; - } - body.use-paged .pagedjs_page { - margin: 1rem auto; - background: #fff; - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); - } - body.use-paged .pagedjs_pagebox { - width: 210mm; - min-height: 297mm; - margin: 0 auto; - background: #fff; - } - /* Paged.js met le contenu dans .pagedjs_page_content : on évite les surprises */ - body.use-paged .pagedjs_page_content { - display: block; - } -} .path-projets-complets .layout-container header { top: inherit !important; left: inherit !important; } -.path-projets-complets .layout-content { - width: 80vw; - margin: auto; -} .path-projets-complets span { display: none; } .path-projets-complets .print-header { display: none; } -.path-projets-complets .print-header__text { - text-transform: uppercase; - font-family: "Source Code Pro"; - color: rgb(9, 57, 139); - font-size: 0.8rem; - font-weight: 500; - text-transform: uppercase; - text-align: end; -} .path-projets-complets .view-header { position: fixed; right: 0; @@ -421,13 +335,13 @@ svg.ext { color: white; } .path-projets-complets .view-projets { - margin-top: 4rem !important; margin-bottom: 4rem !important; } .path-projets-complets .view-projets .buttons-filtres-ressources { display: none; } .path-projets-complets .view-projets { + width: 80%; margin: auto; } .path-projets-complets .view-projets .view-filters { @@ -554,57 +468,6 @@ svg.ext { .path-projets-complets .view-projets .field--name-field-encours-fini { display: none; } -.path-projets-complets .view-projets .field--name-field-etape-du-projet, -.path-projets-complets .view-projets .field--name-field-type-de-projet, -.path-projets-complets .view-projets .field--name-field-type-de-moa { - margin-bottom: 1rem; -} -.path-projets-complets .view-projets .field--name-field-etape-du-projet a, -.path-projets-complets .view-projets .field--name-field-type-de-projet a, -.path-projets-complets .view-projets .field--name-field-type-de-moa a { - color: black; -} -.path-projets-complets .view-projets .field--name-field-etape-du-projet .field__label, -.path-projets-complets .view-projets .field--name-field-type-de-projet .field__label, -.path-projets-complets .view-projets .field--name-field-type-de-moa .field__label { - width: fit-content; - color: rgb(9, 57, 139); - font-size: 1.2rem; - font-weight: 900; - text-transform: uppercase; - margin-bottom: 0 !important; - flex-direction: row; -} -.path-projets-complets .view-projets .field--name-field-etape-du-projet .field__label::after, -.path-projets-complets .view-projets .field--name-field-type-de-projet .field__label::after, -.path-projets-complets .view-projets .field--name-field-type-de-moa .field__label::after { - content: ":"; - padding-left: 0.5rem; -} -.path-projets-complets .view-projets .field--name-field-etape-du-projet .field__item, -.path-projets-complets .view-projets .field--name-field-type-de-projet .field__item, -.path-projets-complets .view-projets .field--name-field-type-de-moa .field__item { - width: fit-content; -} -.path-projets-complets .view-projets .field--name-field-textes { - margin-top: 2rem; -} -.path-projets-complets .view-projets .field--name-field-textes .field__label { - display: none !important; -} -.path-projets-complets .view-projets .field--name-field-textes ul { - margin-top: 0; -} -.path-projets-complets .view-projets .field--name-field-textes p { - margin-top: 0; -} -.path-projets-complets .view-projets .field--name-field-textes .paragraph--type--texte { - margin-top: 1.5rem; -} -.path-projets-complets .view-projets .field--name-field-textes .paragraph--type--texte .field--name-field-titre { - margin-bottom: 1rem; -} - @media print { * { box-shadow: none !important; @@ -794,18 +657,6 @@ svg.ext { .path-projets-complets .layout-content .views-row .projet-header-print .field--name-field-textes .field__label { display: none; } - .path-projets-complets .layout-content .views-row .projet-header-print .field--name-field-textes .field--name-field-titre { - color: rgb(9, 57, 139); - font-size: 1.2rem; - font-weight: 900; - text-transform: uppercase; - margin-bottom: 0 !important; - flex-direction: row; - } - .path-projets-complets .layout-content .views-row .projet-header-print .field--name-field-textes .field--name-field-titre::after { - content: " :"; - padding-left: 0.5rem; - } .path-projets-complets .layout-content .views-row .projet-header-print .field--name-field-etape-du-projet a, .path-projets-complets .layout-content .views-row .projet-header-print .field--name-field-type-de-projet a, .path-projets-complets .layout-content .views-row .projet-header-print .field--name-field-type-de-moa a { @@ -870,6 +721,70 @@ svg.ext { break-after: page; } } +.field--name-field-etape-du-projet, +.field--name-field-type-de-projet, +.field--name-field-type-de-moa { + margin-bottom: 1rem; +} +.field--name-field-etape-du-projet a, +.field--name-field-type-de-projet a, +.field--name-field-type-de-moa a { + color: black; +} +.field--name-field-etape-du-projet .field__label, +.field--name-field-type-de-projet .field__label, +.field--name-field-type-de-moa .field__label { + width: fit-content; + color: rgb(9, 57, 139); + font-size: 1.2rem; + font-weight: 900; + text-transform: uppercase; + margin-bottom: 0 !important; + flex-direction: row; +} +.field--name-field-etape-du-projet .field__label::after, +.field--name-field-type-de-projet .field__label::after, +.field--name-field-type-de-moa .field__label::after { + content: ":"; + padding-left: 0.5rem; +} +.field--name-field-etape-du-projet .field__item, +.field--name-field-type-de-projet .field__item, +.field--name-field-type-de-moa .field__item { + width: fit-content; +} + +.field--name-field-textes { + margin-top: 2rem; +} +.field--name-field-textes .field__label { + display: none !important; +} +.field--name-field-textes .field--name-field-titre { + color: rgb(9, 57, 139); + font-size: 1.2rem; + font-weight: 900; + text-transform: uppercase; + margin-bottom: 0 !important; + flex-direction: row; +} +.field--name-field-textes .field--name-field-titre::after { + content: " :"; + padding-left: 0.5rem; +} +.field--name-field-textes ul { + margin-top: 0; +} +.field--name-field-textes p { + margin-top: 0; +} +.field--name-field-textes .paragraph--type--texte { + margin-top: 1.5rem; +} +.field--name-field-textes .paragraph--type--texte .field--name-field-titre { + margin-bottom: 1rem; +} + /*pages*/ /* @import "pages/partials/header_footer"; diff --git a/web/themes/custom/eql/scss/global/_print.scss b/web/themes/custom/eql/scss/global/_print.scss index 98aec14..a4b3fe0 100644 --- a/web/themes/custom/eql/scss/global/_print.scss +++ b/web/themes/custom/eql/scss/global/_print.scss @@ -3,20 +3,20 @@ -------------------------- */ @page { size: A4 portrait; - margin: 1.5cm; + // margin: 1.5cm; - @bottom-center { - content: "Page " counter(page) " / " counter(pages); - font-size: 9pt; - } + // @bottom-center { + // content: "Page " counter(page) " / " counter(pages); + // font-size: 9pt; + // } } /* Pas de numéro sur cover / back-cover */ -.cover { page: cover; } -.back-cover { page: backcover; } +// .cover { page: cover; } +// .back-cover { page: backcover; } -@page cover { @bottom-center { content: none; } } -@page backcover { @bottom-center { content: none; } } +// @page cover { @bottom-center { content: none; } } +// @page backcover { @bottom-center { content: none; } } /* ------------------------- PRINT (Ctrl+P) @@ -48,30 +48,30 @@ } /* Cover */ - .cover.print-only { - display: flex !important; - min-height: 100vh; - align-items: center; - justify-content: center; - text-align: center; - break-after: page; - } + // .cover.print-only { + // display: flex !important; + // min-height: 100vh; + // align-items: center; + // justify-content: center; + // text-align: center; + // break-after: page; + // } - /* Back cover */ - .back-cover.print-only { - break-before: page; - .views-row-wrapper{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - } - } + // /* Back cover */ + // .back-cover.print-only { + // break-before: page; + // .views-row-wrapper{ + // display: flex; + // flex-direction: row; + // flex-wrap: wrap; + // } + // } /* Optionnel : éviter l’URL après liens sur la cover */ - .cover.print-only a[href^="http"]::after, - .cover.print-only a[href^="https"]::after { - content: "" !important; - } + // .cover.print-only a[href^="http"]::after, + // .cover.print-only a[href^="https"]::after { + // content: "" !important; + // } } @@ -79,32 +79,32 @@ /* ------------------------- SCREEN preview (Paged.js) -------------------------- */ -@media screen { - /* En écran normal : cacher print-only */ - body:not(.use-paged) .print-only { display: none !important; } +// @media screen { +// /* En écran normal : cacher print-only */ +// body:not(.use-paged) .print-only { display: none !important; } - /* Fond et affichage pages */ - body.use-paged { background: #ddd; } +// /* Fond et affichage pages */ +// body.use-paged { background: #ddd; } - body.use-paged .pagedjs_pages { - width: 100%; - padding: 2rem 0; - } +// body.use-paged .pagedjs_pages { +// width: 100%; +// padding: 2rem 0; +// } - body.use-paged .pagedjs_page { - margin: 1rem auto; - background: #fff; - box-shadow: 0 0 0 1px rgba(0,0,0,.35); - } +// body.use-paged .pagedjs_page { +// margin: 1rem auto; +// background: #fff; +// box-shadow: 0 0 0 1px rgba(0,0,0,.35); +// } - body.use-paged .pagedjs_pagebox { - width: 210mm; - min-height: 297mm; - margin: 0 auto; - background: #fff; - } - /* Paged.js met le contenu dans .pagedjs_page_content : on évite les surprises */ - body.use-paged .pagedjs_page_content { - display: block; - } -} +// body.use-paged .pagedjs_pagebox { +// width: 210mm; +// min-height: 297mm; +// margin: 0 auto; +// background: #fff; +// } +// /* Paged.js met le contenu dans .pagedjs_page_content : on évite les surprises */ +// // body.use-paged .pagedjs_page_content { +// // display: block; +// // } +// } diff --git a/web/themes/custom/eql/scss/global/print/_projets-complets-ecran.scss b/web/themes/custom/eql/scss/global/print/_projets-complets-ecran.scss index 2b3c159..69f4393 100644 --- a/web/themes/custom/eql/scss/global/print/_projets-complets-ecran.scss +++ b/web/themes/custom/eql/scss/global/print/_projets-complets-ecran.scss @@ -4,8 +4,8 @@ left: inherit !important; } .layout-content{ - width: 80vw; - margin: auto; + // width: 90vw; + // margin: auto; } // ========================= @@ -19,27 +19,10 @@ display: none; } - - - // .print-header img { - // width: 2cm; - // height: auto; - // } - - .print-header__text { - text-transform: uppercase; - font-family: "Source Code Pro"; - - color: $blue-dark; - font-size: 0.8rem; - font-weight: 500; - text-transform: uppercase; - text-align: end; - } - ///// bouton print ////// .view-header{ + position: fixed; right: 0; margin-right: 2rem; @@ -56,12 +39,10 @@ .view-projets{ - - margin-top: 4rem !important; margin-bottom: 4rem !important; ///// filtres /////////// .buttons-filtres-ressources{display: none;} - // width: 80%; + width: 80%; margin: auto; .view-filters{ margin-top: 4rem; @@ -190,53 +171,13 @@ } - .field--name-field-etape-du-projet, - .field--name-field-type-de-projet, - .field--name-field-type-de-moa { - margin-bottom: 1rem; - a { - color: black; - } - - .field__label { - width: fit-content; - color: $blue-dark; - font-size: 1.2rem; - font-weight: 900; - text-transform: uppercase; - margin-bottom: 0 !important; - flex-direction: row; - - &::after { - content: ':'; - padding-left: 0.5rem; - } - } - .field__item{ - width: fit-content; - } - } - .field--name-field-textes{ - margin-top: 2rem; - .field__label{ - display: none !important; - } - ul{margin-top: 0;} - p{margin-top: 0;} - .paragraph--type--texte{ - margin-top: 1.5rem; - .field--name-field-titre{ - margin-bottom: 1rem; - } - } - } - ///// /////////// + // ///// /////////// - // @media screen { + @media screen { // .node-type-projet { // visibility: hidden; // } - // } + } } } \ No newline at end of file diff --git a/web/themes/custom/eql/scss/global/print/_projets-complets-print.scss b/web/themes/custom/eql/scss/global/print/_projets-complets-print.scss index 247b024..e01e0fd 100644 --- a/web/themes/custom/eql/scss/global/print/_projets-complets-print.scss +++ b/web/themes/custom/eql/scss/global/print/_projets-complets-print.scss @@ -251,19 +251,7 @@ display: none; } - .field--name-field-titre { - color: $blue-dark; - font-size: 1.2rem; - font-weight: 900; - text-transform: uppercase; - margin-bottom: 0 !important; - flex-direction: row; - - &::after { - content: ' :'; - padding-left: 0.5rem; - } - } + } .field--name-field-etape-du-projet, @@ -354,3 +342,56 @@ } +.field--name-field-etape-du-projet, +.field--name-field-type-de-projet, +.field--name-field-type-de-moa { + margin-bottom: 1rem; + a { + color: black; + } + + .field__label { + width: fit-content; + color: $blue-dark; + font-size: 1.2rem; + font-weight: 900; + text-transform: uppercase; + margin-bottom: 0 !important; + flex-direction: row; + + &::after { + content: ':'; + padding-left: 0.5rem; + } + } + .field__item{ + width: fit-content; + } +} +.field--name-field-textes{ + margin-top: 2rem; + .field__label{ + display: none !important; + } + .field--name-field-titre { + color: $blue-dark; + font-size: 1.2rem; + font-weight: 900; + text-transform: uppercase; + margin-bottom: 0 !important; + flex-direction: row; + + &::after { + content: ' :'; + padding-left: 0.5rem; + } + } + ul{margin-top: 0;} + p{margin-top: 0;} + .paragraph--type--texte{ + margin-top: 1.5rem; + .field--name-field-titre{ + margin-bottom: 1rem; + } + } +} \ No newline at end of file diff --git a/web/themes/custom/eql/templates/node--view--projets.html.twig b/web/themes/custom/eql/templates/node--view--projets.html.twig index 85467ae..72d7391 100644 --- a/web/themes/custom/eql/templates/node--view--projets.html.twig +++ b/web/themes/custom/eql/templates/node--view--projets.html.twig @@ -113,11 +113,13 @@ - {{ content.field_photo }} - {{ content.title }} - {{ content.field_equipe }} - {{ content.field_region }} - {{ content.field_incube }} +
+ {{ content.field_photo }} + {{ content.title }} + {{ content.field_equipe }} + {{ content.field_region }} + {{ content.field_incube }} +