Improve responsiveness, fix bricks.js layout

The images weren't laid out properly on some devices.

Solution: https://stackoverflow.com/questions/48987395/check-if-all-the-images-in-the-page-are-loaded

3 files changed, 61 insertions, 24 deletions

diff --git a/resources/css/style.css b/resources/css/style.css
index 7e8f72d..0c51bab 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -60,6 +60,18 @@ input, .alert {
 
 img, .text { width: 400px; }
 .heading { width: 380px; }
+@media only screen and (max-width: 512px) {
+    img, .text { width: 368px; }
+    .heading { width: 350px; }
+}
+@media only screen and (max-width: 450px) {
+    img, .text { width: 350px; }
+    .heading { width: 330px; }
+}
+@media only screen and (max-width: 400px) {
+    img, .text { width: 330px; }
+    .heading { width: 310px; }
+}
 
 .heading {
     box-shadow: var(--blue-intense-bg) 0px 0px 0px 2px inset,
@@ -83,15 +95,15 @@ img, .text { width: 400px; }
     padding: 1em;
 }
 
-.gallery {
+#gallery {
     margin: auto;
 }
-.gallery img {
+#gallery img {
     transform-origin: center;
     transition: 0.5s;
 }
-.gallery:hover img { opacity: 0.5; }
-.gallery img:hover {
+#gallery:hover img { opacity: 0.5; }
+#gallery img:hover {
     transform: scale(1.1);
     box-shadow: var(--bg-active) 0px 20px 30px -10px;
     opacity: 1;
diff --git a/resources/js/gallery.js b/resources/js/gallery.js
index f9be5e2..ae0fd90 100644
--- a/resources/js/gallery.js
+++ b/resources/js/gallery.js
@@ -1,24 +1,22 @@
 'use strict';
-/* import Bricks from '/bricks.js'; */
-
-// mq      - the minimum viewport width (String CSS unit: em, px, rem)
-// columns - the number of vertical columns
-// gutter  - the space (in px) between the columns and grid items
 
 // image width.
 const imgW = 400;
 
+// Gallery using bricks.js ////////////////////////////////////////////////////
+
+// mq      - the minimum viewport width (String CSS unit: em, px, rem)
+// columns - the number of vertical columns
+// gutter  - the space (in px) between the columns and grid items
 const sizes = [
     { columns: 1, gutter: 30 },
-    { mq: ((imgW * 2.2) + 40) + "px", columns: 2, gutter: 35 },
-    { mq: ((imgW * 3.5) + 50) + "px", columns: 3, gutter: 50 },
-    { mq: ((imgW * 4.4) + 50) + "px", columns: 4, gutter: 50 },
-    // { mq: '768px', columns: 2, gutter: 25 },
-    // { mq: '1280px', columns: 3, gutter: 50 }
+    { mq: Math.round((imgW * 2.2) + 40) + "px", columns: 2, gutter: 35 },
+    { mq: Math.round((imgW * 3.5) + 50) + "px", columns: 3, gutter: 50 },
+    { mq: Math.round((imgW * 4.4) + 50) + "px", columns: 4, gutter: 50 },
 ];
 
 const instance = Bricks({
-    container: '.gallery',
+    container: '#gallery',
     packed: 'data-packed',
     sizes: sizes
 });
@@ -30,12 +28,39 @@ instance
 
 // start it up, when the DOM is ready. note that if images are in the
 // grid, you may need to wait for document.readyState === 'complete'.
-document.addEventListener('DOMContentLoaded', eve => {
-    document.addEventListener('readystatechange', event => {
-        if (event.target.readyState === 'complete') {
-            instance
-                .resize(true)     // bind resize handler
-                .pack()           // pack initial items
+document.addEventListener('DOMContentLoaded', event => {
+    instance.resize(true).pack(); // bind resize handler & pack initial items
+});
+document.addEventListener('readystatechange', event => {
+    if (event.target.readyState === 'complete') {
+        instance.pack();
+    }
+});
+
+// Re-packing after loading images ////////////////////////////////////////////
+
+function onImagesLoaded(container, event) {
+    let images = container.getElementsByTagName("img");
+    let loaded = images.length;
+    for (let i = 0; i < images.length; i++) {
+        if (images[i].complete) {
+            loaded--;
         }
-    })
-})
+        else {
+            images[i].addEventListener("load", function () {
+                loaded--;
+                if (loaded == 0) {
+                    event();
+                }
+            });
+        }
+        if (loaded == 0) {
+            event();
+        }
+    }
+}
+
+const container = document.getElementById("gallery");
+onImagesLoaded(container, function () {
+    instance.pack();
+});
diff --git a/templates/gallery.crotmp b/templates/gallery.crotmp
index 021b366..25c55ea 100644
--- a/templates/gallery.crotmp
+++ b/templates/gallery.crotmp
@@ -1,6 +1,6 @@
 <:use 'templates/base.crotmp'>
 <|page(.title)>
-<div class="gallery">
+<div id="gallery">
     <@gallery : $i>
 
     <?{ $i.<type> eq 'img' }>