michael/pyfedi
1
0
Fork 0
mirror of https://codeberg.org/rimu/pyfedi synced 2025-01-23 19:36:56 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request 'Fix Lightbox and allow zoom on the whole page, fixes #245' (#247) from h3ndrik/pyfedi:lightbox_fixes into main

Browse source 
Reviewed-on: https://codeberg.org/rimu/pyfedi/pulls/247
This commit is contained in:
rimu 2024-07-04 07:29:30 +00:00
commit bd3da38ff9
4 changed files with 64 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
app/static/js/scripts.js
View file

@ -88,9 +88,40 @@ function setupLightboxGallery() {
function setupLightboxTeaser() {
baguetteBox.run('.post_teaser', {
fullScreen: false,
noScrollbars: true,
async: true,
preload: 3,
ignoreClass: 'preview_image',
afterShow: function() {
var backButtonPrevented = false;
history.pushState(null, document.title, location.href);
function popStateListener(event) {
if (backButtonPrevented === false){
history.pushState(null, document.title, location.href);
baguetteBox.hide();
backButtonPrevented = true;
} else {
window.removeEventListener('popstate', popStateListener);
history.back();
}
}
window.addEventListener('popstate', popStateListener);
function baguetteBoxClickImg(event) {
if (this.style.width != "100vw" && this.offsetWidth < window.innerWidth) {
this.style.width = "100vw";
this.style.maxHeight = "none";
} else {
this.style.width = "";
this.style.maxHeight = "";
this.removeEventListener('click', baguetteBoxClickImg);
baguetteBox.hide();
}
};
for (const el of document.querySelectorAll('div#baguetteBox-overlay img')) {
el.addEventListener('click', baguetteBoxClickImg);
}
},
});
}

16
app/static/structure.css
View file

@ -1427,4 +1427,20 @@ h1 .warning_badge {
word-wrap: break-word;
}
#baguetteBox-overlay {
overflow: scroll !important;
}
#baguetteBox-overlay .full-image {
height: auto !important;
}
#baguetteBox-overlay .full-image figure {
display: inline-block !important;
}
#baguetteBox-slider {
height: auto !important;
}
/*# sourceMappingURL=structure.css.map */

16
app/static/structure.scss
View file

@ -1104,3 +1104,19 @@ h1 .warning_badge {
.post_body, .comment_body {
word-wrap: break-word;
}
#baguetteBox-overlay {
overflow: scroll !important;
.full-image {
height: auto !important;
//min-height: 100%;
figure {
display: inline-block !important;
}
}
}
#baguetteBox-slider {
height: auto !important;
//min-height: 100%;
}

2
app/templates/base.html
View file

@ -28,7 +28,7 @@
<head>
{% block head -%}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="Content-Language" content="en" />
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>