twig header print

This commit is contained in:
2026-05-21 19:42:45 +02:00
parent 8cbd6e4acd
commit a36758e0d3
5 changed files with 188 additions and 289 deletions
+65 -150
View File
@@ -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 lURL 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";
+55 -55
View File
@@ -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 lURL 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;
// // }
// }
@@ -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;
// }
// }
}
}
}
@@ -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;
}
}
}
@@ -113,11 +113,13 @@
<img src="{{ directory }}/images/sceau_excellence_def.png" alt="">
</div>
</div>
{{ content.field_photo }}
{{ content.title }}
{{ content.field_equipe }}
{{ content.field_region }}
{{ content.field_incube }}
<div class= "projet-header-print-content">
{{ content.field_photo }}
{{ content.title }}
{{ content.field_equipe }}
{{ content.field_region }}
{{ content.field_incube }}
</div>
</div>
<div class="projet-body-print">