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

twig header print

Browse Source
This commit is contained in:
ouidade
2026-05-21 19:42:45 +02:00
parent 8cbd6e4acd
commit a36758e0d3
5 changed files with 188 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/eql/dist/assets/css/bundle.css
Vendored
+65 -150
View File
@@ -270,31 +270,8 @@ svg.ext {
-------------------------- */ -------------------------- */
@page { @page {
size: A4 portrait; 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 */ /* 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) PRINT (Ctrl+P)
-------------------------- */ -------------------------- */
@@ -324,84 +301,21 @@ svg.ext {
margin-left: 3rem; margin-left: 3rem;
} }
/* Cover */ /* 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 */ /* 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) 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 { .path-projets-complets .layout-container header {
top: inherit !important; top: inherit !important;
left: inherit !important; left: inherit !important;
} }
.path-projets-complets .layout-content {
width: 80vw;
margin: auto;
}
.path-projets-complets span { .path-projets-complets span {
display: none; display: none;
} }
.path-projets-complets .print-header { .path-projets-complets .print-header {
display: none; 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 { .path-projets-complets .view-header {
position: fixed; position: fixed;
right: 0; right: 0;
@@ -421,13 +335,13 @@ svg.ext {
color: white; color: white;
} }
.path-projets-complets .view-projets { .path-projets-complets .view-projets {
margin-top: 4rem !important;
margin-bottom: 4rem !important; margin-bottom: 4rem !important;
} }
.path-projets-complets .view-projets .buttons-filtres-ressources { .path-projets-complets .view-projets .buttons-filtres-ressources {
display: none; display: none;
} }
.path-projets-complets .view-projets { .path-projets-complets .view-projets {
width: 80%;
margin: auto; margin: auto;
} }
.path-projets-complets .view-projets .view-filters { .path-projets-complets .view-projets .view-filters {
@@ -554,57 +468,6 @@ svg.ext {
.path-projets-complets .view-projets .field--name-field-encours-fini { .path-projets-complets .view-projets .field--name-field-encours-fini {
display: none; 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 { @media print {
* { * {
box-shadow: none !important; 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 { .path-projets-complets .layout-content .views-row .projet-header-print .field--name-field-textes .field__label {
display: none; 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-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-projet a,
.path-projets-complets .layout-content .views-row .projet-header-print .field--name-field-type-de-moa 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; 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*/ /*pages*/
/* /*
@import "pages/partials/header_footer"; @import "pages/partials/header_footer";
web/themes/custom/eql/scss/global/_print.scss
+55 -55
View File
@@ -3,20 +3,20 @@
-------------------------- */ -------------------------- */
@page { @page {
size: A4 portrait; size: A4 portrait;
margin: 1.5cm; // margin: 1.5cm;
@bottom-center { // @bottom-center {
content: "Page " counter(page) " / " counter(pages); // content: "Page " counter(page) " / " counter(pages);
font-size: 9pt; // font-size: 9pt;
} // }
} }
/* Pas de numéro sur cover / back-cover */ /* Pas de numéro sur cover / back-cover */
.cover { page: cover; } // .cover { page: cover; }
.back-cover { page: backcover; } // .back-cover { page: backcover; }
@page cover { @bottom-center { content: none; } } // @page cover { @bottom-center { content: none; } }
@page backcover { @bottom-center { content: none; } } // @page backcover { @bottom-center { content: none; } }
/* ------------------------- /* -------------------------
PRINT (Ctrl+P) PRINT (Ctrl+P)
@@ -48,30 +48,30 @@
} }
/* Cover */ /* Cover */
.cover.print-only { // .cover.print-only {
display: flex !important; // display: flex !important;
min-height: 100vh; // min-height: 100vh;
align-items: center; // align-items: center;
justify-content: center; // justify-content: center;
text-align: center; // text-align: center;
break-after: page; // break-after: page;
} // }
/* Back cover */ // /* Back cover */
.back-cover.print-only { // .back-cover.print-only {
break-before: page; // break-before: page;
.views-row-wrapper{ // .views-row-wrapper{
display: flex; // display: flex;
flex-direction: row; // flex-direction: row;
flex-wrap: wrap; // flex-wrap: wrap;
} // }
} // }
/* Optionnel : éviter l’URL après liens sur la cover */ /* Optionnel : éviter l’URL après liens sur la cover */
.cover.print-only a[href^="http"]::after, // .cover.print-only a[href^="http"]::after,
.cover.print-only a[href^="https"]::after { // .cover.print-only a[href^="https"]::after {
content: "" !important; // content: "" !important;
} // }
} }
@@ -79,32 +79,32 @@
/* ------------------------- /* -------------------------
SCREEN preview (Paged.js) SCREEN preview (Paged.js)
-------------------------- */ -------------------------- */
@media screen { // @media screen {
/* En écran normal : cacher print-only */ // /* En écran normal : cacher print-only */
body:not(.use-paged) .print-only { display: none !important; } // body:not(.use-paged) .print-only { display: none !important; }
/* Fond et affichage pages */ // /* Fond et affichage pages */
body.use-paged { background: #ddd; } // body.use-paged { background: #ddd; }
body.use-paged .pagedjs_pages { // body.use-paged .pagedjs_pages {
width: 100%; // width: 100%;
padding: 2rem 0; // padding: 2rem 0;
} // }
body.use-paged .pagedjs_page { // body.use-paged .pagedjs_page {
margin: 1rem auto; // margin: 1rem auto;
background: #fff; // background: #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,.35); // box-shadow: 0 0 0 1px rgba(0,0,0,.35);
} // }
body.use-paged .pagedjs_pagebox { // body.use-paged .pagedjs_pagebox {
width: 210mm; // width: 210mm;
min-height: 297mm; // min-height: 297mm;
margin: 0 auto; // margin: 0 auto;
background: #fff; // background: #fff;
} // }
/* Paged.js met le contenu dans .pagedjs_page_content : on évite les surprises */ // /* Paged.js met le contenu dans .pagedjs_page_content : on évite les surprises */
body.use-paged .pagedjs_page_content { // // body.use-paged .pagedjs_page_content {
display: block; // // display: block;
} // // }
} // }
web/themes/custom/eql/scss/global/print/_projets-complets-ecran.scss
+7 -66
View File
@@ -4,8 +4,8 @@
left: inherit !important; left: inherit !important;
} }
.layout-content{ .layout-content{
width: 80vw; // width: 90vw;
margin: auto; // margin: auto;
} }
// ========================= // =========================
@@ -19,27 +19,10 @@
display: none; 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 ////// ///// bouton print //////
.view-header{ .view-header{
position: fixed; position: fixed;
right: 0; right: 0;
margin-right: 2rem; margin-right: 2rem;
@@ -56,12 +39,10 @@
.view-projets{ .view-projets{
margin-top: 4rem !important;
margin-bottom: 4rem !important; margin-bottom: 4rem !important;
///// filtres /////////// ///// filtres ///////////
.buttons-filtres-ressources{display: none;} .buttons-filtres-ressources{display: none;}
// width: 80%; width: 80%;
margin: auto; margin: auto;
.view-filters{ .view-filters{
margin-top: 4rem; 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 { // .node-type-projet {
// visibility: hidden; // visibility: hidden;
// } // }
// } }
} }
} }
web/themes/custom/eql/scss/global/print/_projets-complets-print.scss
+54 -13
View File
@@ -251,19 +251,7 @@
display: none; 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, .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;
}
}
}
web/themes/custom/eql/templates/node--view--projets.html.twig
+7 -5
View File
@@ -113,11 +113,13 @@
<img src="{{ directory }}/images/sceau_excellence_def.png" alt=""> <img src="{{ directory }}/images/sceau_excellence_def.png" alt="">
</div> </div>
</div> </div>
{{ content.field_photo }} <div class= "projet-header-print-content">
{{ content.title }} {{ content.field_photo }}
{{ content.field_equipe }} {{ content.title }}
{{ content.field_region }} {{ content.field_equipe }}
{{ content.field_incube }} {{ content.field_region }}
{{ content.field_incube }}
</div>
</div> </div>
<div class="projet-body-print"> <div class="projet-body-print">