diff --git a/user/themes/carnet-atterrissage/css/mep_carnet.css b/user/themes/carnet-atterrissage/css/mep_carnet.css index eb6e820..8c9dfa1 100644 --- a/user/themes/carnet-atterrissage/css/mep_carnet.css +++ b/user/themes/carnet-atterrissage/css/mep_carnet.css @@ -238,27 +238,39 @@ img { width: calc(62.5% - 1mm); } -.imgfullspreadleft { +.imgfullspreadleft, +.imgfullspreadright, +.imgfullspreadright_bleedtop, +.imgfullspreadright_bleed { break-before: left; break-after: left; width: 149mm; overflow: hidden; } -.imgfullspreadright { - break-before: left; - break-after: left; - width: 149mm; - overflow: hidden; +.imgfullspreadright_bleedtop { + margin-top: -22mm; + height: 220mm; } -.imgfullspreadleft img { +.imgfullspreadright_bleed { + margin-top: -22mm; + height: 242mm; +} + +.imgfullspreadleft img, +.imgfullspreadright img { height: 198mm; width: auto; } -.imgfullspreadright img { - height: 198mm; +.imgfullspreadright_bleedtop img { + height: 220mm; + width: auto; +} + +.imgfullspreadright_bleed img { + height: 242mm; width: auto; } @@ -269,13 +281,33 @@ img { } .imgfullspreadright-right { - width: 149mm; + width: 143mm; margin-left: -8mm; overflow: hidden; display: flex; justify-content: flex-end; } + +.imgfullspreadright_bleedtop-right, .imgfullspreadright_bleed-right { + width: 173mm; + height: 220mm !important; + margin-top: -22mm; + margin-left: -8mm; + overflow: hidden; + display: flex; + justify-content: flex-end; +} + +.imgfullspreadright_bleed-right, .imgfullspreadright_bleed-right img { + height: 242mm !important; +} + +.imgfullspreadright_bleedtop-right img, .imgfullspreadright_bleed-right img { + height: 220mm; + width: auto; +} + .imgfullspreadright-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 3e08fc3..d7204d9 100644 --- a/user/themes/carnet-atterrissage/templates/partials/base.html.twig +++ b/user/themes/carnet-atterrissage/templates/partials/base.html.twig @@ -161,21 +161,27 @@ } } // images fullspread - let fullspreadEl = document.querySelectorAll('.imgfullspreadleft, .imgfullspreadright'); + let fullspreadEl = document.querySelectorAll('.imgfullspreadleft, .imgfullspreadright, .imgfullspreadright_bleedtop, .imgfullspreadright_bleed'); 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'); if (fullspreadEl[i].classList.contains('imgfullspreadleft')) { imgOverflowEl.setAttribute('class', 'imgfullspreadleft-right'); - } else { + } else if (fullspreadEl[i].classList.contains('imgfullspreadright')) { imgOverflowEl.setAttribute('class', 'imgfullspreadright-right'); + } else if (fullspreadEl[i].classList.contains('imgfullspreadright_bleedtop')) { + imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleedtop-right'); + } else if (fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) { + imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleed-right'); } let imgOverflow = document.createElement('img'); imgOverflow.src = imgSrc; imgOverflowEl.append(imgOverflow); nextPage[0].append(imgOverflowEl); - if (fullspreadEl[i].classList.contains('imgfullspreadright')) { + if (fullspreadEl[i].classList.contains('imgfullspreadright') + || fullspreadEl[i].classList.contains('imgfullspreadright_bleedtop') + || fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) { let imgMargin = imgOverflowEl.getBoundingClientRect().right - fullspreadEl[i].firstElementChild.getBoundingClientRect().right; fullspreadEl[i].firstElementChild.style.marginLeft = imgMargin + 'px'; }