Merge pull request 'Add lightbox to image thumbnails in all feeds, make previews larger' (#241) from h3ndrik/pyfedi:lightbox into main

Reviewed-on: https://codeberg.org/rimu/pyfedi/pulls/241

app/static/js/scripts.js

@@ -13,6 +13,7 @@ document.addEventListener("DOMContentLoaded", function () {
     setupMarkdownEditorEnabler();
     setupAddPollChoice();
     setupShowElementLinks();
+    setupLightboxTeaser();
 });
 
 // All elements with the class "showElement" will show the DOM element referenced by the data-id attribute
@@ -84,6 +85,15 @@ function setupLightboxGallery() {
 }
 
 
+function setupLightboxTeaser() {
+    baguetteBox.run('.post_teaser', {
+        fullScreen: false,
+        async: true,
+        preload: 3,
+        ignoreClass: 'preview_image',
+    });
+}
+
 // fires after all resources have loaded, including stylesheets and js files
 window.addEventListener("load", function () {
     setupPostTypeTabs();    // when choosing the type of your new post, store the chosen tab in a hidden field so the backend knows which fields to check

app/static/structure.css

@@ -737,8 +737,8 @@ fieldset legend {
 }
 @media (min-width: 992px) {
   .post_list .post_teaser .thumbnail img {
-    height: 70px;
-    width: 133px;
+    height: 90px;
+    width: 171px;
   }
 }
 .post_list .post_teaser .thumbnail img.blur {

app/static/structure.scss

@@ -330,8 +330,8 @@ html {
         object-fit: cover;
         margin-left: 5px;
         @include breakpoint(tablet) {
-          height: 70px;
-          width: 133px;
+          height: 90px;
+          width: 171px;
         }
         &.blur {
           filter: blur(3px);