Bladeren bron

diverses améliorations de la mep

Valentin 10 maanden geleden
bovenliggende
commit
90e84441a5

+ 46 - 8
user/themes/carnet-atterrissage/css/mep_carnet.css

@@ -12,6 +12,7 @@
     margin-bottom: 16mm;
     bleed: 6mm;
     color: black;
+    marks: crop;
 }
 
 @page:left {
@@ -127,6 +128,7 @@ h3 {
 .latour, .lampe {
   font-family: 'Novel';
   font-weight: normal;
+  margin-top: 20mm;
   margin-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
   margin-right: -16mm;
   margin-bottom: 20mm;
@@ -139,6 +141,12 @@ h3 {
   padding-top: 10mm;
 }
 
+.encart-split {
+  position: absolute;
+  margin-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
+  background-color: #fbf2e7;
+}
+
 .pagedjs_left_page .latour, .pagedjs_left_page .lampe {
   padding-right: 10mm;
   width: 128.375mm;
@@ -168,7 +176,6 @@ h3 {
 }
 
 .lampe {
-  margin-top: 20mm;
   padding-top: 3mm;
   padding-bottom: 3mm;
 }
@@ -183,7 +190,7 @@ img {
 }
 
 .fullpageimage {
-  margin-top: -16mm;
+  margin-top: -22mm;
   margin-left: -10mm;
   width: 171mm;
   height: 230mm;
@@ -197,31 +204,37 @@ img {
   height: 100%;
 }
 
-.tripleimgs {
+.tripleimgs,
+.tripleimgs_bottom {
  break-before: page; 
  break-after: page
 }
 
-.tripleimgs img:nth-of-type(2) {
+.tripleimgs img:nth-of-type(2),
+.tripleimgs_bottom img:first-of-type {
   width: calc(50% - 1mm);
   margin-right: 2mm;
 }
 
-.tripleimgs img:last-of-type {
+.tripleimgs img:last-of-type,
+.tripleimgs_bottom img:nth-of-type(2) {
   width: calc(50% - 1mm);
 }
 
-.tripleimgs2 {
+.tripleimgs2,
+.tripleimgs2_bottom {
   break-before: page; 
   break-after: page
 }
 
-.tripleimgs2 img:nth-of-type(2) {
+.tripleimgs2 img:nth-of-type(2),
+.tripleimgs2_bottom img:first-of-type {
   width: calc(37.5% - 1mm);
   margin-right: 2mm;
 }
 
-.tripleimgs2 img:last-of-type {
+.tripleimgs2 img:last-of-type,
+.tripleimgs2_bottom img:nth-of-type(2) {
   width: calc(62.5% - 1mm);
 }
 
@@ -232,17 +245,42 @@ img {
   overflow: hidden;
 }
 
+.imgfullspreadright {
+  break-before: left;
+  break-after: left;
+  width: 149mm;
+  overflow: hidden;
+}
+
 .imgfullspreadleft img {
   height: 198mm;
   width: auto;
 }
 
+.imgfullspreadright img {
+  height: 198mm;
+  width: auto;
+}
+
 .imgfullspreadleft-right {
   width: 149mm;
   overflow: hidden;
   margin-left: -16mm;
 }
 
+.imgfullspreadright-right {
+  width: 149mm;
+  margin-left: -8mm;
+  overflow: hidden;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.imgfullspreadright-right img {
+  height: 198mm;
+  width: auto;
+}
+
 .imgfullspreadleft-right img {
   height: 198mm;
   width: auto;

+ 58 - 4
user/themes/carnet-atterrissage/templates/partials/base.html.twig

@@ -145,10 +145,10 @@
                 }
             }
             // images collées en bas
-            let bottomImgs = document.getElementsByClassName('bottomimg');
+            let bottomImgs = document.querySelectorAll('.bottomimg, .tripleimgs_bottom, .tripleimgs2_bottom');
             for (let i = 0; i < bottomImgs.length; i++) {
                 let page = bottomImgs[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
-                bottomImgs[i].style.transform = 'translateY(' + (page.getBoundingClientRect().bottom - bottomImgs[i].firstElementChild.getBoundingClientRect().bottom) + 'px)';
+                bottomImgs[i].style.transform = 'translateY(' + (page.getBoundingClientRect().bottom - bottomImgs[i].lastElementChild.getBoundingClientRect().bottom) + 'px)';
             }
             // éléments justifiés pas nécessaires
             let justifiedSplitEl = document.querySelectorAll("[data-align-last-split-element='justify']");
@@ -161,16 +161,70 @@
                 }
             }
             // images fullspread
-            let fullspreadEl = document.getElementsByClassName('imgfullspreadleft');
+            let fullspreadEl = document.querySelectorAll('.imgfullspreadleft, .imgfullspreadright');
             for (let i = 0; i < fullspreadEl.length; i++) {
                 let imgSrc = fullspreadEl[i].firstElementChild.getAttribute('src');
                 let nextPage = fullspreadEl[i].closest('.pagedjs_page').nextElementSibling.querySelectorAll('.pagedjs_page_content');
                 let imgOverflowEl = document.createElement('div');
-                imgOverflowEl.setAttribute('class', 'imgfullspreadleft-right');
+                if (fullspreadEl[i].classList.contains('imgfullspreadleft')) {
+                    imgOverflowEl.setAttribute('class', 'imgfullspreadleft-right');
+                } else {
+                    imgOverflowEl.setAttribute('class', 'imgfullspreadright-right');
+                }
                 let imgOverflow = document.createElement('img');
                 imgOverflow.src = imgSrc;
                 imgOverflowEl.append(imgOverflow);
                 nextPage[0].append(imgOverflowEl);
+                if (fullspreadEl[i].classList.contains('imgfullspreadright')) {
+                    let imgMargin = imgOverflowEl.getBoundingClientRect().right - fullspreadEl[i].firstElementChild.getBoundingClientRect().right;
+                    fullspreadEl[i].firstElementChild.style.marginLeft = imgMargin + 'px';
+                }
+            }
+            // fullpage img page gauche
+            let fullPageImg = document.getElementsByClassName('fullpageimage');
+            for (let i = 0; i < fullPageImg.length; i++) {
+                if (fullPageImg[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
+                .classList.contains('pagedjs_left_page')) {
+                    fullPageImg[i].style.marginLeft = '-22mm';
+                }
+            }
+            // encarts bleed
+            let encarts = document.querySelectorAll('.latour, .lampe')
+                for (let i = 0; i < encarts.length; i++) {
+                    if (encarts[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
+                    .classList.contains('pagedjs_right_page')) {
+                        encarts[i].style.marginRight = '-22mm';
+                        encarts[i].style.paddingRight = '22mm';
+                    }
+                if (encarts[i].hasAttribute('data-split-original')) {
+                    let plainColor = document.createElement('div');
+                    let plainHeight = encarts[i]
+                    .parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
+                    .getBoundingClientRect().bottom - encarts[i].getBoundingClientRect().bottom;
+                    plainColor.setAttribute('class', 'encart-split');
+                    if (encarts[i]
+                    .parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
+                    .classList.contains('pagedjs_right_page')) {
+                        plainColor.style.width = "149mm";
+                    } else {
+                        plainColor.style.width = "129mm";
+                    }
+                    plainColor.style.height = plainHeight + "px";
+                    encarts[i].parentNode.append(plainColor);
+                } else if (encarts[i].hasAttribute('data-split-from')) {
+                    let plainColor = document.createElement('div');
+                    plainColor.setAttribute('class', 'encart-split');
+                    if (encarts[i]
+                    .parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
+                    .classList.contains('pagedjs_right_page')) {
+                        plainColor.style.width = "149mm";
+                    } else {
+                        plainColor.style.width = "129mm";
+                    }
+                    plainColor.style.height = "22mm";
+                    plainColor.style.top = "-22mm";
+                    encarts[i].parentNode.prepend(plainColor);
+                }
             }
         }
     }