Add styles for directory, improve gallery UX

3 files changed, 39 insertions, 2 deletions

diff --git a/resources/css/style.css b/resources/css/style.css
index 240c98d..b2132df 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -111,6 +111,10 @@ img { width: 400px; }
 #gallery {
     margin: auto;
 }
+#gallery a {
+    color: var(--fg-main);
+    text-decoration: none;
+}
 #gallery img {
     transform-origin: center;
     transition: 0.5s;
diff --git a/resources/js/gallery.js b/resources/js/gallery.js
index 0289e58..b7b7e06 100644
--- a/resources/js/gallery.js
+++ b/resources/js/gallery.js
@@ -29,15 +29,26 @@ bricks
     ));
 
 document.addEventListener('DOMContentLoaded', event => {
-    bricks.resize(true); // bind resize handler
+    bricks.resize(true).pack(); // bind resize handler & initial pack
 });
 
+/**
+ * packing should be done multiple times. Sometimes the div of
+ * directories is not properly packed if packing is done only once.
+ */
 // Packing after loading images ////////////////////////////////////////////
 
 const onImagesLoaded = (container, event) => {
     const images = container.getElementsByTagName("img");
     const progressBar = document.getElementById("loading-progress");
 
+    // Keeps track of how many times we've packed the images.
+    let packed = 0;
+    const incrementPackedAndPack = () => {
+        packed++;
+        bricks.pack();
+    };
+
     // failed keeps track of images that failed to load.
     let failed = 0;
     let remaining = images.length;
@@ -52,6 +63,28 @@ const onImagesLoaded = (container, event) => {
                 progressBar.value = round(
                     ((images.length - remaining) / images.length) * 100
                 );
+
+                // pack multiple times for better experience. This way
+                // the initial pictures are properly visible to the
+                // user while the other load. It's very cheap to pack
+                // lots of elements too using bricks.js so it's not an
+                // issue.
+                //
+                // There is no point in specifying such large ranges
+                // as this runs in a single thread to for sure we'll
+                // hit the range.
+                if (5 < progressBar.value && progressBar.value < 20)
+                    if (packed < 2)
+                        incrementPackedAndPack();
+
+                if (30 < progressBar.value && progressBar.value < 50)
+                    if (packed < 4)
+                        incrementPackedAndPack();
+
+                if (80 < progressBar.value && progressBar.value < 95)
+                    if (packed < 5)
+                        incrementPackedAndPack();
+
                 if (remaining === failed)
                     event(remaining, failed, progressBar);
             });
diff --git a/templates/gallery.crotmp b/templates/gallery.crotmp
index 253339e..6cc7fbf 100644
--- a/templates/gallery.crotmp
+++ b/templates/gallery.crotmp
@@ -14,7 +14,7 @@
     <div id="gallery">
       <@gallery : $i>
         <?{ $i.<type> eq 'directory' }>
-        <div class="directory"><$i.<text>></div>
+        <div><a href="./<$i.<text>>"><p class="directory"><$i.<text>></p></a></div>
         </?>
         <?{ $i.<type> eq 'img' }>
         <img alt="<$i.<alt>>" src="/resources/img/<$i.<src>>">