This commit is contained in:
2025-07-23 15:43:25 +02:00
17 changed files with 1809 additions and 567 deletions
+6 -165
View File
@@ -99,6 +99,12 @@
display: none;
}
@media screen {
.print_only {
display: none;
}
}
.layout-container {
font-family: "Marianne", sans-serif;
margin: none;
@@ -250,171 +256,6 @@ svg.ext {
margin: auto;
}
}
/* -----------------------/*
* Reset CSS Print "Bretzel"
* Made par Alsacréations
/* ---------------------- */
/*
* Ressources et documentations :
* 1- https://www.docuseal.co/blog/css-print-page-style
* 2- https://www.alsacreations.com/astuce/lire/1160-Une-feuille-de-styles-de-base-pour-le-media-print.html
*/
@media print {
/* Dimension et marges de page */
@page {
size: A4 portrait;
margin: 1.5cm 1.5cm;
}
/* Reset général */
* {
all: unset;
display: revert;
box-sizing: border-box;
}
img {
max-width: 100%;
}
input,
textarea,
select {
all: revert;
}
/* On redéfinit les styles globaux (12pt = 16px) */
body {
width: auto;
margin: 0;
font-family: serif;
font-size: 12pt;
font-family: Georgia, serif;
line-height: 1.5;
color: #000000 !important;
background-color: #ffffff !important;
}
#fotter-bottom {
box-shadow: none !important;
border-top: rgba(0, 0, 0, 0.5);
}
#fotter-bottom a[href^=http]:after,
#fotter-bottom a[href^=https]:after {
content: "";
}
/* Espacements typographiques (15pt = 20px) */
p,
blockquote,
label,
ul,
ol {
margin-block: 0 15pt;
}
p:last-child {
margin-bottom: 0;
}
/* Titrages (24pt = 32px) */
h1 {
margin-block: 0 24pt;
font-weight: 700;
font-size: 18pt;
line-height: 1.1;
}
h2 {
margin-block: 0 18pt;
font-weight: 700;
font-size: 16pt;
line-height: 1.1;
}
h3 {
margin-block: 0 15pt;
font-weight: 700;
font-size: 14pt;
}
h4 {
margin-block: 0 12pt;
font-weight: 700;
font-size: 12pt;
}
/* Classes dédiées print / no-print */
.print {
display: revert;
}
.no-print {
display: none;
}
/* Pas de veuves ou orphelines (3 lignes minimum) */
p,
blockquote {
orphans: 3;
widows: 3;
}
/* Pas de saut de page au sein de ces éléments */
blockquote,
ul,
ol,
figure,
table,
.paragraph,
footer,
.top_top,
.top_bottom {
page-break-inside: avoid;
}
/* Pas de saut de page après ces éléments */
h1,
h2,
h3,
h4,
caption,
.field--name-field-titre {
page-break-after: avoid;
}
/* Styles des liens */
a,
a:link,
a:visited {
background: transparent !important;
color: unset;
font-weight: 700;
text-decoration: underline !important;
}
/* On affiche l'URL des liens externes */
a[href^=http]:after,
a[href^=https]:after {
content: " (" attr(href) ")";
}
/* On masque les vidéos, header et menu de navigation */
video,
object,
iframe,
header,
nav {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* Style page projet */
.page-node-type-projet .layout__region--top {
width: 100% !important;
padding-top: 0rem !important;
}
.page-node-type-projet .layout__region--top .top_top {
flex-direction: column !important;
}
.page-node-type-projet .layout__region--top .top_top .block-entity-fieldnodefield-photo {
width: 100% !important;
}
.page-node-type-projet .layout__region--top .top_top .top_right {
width: 100% !important;
}
.page-node-type-projet .layout__region--top .top_bottom {
width: 100% !important;
}
.page-node-type-projet .layout__region--first {
display: none;
}
.page-node-type-projet .layout__region--second {
flex: 0 1 100% !important;
}
}
/*pages*/
/*
@import "pages/partials/header_footer";
+202
View File
@@ -0,0 +1,202 @@
/*!**********************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./scss/print.scss ***!
\**********************************************************************************************************/
@charset "UTF-8";
/* -----------------------/*
* Reset CSS Print "Bretzel"
* Made par Alsacréations
/* ---------------------- */
/*
* Ressources et documentations :
* 1- https://www.docuseal.co/blog/css-print-page-style
* 2- https://www.alsacreations.com/astuce/lire/1160-Une-feuille-de-styles-de-base-pour-le-media-print.html
*/
@media print {
/* Dimension et marges de page */
@page {
size: A4 portrait;
margin: 1.5cm 1.5cm;
@bottom-center {
content: "Page " counter(page) " / " counter(pages);
}
}
@page :first {
@top-center {
content: "Titre du document";
font-size: 14pt;
font-weight: bold;
}
}
/* Reset général */
* {
all: unset;
display: revert;
box-sizing: border-box;
}
img {
max-width: 100%;
}
input,
textarea,
select {
all: revert;
}
/* On redéfinit les styles globaux (12pt = 16px) */
body {
width: auto;
margin: 0;
font-family: serif;
font-size: 12pt;
font-family: Georgia, serif;
line-height: 1.5;
color: #000000 !important;
background-color: #ffffff !important;
}
.back-cover {
break-before: page;
margin-top: 55rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.back-cover h2 {
margin-top: 1rem;
color: rgb(9, 57, 139);
font-size: 1.2rem;
}
.back-cover h2 ::before {
content: "";
border-top: 1px solid black;
}
.back-cover .view-id-partenaires .view-content img {
width: 5rem;
height: auto;
}
.back-cover .view-id-partenaires .view-content a[href^=http]:after {
display: none;
}
.back-cover .view-id-partenaires .views-row-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/* Espacements typographiques (15pt = 20px) */
p,
blockquote,
label,
ul,
ol {
margin-block: 0 15pt;
}
p:last-child {
margin-bottom: 0;
}
/* Titrages (24pt = 32px) */
h1 {
margin-block: 0 24pt;
font-weight: 700;
font-size: 18pt;
line-height: 1.1;
}
h2 {
margin-block: 0 18pt;
font-weight: 700;
font-size: 16pt;
line-height: 1.1;
}
h3 {
margin-block: 0 15pt;
font-weight: 700;
font-size: 14pt;
}
h4 {
margin-block: 0 12pt;
font-weight: 700;
font-size: 12pt;
}
/* Classes dédiées print / no-print */
.print {
display: revert;
}
.no-print {
display: none;
}
/* Pas de veuves ou orphelines (3 lignes minimum) */
p,
blockquote {
orphans: 3;
widows: 3;
}
/* Pas de saut de page au sein de ces éléments */
blockquote,
ul,
ol,
figure,
table,
.paragraph,
footer,
.top_top,
.top_bottom {
page-break-inside: avoid;
}
/* Pas de saut de page après ces éléments */
h1,
h2,
h3,
h4,
caption,
.field--name-field-titre {
page-break-after: avoid;
}
/* Styles des liens */
a,
a:link,
a:visited {
background: transparent !important;
color: unset;
font-weight: 700;
text-decoration: underline !important;
}
/* On affiche l'URL des liens externes */
a[href^=http]:after,
a[href^=https]:after {
content: " (" attr(href) ")";
}
/* On masque les vidéos, header et menu de navigation */
video,
object,
iframe,
header,
nav {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* Style page projet */
.page-node-type-projet .layout__region--top {
width: 100% !important;
padding-top: 0rem !important;
}
.page-node-type-projet .layout__region--top .top_top {
flex-direction: column !important;
}
.page-node-type-projet .layout__region--top .top_top .block-entity-fieldnodefield-photo {
width: 100% !important;
}
.page-node-type-projet .layout__region--top .top_top .slick-dots, .page-node-type-projet .layout__region--top .top_top .slick-arrow {
display: none;
}
.page-node-type-projet .layout__region--top .top_top .top_right {
width: 100% !important;
}
.page-node-type-projet .layout__region--top .top_bottom {
width: 100% !important;
}
.page-node-type-projet .layout__region--first {
display: none;
}
.page-node-type-projet .layout__region--second {
flex: 0 1 100% !important;
}
}
File diff suppressed because one or more lines are too long
+32
View File
@@ -0,0 +1,32 @@
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (function() { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./scripts/paged-setup.js":
/*!********************************!*\
!*** ./scripts/paged-setup.js ***!
\********************************/
/***/ (function() {
eval("// window.runPagedIfPrinting = function () {\n// console.log(\"📄 Impression via iframe\");\n \n// // 1. Créer une iframe cachée\n// const iframe = document.createElement(\"iframe\");\n// iframe.style.position = \"fixed\";\n// iframe.style.left = \"-100vw\"; // hors de la vue\n// iframe.style.top = \"-100vh\";\n// iframe.style.width = \"0\";\n// iframe.style.height = \"0\";\n// iframe.style.visibility = \"hidden\";\n// iframe.setAttribute(\"aria-hidden\", \"true\");\n \n// document.body.appendChild(iframe);\n \n// // 2. Copier tout le document dans liframe\n// const clonedHTML = document.documentElement.outerHTML;\n// const doc = iframe.contentWindow.document;\n// doc.open();\n// doc.write(clonedHTML);\n// doc.close();\n \n// // 3. Attendre que tout soit chargé\n// iframe.onload = () => {\n// console.log(\"📦 Iframe chargée, injection manuelle de Paged.js\");\n \n// const pagedScript = iframe.contentDocument.createElement(\"script\");\n// pagedScript.src = \"https://unpkg.com/pagedjs/dist/paged.js\";\n// pagedScript.onload = () => {\n// console.log(\"📚 Paged.js chargé, génération des pages...\");\n \n// const previewer = new iframe.contentWindow.Paged.Previewer();\n \n// previewer.preview().then(() => {\n// console.log(\"🖨️ Aperçu prêt, impression dans iframe…\");\n \n// setTimeout(() => {\n// const printScript = iframe.contentDocument.createElement(\"script\");\n// printScript.textContent = `\n// window.addEventListener(\"load\", () => {\n// setTimeout(() => {\n// window.print();\n// window.onafterprint = () => window.close(); // facultatif\n// }, 100);\n// });\n// `;\n// iframe.contentDocument.body.appendChild(printScript);\n// }, 300);\n \n// });\n// };\n \n// // Injecte le script dans <head> de liframe\n// iframe.contentDocument.head.appendChild(pagedScript);\n// };\n \n// };\n \n// // 📎 Listeners impression\n// function setupPagedPrintListeners() {\n// window.addEventListener(\"beforeprint\", (e) => {\n// e.preventDefault(); // empêcher la version native\n// });\n \n// if (window.matchMedia) {\n// window.matchMedia(\"print\").addEventListener(\"change\", (e) => {\n// if (e.matches) {\n// window.runPagedIfPrinting();\n// }\n// });\n// }\n \n// console.log(\"✅ Paged.js listeners (iframe) installés.\");\n// }\n \n// if (document.readyState !== \"loading\") {\n// setupPagedPrintListeners();\n// } else {\n// document.addEventListener(\"DOMContentLoaded\", setupPagedPrintListeners);\n// }\n \n\nwindow.runPagedIfPrinting = function () {\n console.log(\"📄 Impression détectée — Paged.js va s'exécuter\");\n \n if (typeof Paged !== \"undefined\" && Paged.Previewer) {\n // Sauvegarde du DOM actuel\n const original = document.body.cloneNode(true);\n \n const previewer = new Paged.Previewer();\n \n previewer.preview().then(() => {\n console.log(\"📃 Paged.js rendu terminé\");\n \n const restoreDOM = () => {\n console.log(\"🔄 Restauration du DOM après impression\");\n document.body.replaceWith(original);\n window.removeEventListener(\"afterprint\", restoreDOM);\n };\n \n // ✅ Restauration après impression (ou annulation)\n window.addEventListener(\"afterprint\", restoreDOM);\n });\n } else {\n console.warn(\"❌ Paged.js non chargé ou Previewer indisponible !\");\n }\n };\n \n // Initialisation automatique\n function setupPagedPrintListeners() {\n // Classique\n window.addEventListener(\"beforeprint\", window.runPagedIfPrinting);\n \n // Pour certains navigateurs modernes\n if (window.matchMedia) {\n const mediaQueryList = window.matchMedia(\"print\");\n if (mediaQueryList.addEventListener) {\n mediaQueryList.addEventListener(\"change\", (e) => {\n if (e.matches) {\n window.runPagedIfPrinting();\n }\n });\n } else {\n // Safari fallback\n mediaQueryList.addListener((e) => {\n if (e.matches) {\n window.runPagedIfPrinting();\n }\n });\n }\n }\n \n console.log(\"✅ Paged.js listeners installés.\");\n }\n \n // Démarrage au bon moment\n if (document.readyState !== \"loading\") {\n setupPagedPrintListeners();\n } else {\n document.addEventListener(\"DOMContentLoaded\", setupPagedPrintListeners);\n }\n \n\n//# sourceURL=webpack://dev.eql.fr/./scripts/paged-setup.js?");
/***/ })
/******/ });
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./scripts/paged-setup.js"]();
/******/
/******/ })()
;
+32
View File
@@ -0,0 +1,32 @@
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (function() { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./scss/print.scss":
/*!*************************!*\
!*** ./scss/print.scss ***!
\*************************/
/***/ (function() {
eval("{throw new Error(\"Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\\nHookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\\nUndefined variable.\\n ╷\\n79 │ color: $blue-dark;\\n │ ^^^^^^^^^^\\n ╵\\n scss/print.scss 79:20 root stylesheet\\n at tryRunOrWebpackError (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/webpack/lib/HookWebpackError.js:87:9)\\n at __webpack_require_module__ (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/webpack/lib/Compilation.js:5485:12)\\n at __webpack_require__ (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/webpack/lib/Compilation.js:5432:18)\\n at /home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/webpack/lib/Compilation.js:5520:20\\n at symbolIterator (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/neo-async/async.js:3485:9)\\n at done (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/neo-async/async.js:3527:9)\\n at Hook.eval [as callAsync] (eval at create (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)\\n at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/tapable/lib/Hook.js:18:14)\\n at /home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/webpack/lib/Compilation.js:5407:43\\n at symbolIterator (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/neo-async/async.js:3482:9)\\n-- inner error --\\nError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\\nUndefined variable.\\n ╷\\n79 │ color: $blue-dark;\\n │ ^^^^^^^^^^\\n ╵\\n scss/print.scss 79:20 root stylesheet\\n at Object.<anonymous> (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/css-loader/dist/cjs.js!/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/sass-loader/dist/cjs.js!/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/scss/print.scss:1:7)\\n at /home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:519:10\\n at Hook.eval [as call] (eval at create (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)\\n at Hook.CALL_DELEGATE [as _call] (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/tapable/lib/Hook.js:14:14)\\n at /home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/webpack/lib/Compilation.js:5487:39\\n at tryRunOrWebpackError (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/webpack/lib/HookWebpackError.js:82:7)\\n at __webpack_require_module__ (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/webpack/lib/Compilation.js:5485:12)\\n at __webpack_require__ (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/webpack/lib/Compilation.js:5432:18)\\n at /home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/webpack/lib/Compilation.js:5520:20\\n at symbolIterator (/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/neo-async/async.js:3485:9)\\n\\nGenerated code for /home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/css-loader/dist/cjs.js!/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/node_modules/sass-loader/dist/cjs.js!/home/ouidade/Developer/docker-eql/src_d9/web/themes/custom/eql/scss/print.scss\\n1 | throw new Error(\\\"Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\\\\nUndefined variable.\\\\n ╷\\\\n79 │ color: $blue-dark;\\\\n │ ^^^^^^^^^^\\\\n ╵\\\\n scss/print.scss 79:20 root stylesheet\\\");\");\n\n//# sourceURL=webpack://dev.eql.fr/./scss/print.scss?\n}");
/***/ })
/******/ });
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module doesn't tell about it's top-level declarations so it can't be inlined
/******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./scss/print.scss"]();
/******/
/******/ })()
;
File diff suppressed because one or more lines are too long
+3
View File
@@ -9,6 +9,9 @@ base theme: false
libraries:
- eql/global-css
- eql/global-js
- eql/print_only
# - eql/pagedjs
regions:
+14 -5
View File
@@ -12,10 +12,19 @@ global-js:
dist/assets/bundle.js: {}
# librairies/slick-1.8.1/slick/slick.js: {}
librairies/slick-1.8.1/slick/slick.min.js: {}
dependencies:
- core/jquery
# pagedjs:
# version: 1.x
# js:
# https://unpkg.com/pagedjs/dist/paged.js: {}
# dist/assets/js/paged-setup.js: {}
# dependencies:
# - core/jquery
print_only:
css:
theme:
dist/assets/css/print.css: {}
+1154 -314
View File
File diff suppressed because it is too large Load Diff
+4 -1
View File
@@ -14,9 +14,12 @@
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^7.1.2",
"extract-loader": "^4.0.3",
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^2.9.2",
"node-sass": "*",
"sass": "^1.77.2",
"sass": "^1.89.2",
"sass-loader": "^14.2.1",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4"
@@ -0,0 +1,142 @@
// window.runPagedIfPrinting = function () {
// console.log("📄 Impression via iframe");
// // 1. Créer une iframe cachée
// const iframe = document.createElement("iframe");
// iframe.style.position = "fixed";
// iframe.style.left = "-100vw"; // hors de la vue
// iframe.style.top = "-100vh";
// iframe.style.width = "0";
// iframe.style.height = "0";
// iframe.style.visibility = "hidden";
// iframe.setAttribute("aria-hidden", "true");
// document.body.appendChild(iframe);
// // 2. Copier tout le document dans liframe
// const clonedHTML = document.documentElement.outerHTML;
// const doc = iframe.contentWindow.document;
// doc.open();
// doc.write(clonedHTML);
// doc.close();
// // 3. Attendre que tout soit chargé
// iframe.onload = () => {
// console.log("📦 Iframe chargée, injection manuelle de Paged.js");
// const pagedScript = iframe.contentDocument.createElement("script");
// pagedScript.src = "https://unpkg.com/pagedjs/dist/paged.js";
// pagedScript.onload = () => {
// console.log("📚 Paged.js chargé, génération des pages...");
// const previewer = new iframe.contentWindow.Paged.Previewer();
// previewer.preview().then(() => {
// console.log("🖨️ Aperçu prêt, impression dans iframe…");
// setTimeout(() => {
// const printScript = iframe.contentDocument.createElement("script");
// printScript.textContent = `
// window.addEventListener("load", () => {
// setTimeout(() => {
// window.print();
// window.onafterprint = () => window.close(); // facultatif
// }, 100);
// });
// `;
// iframe.contentDocument.body.appendChild(printScript);
// }, 300);
// });
// };
// // Injecte le script dans <head> de liframe
// iframe.contentDocument.head.appendChild(pagedScript);
// };
// };
// // 📎 Listeners impression
// function setupPagedPrintListeners() {
// window.addEventListener("beforeprint", (e) => {
// e.preventDefault(); // empêcher la version native
// });
// if (window.matchMedia) {
// window.matchMedia("print").addEventListener("change", (e) => {
// if (e.matches) {
// window.runPagedIfPrinting();
// }
// });
// }
// console.log("✅ Paged.js listeners (iframe) installés.");
// }
// if (document.readyState !== "loading") {
// setupPagedPrintListeners();
// } else {
// document.addEventListener("DOMContentLoaded", setupPagedPrintListeners);
// }
window.runPagedIfPrinting = function () {
console.log("📄 Impression détectée — Paged.js va s'exécuter");
if (typeof Paged !== "undefined" && Paged.Previewer) {
// Sauvegarde du DOM actuel
const original = document.body.cloneNode(true);
const previewer = new Paged.Previewer();
previewer.preview().then(() => {
console.log("📃 Paged.js rendu terminé");
const restoreDOM = () => {
console.log("🔄 Restauration du DOM après impression");
document.body.replaceWith(original);
window.removeEventListener("afterprint", restoreDOM);
};
// ✅ Restauration après impression (ou annulation)
window.addEventListener("afterprint", restoreDOM);
});
} else {
console.warn("❌ Paged.js non chargé ou Previewer indisponible !");
}
};
// Initialisation automatique
function setupPagedPrintListeners() {
// Classique
window.addEventListener("beforeprint", window.runPagedIfPrinting);
// Pour certains navigateurs modernes
if (window.matchMedia) {
const mediaQueryList = window.matchMedia("print");
if (mediaQueryList.addEventListener) {
mediaQueryList.addEventListener("change", (e) => {
if (e.matches) {
window.runPagedIfPrinting();
}
});
} else {
// Safari fallback
mediaQueryList.addListener((e) => {
if (e.matches) {
window.runPagedIfPrinting();
}
});
}
}
console.log("✅ Paged.js listeners installés.");
}
// Démarrage au bon moment
if (document.readyState !== "loading") {
setupPagedPrintListeners();
} else {
document.addEventListener("DOMContentLoaded", setupPagedPrintListeners);
}
@@ -4,6 +4,13 @@
display: none;
}
}
.print_only{
@media screen {
display: none;
}
}
.layout-container {
font-family: $font-family-default;
margin: none;
@@ -10,13 +10,25 @@
* 1- https://www.docuseal.co/blog/css-print-page-style
* 2- https://www.alsacreations.com/astuce/lire/1160-Une-feuille-de-styles-de-base-pour-le-media-print.html
*/
// @media screen{
@media print {
/* Dimension et marges de page */
@page {
size: A4 portrait;
margin: 1.5cm 1.5cm;
// @bottom-center {
// content: "Page " counter(page) " / " counter(pages);
// }
}
// @page:first {
// @top-center {
// content: "Titre du document";
// font-size: 14pt;
// font-weight: bold;
// }
// }
/* Reset général */
* {
@@ -45,14 +57,45 @@
color: #000000 !important;
background-color: #ffffff !important;
}
#fotter-bottom{
box-shadow: none !important;
border-top: rgba($color: #000000, $alpha: 0.5);
a[href^="http"]:after,
a[href^="https"]:after {
content: "";
// #fotter-bottom{
// box-shadow: none !important;
// border-top: rgba($color: #000000, $alpha: 0.5);
// a[href^="http"]:after,
// a[href^="https"]:after {
// content: "";
// }
// }
.back-cover{
break-before: page;
// margin-top: 55rem;
display: flex;
flex-direction: column ;
justify-content: center;
.region{
h2{
margin-top: 0;
color: $blue-dark;
font-size: 1.2rem;
}
}
.view-id-partenaires{
.view-content {
img{
width: 5rem;
height: auto;
}
a[href^="http"]:after{display: none;}
}
.views-row-wrapper{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
}
/* Espacements typographiques (15pt = 20px) */
p,
@@ -166,6 +209,19 @@
.block-entity-fieldnodefield-photo{
width: 100% !important;
}
.slick-dots, .slick-arrow{
display: none;
}
// .slick-list{
// overflow: visible;
// .slick-track{
// display: flex;
// flex-direction: row;
// flex-wrap: wrap;
// width: 100%;
// }
// }
.top_right{
width: 100% !important;
}
@@ -182,5 +238,5 @@
}
}
}
}
-1
View File
@@ -14,7 +14,6 @@
// @import "global/_reset";
@import "global/_typography";
@import "global/_mediaqueries";
@import "global/_print";
// @import "global/_nodetyperessource.scss";
@@ -42,6 +42,7 @@
<js-placeholder token="{{ placeholder_token }}">
</head>
<body{{ attributes.addClass(body_classes) }}>
{#
Keyboard navigation/accessibility link to main content section in
page.html.twig.
@@ -30,50 +30,59 @@
* @see html.html.twig
*/
#}
<div class="layout-container">
<header role="banner">
<section id="header-top">
{{ page.header_top_left }}
{{ page.header_top_rigth }}
</section>
{{ page.header_bottom }}
</header>
<div class="layout-container">
{{ page.help }}
<main role="main">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
<header role="banner" class="no-print">
<section id="header-top">
{{ page.header_top_left }}
{{ page.header_top_rigth }}
</section>
{{ page.header_bottom }}
</header>
<div class="layout-content">
{{ page.content }}
</div>{# /.layout-content #}
<div class="print_only cover no-print-after">{# div pour couverture print only #}
{{ page.header_top_left }}
{{ page.header_top_rigth }}
</div>
{% if page.sidebar_first %}
<aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
</aside>
{% endif %}
{{ page.help }}
{% if page.sidebar_second %}
<aside class="layout-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endif %}
<main role="main">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
</main>
<div class="layout-content">
{{ page.content }}
</div>{# /.layout-content #}
<footer role="contentinfo">
{{ page.footer_top }}
<section id="fotter-bottom">
{% if page.sidebar_first %}
<aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
</aside>
{% endif %}
{% if page.sidebar_second %}
<aside class="layout-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endif %}
</main>
<footer role="contentinfo" class="no-print">
{{ page.footer_top }}
<section id="fotter-bottom">
{{ page.footer_bottom_left }}
{{ page.footer_bottom_middle }}
{{ page.footer_bottom_right }}
</section>
</footer>
<div class="print_only back-cover no-print-after">{# div pour 4eme de couverture print only #}
{{ page.footer_bottom_left }}
{{ page.footer_bottom_middle }}
{{ page.footer_bottom_right }}
</section>
</footer>
</div>{# /.layout-container #}
</div>
</div>{# /.layout-container #}
+29 -38
View File
@@ -1,41 +1,32 @@
const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
let config = {
mode: 'development',
entry: [
"./scripts/main.js",
"./scripts/extlink.js",
"./scss/styles.scss",
],
output: {
path: path.resolve(__dirname, "./dist/assets"),
filename: "./bundle.js"
},
module: {
rules: [
{
test: /\.scss$/i,
use: [
{
loader: 'file-loader',
options: {
name: './css/bundle.css',
}
},
// Compile le Sass en CSS
"sass-loader"
],
},
module.exports = {
mode: "development",
entry: {
bundle: "./scss/styles.scss", // Pour l'affichage normal
print: "./scss/print.scss", // Feuille de style print séparée
scripts: ["./scripts/main.js", "./scripts/extlink.js"]
},
output: {
path: path.resolve(__dirname, "./dist/assets"),
filename: "js/[name].js", // produit scripts.js
},
module: {
rules: [
{
test: /\.scss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
],
}
}
module.exports = config;
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css", // donne bundle.css et print.css
}),
],
};