nonshy/website
nonshy/website
1
0
Fork 0
Code Issues 20 Pull Requests 1 Packages Projects Releases Wiki Activity

Better photo scaling without scroll in lightbox modal

Browse Source
This commit is contained in:
Noah Petherbridge 2024-03-07 18:10:29 -08:00
parent 80c4471017
commit be9276f4c0
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/static/css/theme.css
View File

@ -46,9 +46,16 @@ img {
/* Photo modals in addition to Bulma .modal-content */ /* Photo modals in addition to Bulma .modal-content */
.photo-modal { .photo-modal {
width: auto !important; width: calc(100vw - 40px);
max-width: fit-content; max-height: calc(100vh - 40px);
max-height: fit-content; }
.photo-modal #detailImg {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.photo-modal img {
max-height: calc(100vh - 50px);
} }
/* Custom bulma tag colors */ /* Custom bulma tag colors */

14
web/templates/photo/gallery.html
View File

@ -169,8 +169,12 @@
<div class="modal" id="detail-modal"> <div class="modal" id="detail-modal">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-content photo-modal"> <div class="modal-content photo-modal">
<div class="image is-fullwidth"> <!-- Notes: to get the image to always scale and fit on screen, it is made as a background image in CSS
<img id="detailImg"> on the detailImg div; but we don't have the image's minimum size here, so the hidden <img> inside
provides the size pushing to make it visible on screen, otherwise the divs are 0x0 pixels and nothing
would be visible. -->
<div id="detailImg">
<img style="visibility: hidden">
</div> </div>
</div> </div>
<button class="modal-close is-large" aria-label="close"></button> <button class="modal-close is-large" aria-label="close"></button>
@ -755,8 +759,10 @@
}); });
}); });
function setModalImage(url) { function setModalImage(url) {
let $modalImg = document.querySelector("#detailImg"); let $modalImg = document.querySelector("#detailImg"),
$modalImg.src = url; $img = $modalImg.getElementsByTagName("img")[0];
$img.src = url;
$modalImg.style.backgroundImage = `url(${url})`;
return false; return false;
} }
</script> </script>