From 6ebe96cfa2fa0174ec026a77edec72034399b5c4 Mon Sep 17 00:00:00 2001 From: ouidade Date: Thu, 9 Apr 2026 13:11:20 +0200 Subject: [PATCH] break-page --- .../custom/eql/dist/assets/css/bundle.css | 194 ++------------ .../global/print/_projets-complets-print.scss | 248 +++--------------- 2 files changed, 64 insertions(+), 378 deletions(-) diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css index 724fc00..70fd3de 100644 --- a/web/themes/custom/eql/dist/assets/css/bundle.css +++ b/web/themes/custom/eql/dist/assets/css/bundle.css @@ -587,183 +587,39 @@ svg.ext { } @media print { + .layout-container { + display: block; + } + .path-projets-complets .layout-content { + width: 80vw; + } + .path-projets-complets .layout-content .views-row { + margin-top: 3rem; + break-after: page; + page-break-after: always; + } + .path-projets-complets .layout-content .views-row .projet-header-print { + padding-top: 3rem; + } + .path-projets-complets .layout-content .views-row .projet-header-print .field--name-title { + font-size: 1.5rem; + } + .path-projets-complets .layout-content .views-row .projet-body-print { + padding-top: 3rem; + } .path-projets-complets .views-row { - display: block !important; - margin: 0 !important; - overflow: visible !important; - float: none !important; - position: static !important; - } - .path-projets-complets .node-type-projet { - break-before: page; page-break-before: always; - border: 1px solid black; - margin: 0 !important; - overflow: visible !important; + break-before: page; } - .path-projets-complets .views-row:first-child .node-type-projet { - break-before: auto; + .path-projets-complets .views-row:first-child { page-break-before: auto; - } - .path-projets-complets .projet-content { - display: block !important; + break-before: auto; } .path-projets-complets .projet-header-print { - display: block; - break-inside: avoid; - page-break-inside: avoid; - overflow: visible !important; - } - .path-projets-complets .projet-body-print { - display: block; - break-before: page; - page-break-before: always; - overflow: visible !important; - } - .path-projets-complets .projet-header-print .field, - .path-projets-complets .projet-header-print .field__items, - .path-projets-complets .projet-header-print .field__item, - .path-projets-complets .projet-header-print h2, - .path-projets-complets .projet-header-print p, - .path-projets-complets .projet-header-print blockquote { - break-inside: avoid; - page-break-inside: avoid; - } - .path-projets-complets .projet-body-print .field, - .path-projets-complets .projet-body-print .field__items, - .path-projets-complets .projet-body-print .field__item, - .path-projets-complets .projet-body-print .paragraph, - .path-projets-complets .projet-body-print p, - .path-projets-complets .projet-body-print ul, - .path-projets-complets .projet-body-print li { - break-inside: auto; - page-break-inside: auto; - overflow: visible !important; - } - .path-projets-complets .projet-header-print .field--name-field-photo { - margin-bottom: 1.5rem; - } - .path-projets-complets .projet-header-print .field--name-field-photo .field__label { - display: none; - } - .path-projets-complets .projet-header-print .field--name-field-photo .field__items { - display: grid !important; - grid-template-columns: repeat(3, 1fr); - gap: 3px; - } - .path-projets-complets .projet-header-print .field--name-field-photo .field__item:first-child { - grid-column: 1/4; - grid-row: 1; - } - .path-projets-complets .projet-header-print .field--name-field-photo .field__item { - overflow: hidden; - } - .path-projets-complets .projet-header-print .field--name-field-photo .field__item img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; - } - .path-projets-complets .projet-header-print .field--name-title { - font-family: "Marianne"; - font-size: 1.5rem; - font-weight: 800; - color: rgb(0, 158, 227); - margin-bottom: 1rem; - } - .path-projets-complets .projet-header-print .field--name-title a { - color: rgb(0, 158, 227); - text-decoration: none; - } - .path-projets-complets .projet-header-print .field--name-field-equipe { - color: rgb(9, 57, 139); - font-size: 1.2rem; - font-weight: 900; - text-transform: uppercase; - margin-bottom: 0.5rem; - } - .path-projets-complets .projet-header-print .field--name-field-equipe .field__label { - display: none; - } - .path-projets-complets .projet-header-print .field--name-field-incube { - width: fit-content; - background-color: rgb(225, 0, 15); - color: white; - font-weight: 800; - padding-right: 0.3rem; - padding-left: 0.2rem; - display: flex; - flex-direction: row; - } - .path-projets-complets .projet-header-print .field--name-field-incube::before { - content: " Projet "; - padding-right: 0.5rem; - } - .path-projets-complets .projet-header-print .field--name-field-incube .field__item { - display: none; - } - .path-projets-complets .projet-body-print .field--name-field-region { - width: 30%; - position: relative; - height: 80px; - text-align: center; - padding-right: 1rem; - } - .path-projets-complets .projet-body-print .field--name-field-region .field__label { - display: none; - } - .path-projets-complets .projet-body-print .field--name-field-region::before { - content: url("../images/pictos/picto_lieu.svg"); - min-width: 30px; - height: auto; - padding-right: 1rem; - position: absolute; - left: 0; - margin-top: 0.83em; - margin-left: 1rem; - } - .path-projets-complets .projet-body-print .field--name-field-textes .field__label { - display: none; - } - .path-projets-complets .projet-body-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; - } - .path-projets-complets .projet-body-print .field--name-field-textes .field--name-field-titre::after { - content: " :"; - padding-left: 0.5rem; - } - .path-projets-complets .projet-body-print .field--name-field-type-de-moa a, - .path-projets-complets .projet-body-print .field--name-field-type-de-projet a, - .path-projets-complets .projet-body-print .field--name-field-etape-du-projet a { - color: black; - text-decoration: none; - } - .path-projets-complets .projet-body-print .field--name-field-type-de-moa .field__label, - .path-projets-complets .projet-body-print .field--name-field-type-de-projet .field__label, - .path-projets-complets .projet-body-print .field--name-field-etape-du-projet .field__label { - color: rgb(9, 57, 139); - font-size: 1.2rem; - font-weight: 900; - text-transform: uppercase; - margin-bottom: 0 !important; - } - .path-projets-complets .projet-body-print .field--name-field-type-de-moa .field__label::after, - .path-projets-complets .projet-body-print .field--name-field-type-de-projet .field__label::after, - .path-projets-complets .projet-body-print .field--name-field-etape-du-projet .field__label::after { - content: ":"; - padding-left: 0.5rem; - } - .path-projets-complets .field--name-field-neuf-rehabilitation, - .path-projets-complets .field--name-field-encours-fini, - .path-projets-complets svg.ext { - display: none !important; + page-break-after: always; + break-after: page; } } - /*pages*/ /* @import "pages/partials/header_footer"; 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 91d6222..58f18fd 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 @@ -1,216 +1,46 @@ // ========================= // PRINT // ========================= -.path-projets-complets { +@media print { + .layout-container{ + display: block; + } + .path-projets-complets { - @media print { - - .views-row { - display: block !important; - margin: 0 !important; - overflow: visible !important; - float: none !important; - position: static !important; - } - - .node-type-projet { - break-before: page; - page-break-before: always; - border: 1px solid black; - margin: 0 !important; - overflow: visible !important; - } - - .views-row:first-child .node-type-projet { - break-before: auto; - page-break-before: auto; - } - - .projet-content { - display: block !important; - } - - .projet-header-print { - display: block; - break-inside: avoid; - page-break-inside: avoid; - overflow: visible !important; - } - - .projet-body-print { - display: block; - break-before: page; - page-break-before: always; - overflow: visible !important; - } - - .projet-header-print .field, - .projet-header-print .field__items, - .projet-header-print .field__item, - .projet-header-print h2, - .projet-header-print p, - .projet-header-print blockquote { - break-inside: avoid; - page-break-inside: avoid; - } - - .projet-body-print .field, - .projet-body-print .field__items, - .projet-body-print .field__item, - .projet-body-print .paragraph, - .projet-body-print p, - .projet-body-print ul, - .projet-body-print li { - break-inside: auto; - page-break-inside: auto; - overflow: visible !important; - } - - .projet-header-print .field--name-field-photo { - margin-bottom: 1.5rem; - - .field__label { - display: none; - } - - .field__items { - display: grid !important; - grid-template-columns: repeat(3, 1fr); - // grid-template-rows: 500px 150px 150px; - gap: 3px; - } - - .field__item:first-child { - grid-column: 1 / 4; - grid-row: 1; - } - - .field__item { - overflow: hidden; - } - - .field__item img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; - } - } - - .projet-header-print .field--name-title { - font-family: "Marianne"; - font-size: 1.5rem; - font-weight: 800; - color: $blue-light; - margin-bottom: 1rem; - - a { - color: $blue-light; - text-decoration: none; - } - } - - .projet-header-print .field--name-field-equipe { - color: $blue-dark; - font-size: 1.2rem; - font-weight: 900; - text-transform: uppercase; - margin-bottom: .5rem; - - .field__label { - display: none; - } - } - - .projet-header-print .field--name-field-incube { - width: fit-content; - background-color: $red; - color: white; - font-weight: 800; - padding-right: 0.3rem; - padding-left: 0.2rem; - display: flex; - flex-direction: row; - - &::before { - content: ' Projet '; - padding-right: 0.5rem; - } - - .field__item { - display: none; - } - } - - .projet-body-print .field--name-field-region { - width: 30%; - position: relative; - height: 80px; - text-align: center; - padding-right: 1rem; - - .field__label { - display: none; - } - - &::before { - content: url("../images/pictos/picto_lieu.svg"); - min-width: 30px; - height: auto; - padding-right: 1rem; - position: absolute; - left: 0; - margin-top: .83em; - margin-left: 1rem; - } - } - - .projet-body-print .field--name-field-textes { - .field__label { - display: none; - } - - .field--name-field-titre { - color: $blue-dark; - font-size: 1.2rem; - font-weight: 900; - text-transform: uppercase; - margin-bottom: 0 !important; - - &::after { - content: ' :'; - padding-left: 0.5rem; + .layout-content{ + width: 80vw; + .views-row{ + + margin-top: 3rem; + break-after: page ; + page-break-after: always; + + .projet-header-print{ + padding-top: 3rem; + .field--name-title{ + font-size: 1.5rem; + } + } + .projet-body-print{ + padding-top: 3rem ; + } } - } + } - - .projet-body-print .field--name-field-type-de-moa, - .projet-body-print .field--name-field-type-de-projet, - .projet-body-print .field--name-field-etape-du-projet { - a { - color: black; - text-decoration: none; - } - - .field__label { - color: $blue-dark; - font-size: 1.2rem; - font-weight: 900; - text-transform: uppercase; - margin-bottom: 0 !important; - - &::after { - content: ':'; - padding-left: 0.5rem; - } - } - } - - .field--name-field-neuf-rehabilitation, - .field--name-field-encours-fini, - svg.ext { - display: none !important; - } - } } - \ No newline at end of file + .path-projets-complets .views-row { + page-break-before: always; + break-before: page; + } + + .path-projets-complets .views-row:first-child { + page-break-before: auto; + break-before: auto; + } + + .path-projets-complets .projet-header-print { + page-break-after: always; + break-after: page; + } + +} \ No newline at end of file