mobile view

camp/static/css/main.css

@@ -58,6 +58,11 @@ a:focus, a:hover {
 	padding-left: 0em !important;
 	padding-top: 10px;  /* moved below search bar */
 }
+@media screen and (max-width: 39.9375em) {
+    .special-column {
+        padding-right: 0;
+    }
+}
 
 .index-text {
 	padding-left: 3%;

camp/static/css/site.scss

@@ -164,3 +164,36 @@
     border-color: #1779ba;
   }
 }
+
+.inline-photo {
+  display: inline-block;
+  .caption {
+    display: none;
+  }
+  .photo {
+    scroll-margin-top: 12px;
+  }
+}
+.inline {
+  margin-left: -12px;
+  width: 100vw;
+  li {
+    padding: 0;
+  }
+  .inline-photo {
+    display: block;
+    .caption {
+      display: block;
+      color: #ffffff;
+      padding-left: 2px;
+      padding-right: 2px;
+      p {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+@media screen and (max-width: 39.9375em) {
+    .gallery {
+    }
+}

camp/static/js/gallery.js

@@ -2,6 +2,10 @@ function isNumber(x) {
   return parseFloat(x) == x
 };
 
+function isMobile() {
+    return getComputedStyle(document.querySelector('.special-column')).paddingRight == '0px'
+}
+
 function parseGalleryHash() {
     let parts = document.location.hash.slice(1).split('/')
     if (parts.lengh == 1 && isNumber(parts[0])) {
@@ -32,14 +36,19 @@ function loadGalleries() {
                 edit: img.dataset.edit
             }
             photos.push(photo)
+            img.parentElement.href = `#${galleryIdx+1}/${photos.length}`
             img.parentElement.addEventListener("click", event => {
                 event.preventDefault()
                 event.stopPropagation()
-                dialog.open(src)
+                dialog.open(src, -1, event)
             })
         })
-        dialog = loadGallery(photos, galleryIdx)
+        if (isMobile()) {
-        gallery.appendChild(dialog.element)
+            dialog = loadInlineGallery(photos, galleryIdx, null, gallery)
+        } else {
+            dialog = loadGallery(photos, galleryIdx, null, gallery)
+        }
+        dialog.element && gallery.appendChild(dialog.element)
         if (current.gallery == galleryIdx) {
             dialog.open(undefined, current.image)
         }
@@ -58,7 +67,7 @@ function loadGalleries() {
             img.parentElement.addEventListener("click", event => {
                 event.preventDefault()
                 event.stopPropagation()
-                stage.open(src)
+                dialog.open(src, -1, event)
             })
         })
         const main = document.querySelector('.gallery-main-stage')
@@ -66,6 +75,46 @@ function loadGalleries() {
     })
 }
 
+function loadInlineGallery(images, idx, main, thumbnails) {
+    thumbnails.querySelectorAll('.photo').forEach(img => {
+        const container = document.createElement('div')
+        container.classList.add("inline-photo")
+        container.innerHTML = `
+            <img class="photo" src="${img.src}">
+            <div class="caption">${img.dataset.caption||''}</div>
+        `
+        img.replaceWith(container)
+    })
+
+    return {
+        element: null,
+        open: function(src, newIdx=-1, event=null) {
+            let img
+            if (newIdx != -1) {
+                img = thumbnails.querySelectorAll('.photo')[newIdx - 1]
+            }
+            if (thumbnails.classList.contains("inline")) {
+                thumbnails.classList.remove("inline");
+                thumbnails.querySelectorAll('.photo').forEach(img => {
+                    img.src = img.src.replace('_display', '_thumbnail')
+                })
+                thumbnails.previousElementSibling.scrollIntoView()
+            } else {
+                thumbnails.classList.add("inline");
+                thumbnails.querySelectorAll('.photo').forEach(img => {
+                    img.src = img.src.replace('_thumbnail', '_display')
+                })
+                setTimeout(() => {
+                    if (img) {
+                        img.scrollIntoView()
+                    } else if (event && event.target) {
+                        event.target.scrollIntoView()
+                    }
+                }, 20)
+            }
+        }
+    }
+}
 function loadGallery(images, idx, main, thumbnails) {
     let gallery;
 
@@ -145,7 +194,7 @@ function loadGallery(images, idx, main, thumbnails) {
             gallery.querySelectorAll(".thumbnail").forEach((thumb, i) => {
                 thumb.classList.toggle("active", i === index);
             });
-            if (thumbnailsContainer && getComputedStyle(thumbnailsContainer).flexWrap == "nowrap") {
+            if (thumbnailsContainer && !isMobile()) {
                 gallery.querySelector('.active').scrollIntoView()
             }
         }
@@ -156,6 +205,7 @@ function loadGallery(images, idx, main, thumbnails) {
             download.href = ""
             download.classList.add('disabled')
         }
+        if (edit) {
             if (images[index].edit) {
                 edit.href = images[index].edit
                 edit.classList.remove('disabled')
@@ -163,6 +213,7 @@ function loadGallery(images, idx, main, thumbnails) {
                 edit.href = ""
                 edit.classList.add('disabled')
             }
+        }
         prevBtn.disabled = index === 0;
         nextBtn.disabled = index === images.length - 1;
         if (idx == 'inline') {
@@ -177,7 +228,9 @@ function loadGallery(images, idx, main, thumbnails) {
             const thumb = document.createElement("img");
             thumb.src = img.src.replace('_display', '_thumbnail');
             thumb.classList.add("thumbnail");
-            thumb.onclick = () => {
+            thumb.onclick = (event) => {
+                event.preventDefault()
+                event.stopPropagation()
                 currentIndex = index;
                 updateGallery(index);
             };
@@ -191,6 +244,8 @@ function loadGallery(images, idx, main, thumbnails) {
     }
 
     prevBtn.onclick = () => {
+        event.preventDefault()
+        event.stopPropagation()
         if (currentIndex > 0) {
             currentIndex--;
             updateGallery(currentIndex);
@@ -198,6 +253,8 @@ function loadGallery(images, idx, main, thumbnails) {
     };
 
     nextBtn.onclick = () => {
+        event.preventDefault()
+        event.stopPropagation()
         if (currentIndex < images.length - 1) {
             currentIndex++;
             updateGallery(currentIndex);