valentin_le_moign/carnet_atterrissage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout de imgs fullspread bleed

Browse Source
This commit is contained in:
Valentin
2023-06-28 14:31:52 +02:00
parent 90e84441a5
commit 2fd1ee2ed9
2 changed files with 51 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/carnet-atterrissage/css/mep_carnet.css
+42 -10
View File
@@ -238,27 +238,39 @@ img {
width: calc(62.5% - 1mm); width: calc(62.5% - 1mm);
} }
.imgfullspreadleft { .imgfullspreadleft,
.imgfullspreadright,
.imgfullspreadright_bleedtop,
.imgfullspreadright_bleed {
break-before: left; break-before: left;
break-after: left; break-after: left;
width: 149mm; width: 149mm;
overflow: hidden; overflow: hidden;
} }
.imgfullspreadright { .imgfullspreadright_bleedtop {
break-before: left; margin-top: -22mm;
break-after: left; height: 220mm;
width: 149mm;
overflow: hidden;
} }
.imgfullspreadleft img { .imgfullspreadright_bleed {
margin-top: -22mm;
height: 242mm;
}
.imgfullspreadleft img,
.imgfullspreadright img {
height: 198mm; height: 198mm;
width: auto; width: auto;
} }
.imgfullspreadright img { .imgfullspreadright_bleedtop img {
height: 198mm; height: 220mm;
width: auto;
}
.imgfullspreadright_bleed img {
height: 242mm;
width: auto; width: auto;
} }
@@ -269,13 +281,33 @@ img {
} }
.imgfullspreadright-right { .imgfullspreadright-right {
width: 149mm; width: 143mm;
margin-left: -8mm; margin-left: -8mm;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: flex-end; 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 { .imgfullspreadright-right img {
height: 198mm; height: 198mm;
width: auto; width: auto;
user/themes/carnet-atterrissage/templates/partials/base.html.twig
+9 -3
View File
@@ -161,21 +161,27 @@
} }
} }
// images fullspread // 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++) { for (let i = 0; i < fullspreadEl.length; i++) {
let imgSrc = fullspreadEl[i].firstElementChild.getAttribute('src'); let imgSrc = fullspreadEl[i].firstElementChild.getAttribute('src');
let nextPage = fullspreadEl[i].closest('.pagedjs_page').nextElementSibling.querySelectorAll('.pagedjs_page_content'); let nextPage = fullspreadEl[i].closest('.pagedjs_page').nextElementSibling.querySelectorAll('.pagedjs_page_content');
let imgOverflowEl = document.createElement('div'); let imgOverflowEl = document.createElement('div');
if (fullspreadEl[i].classList.contains('imgfullspreadleft')) { if (fullspreadEl[i].classList.contains('imgfullspreadleft')) {
imgOverflowEl.setAttribute('class', 'imgfullspreadleft-right'); imgOverflowEl.setAttribute('class', 'imgfullspreadleft-right');
} else { } else if (fullspreadEl[i].classList.contains('imgfullspreadright')) {
imgOverflowEl.setAttribute('class', 'imgfullspreadright-right'); 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'); let imgOverflow = document.createElement('img');
imgOverflow.src = imgSrc; imgOverflow.src = imgSrc;
imgOverflowEl.append(imgOverflow); imgOverflowEl.append(imgOverflow);
nextPage[0].append(imgOverflowEl); 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; let imgMargin = imgOverflowEl.getBoundingClientRect().right - fullspreadEl[i].firstElementChild.getBoundingClientRect().right;
fullspreadEl[i].firstElementChild.style.marginLeft = imgMargin + 'px'; fullspreadEl[i].firstElementChild.style.marginLeft = imgMargin + 'px';
} }