Display gallery title, fix authentication, show directories

- Earlier non-authenticated users could access the images too.
- Serve original image if thumbnail doesn't exist.
- Show directories in gallery.
- Remove lazy loading attribute.

2 files changed, 23 insertions, 11 deletions

diff --git a/resources/css/style.css b/resources/css/style.css
index 76af98e..cc2cb3a 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -56,21 +56,20 @@ img {
     min-width: 30%;
 }
 
-img, .text { width: 400px; }
-.heading { width: 380px; }
+img { width: 400px; }
+.heading, .text, .directory { width: 380px; }
 @media only screen and (max-width: 512px) {
-    img, .text { width: 368px; }
-    .heading { width: 350px; }
+    img { width: 368px; }
+    .heading, .text, .directory { width: 350px; }
 }
 @media only screen and (max-width: 450px) {
-    img, .text { width: 350px; }
-    .heading { width: 330px; }
+    img { width: 350px; }
+    .heading, .text, .directory { width: 330px; }
 }
 @media only screen and (max-width: 400px) {
-    img, .text { width: 330px; }
-    .heading { width: 310px; }
+    img { width: 330px; }
+    .heading, .text, .directory { width: 310px; }
 }
-
 .heading {
     box-shadow: var(--blue-intense-bg) 0px 0px 0px 2px inset,
                 var(--bg-main) 10px -10px 0px -3px,
@@ -83,7 +82,6 @@ img, .text { width: 400px; }
                 var(--red-intense-bg) 40px -40px;
     padding: 1em;
 }
-
 .text {
     box-shadow: var(--magenta-intense-bg) 0px 0px 0px 3px,
                 var(--green-subtle-bg) 0px 0px 0px 6px,
@@ -92,6 +90,20 @@ img, .text { width: 400px; }
                 var(--red-intense-bg) 0px 0px 0px 15px;
     padding: 1em;
 }
+.directory {
+    box-shadow: var(--bg-special-cold) 0px 0px 0px 3px,
+                var(--bg-special-calm) 0px 0px 0px 6px;
+    padding: 1em;
+}
+.directory:hover {
+    background-color: var(--bg-alt);
+}
+.directory:before {
+    content: '📁 ';
+}
+.directory:hover:before {
+    content: '📂 ';
+}
 
 #gallery {
     margin: auto;
diff --git a/resources/js/gallery.js b/resources/js/gallery.js
index 2a608f5..5643ce2 100644
--- a/resources/js/gallery.js
+++ b/resources/js/gallery.js
@@ -71,7 +71,7 @@ const onImagesLoaded = (container, event) => {
 
 const gallery = document.getElementById("gallery");
 const imagesLoaded = (remaining, failed, progressBar) => {
-    bricks.pack();
+    bricks.pack(); // packing images
 
     progressBar.value = 100;
     document.getElementById("loading").style.display = "none";