fix: correctly pack galleries on mobiles

feat: switch masonry to packery
debug: log app shutdown more

1 files changed, 35 insertions, 1 deletions

diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 62360ad..5c1867a 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -137,6 +137,7 @@
                         document.body.append(frame);
                     }
                     break;
+                case "lilac": break;
             }
         }
 
@@ -267,7 +268,40 @@
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script>
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script>
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
-    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/masonry-layout/4.2.2/masonry.pkgd.min.js"></script>
+    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/packery/3.0.0/dist/packery.pkgd.js"></script>
+
+    <script>
+        // Enable fitWidth-like attribute for Packery. Source: https://codepen.io/desandro/pen/kVmLYz
+        var __resetLayout = Packery.prototype._resetLayout;
+        Packery.prototype._resetLayout = function() {
+            __resetLayout.call( this );
+            var parentSize = getSize( this.element.parentNode );
+            var colW = this.columnWidth + this.gutter;
+            this.fitWidth = Math.floor( ( ( parentSize.innerWidth + this.gutter ) / colW ) * 1.01 ) * colW;
+            this.packer.width = this.fitWidth;
+            this.packer.height = Number.POSITIVE_INFINITY;
+            this.packer.reset();
+        };
+
+        Packery.prototype._getContainerSize = function() {
+            var emptyWidth = 0;
+            for ( var i=0, len = this.packer.spaces.length; i < len; i++ ) {
+                var space = this.packer.spaces[i];
+                if ( space.y === 0 && space.height === Number.POSITIVE_INFINITY ) {
+                    emptyWidth += space.width;
+                }
+            }
+
+            return {
+                width: this.fitWidth - this.gutter - emptyWidth,
+                height: this.maxY - this.gutter
+            };
+        };
+
+        Packery.prototype.needsResizeLayout = function() {
+            return true;
+        };
+    </script>
 
     <div id="general-page-bottom-embeds" class="flex"
         hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">