diff --git a/user/themes/carnet-atterrissage/css/mep_carnet.css b/user/themes/carnet-atterrissage/css/mep_carnet.css index a52d61c..eb6e820 100644 --- a/user/themes/carnet-atterrissage/css/mep_carnet.css +++ b/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; diff --git a/user/themes/carnet-atterrissage/templates/partials/base.html.twig b/user/themes/carnet-atterrissage/templates/partials/base.html.twig index fc1a553..3e08fc3 100644 --- a/user/themes/carnet-atterrissage/templates/partials/base.html.twig +++ b/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); + } } } }