gallery: second prototype, evolving into a beta

app/static/css/themes/FK_dark_theme.css

@@ -143,3 +143,8 @@ div.editor-toolbar, div.CodeMirror {
     --meta: rgba(255, 255, 255, .15);
     --meta-text: #ffffff;
 }
+
+.gallery, .gallery-js {
+    --border: rgba(255, 255, 255, 0.8);
+    --selected: rgba(255, 0, 0, 1.0);
+}

app/static/css/themes/default_theme.css

@@ -133,6 +133,11 @@ div.editor-toolbar, div.CodeMirror {
     --meta-text: #000000;
 }
 
+.gallery, .gallery-js {
+    --border: rgba(0, 0, 0, 0.5);
+    --selected: rgba(0, 0, 0, 0.75);
+}
+
 /* Extra style on top of the Pygments style */
 table.codehilitetable td.linenos {
     color: #808080;

app/static/css/widgets.css

@@ -128,55 +128,6 @@ hr.signature {
 .trophy span {
   font-size: 80%;
 }
-
-hr.signature {
-  opacity: 0.2;
-}
-.gallery {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin: auto;
-}
-.gallery * {
-  margin: 3px;
-  border: 1px solid var(--border);
-}
-.gallery-js {
-  --border: rgba(0,0,0,0.5);
-  --selected: rgba(255,0,0,0.9);
-  display: flex;
-  overflow-x: auto;
-  margin: auto;
-  padding: 15px;
-  height: 180px;
-}
-.gallery-js img,
-.gallery-js video {
-  height: 100%;
-  border: 1px solid var(--border);
-  cursor: pointer;
-}
-.gallery-js img:not(:first-child),
-.gallery-js video:not(:first-child) {
-  margin-left: 15px;
-}
-.gallery-js img.selected,
-.gallery-js video.selected {
-  box-shadow: 0 0 7.5px var(--selected);
-}
-@media screen and (max-width:1199px) {
-  .gallery-js {
-    height: 180px;
-  }
-}
-@media screen and (max-width:499px) {
-  .gallery-js {
-    height: 180px;
-  }
-}
-.gallery-spot {
-  margin: 10px auto;
 .dl-button {
   display: inline-flex;
   flex-direction: row;
@@ -208,3 +159,52 @@ hr.signature {
   color: var(--meta-text);
   font-size: 90%;
 }
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: auto;
+}
+.gallery * {
+  margin: 3px;
+  border: 1px solid var(--border);
+}
+.gallery-js {
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin: auto;
+  padding: 15px;
+  height: 180px;
+}
+.gallery-js img,
+.gallery-js video {
+  height: 100%;
+  border: 1px solid var(--border);
+  cursor: pointer;
+}
+.gallery-js img:not(:first-child),
+.gallery-js video:not(:first-child) {
+  margin-left: 15px;
+}
+.gallery-js img.selected,
+.gallery-js video.selected {
+  box-shadow: 0 0 7.5px var(--selected);
+}
+@media screen and (max-width:1199px) {
+  .gallery-js {
+    height: 150px;
+  }
+}
+@media screen and (max-width:499px) {
+  .gallery-js {
+    height: 130px;
+  }
+}
+.gallery-spot {
+  justify-content: center;
+  margin: 10px auto;
+}
+.gallery-spot * {
+  cursor: pointer;
+}

app/static/less/widgets.less

@@ -204,25 +204,22 @@ hr.signature {
 
 /* Gallery with Javascript */
 .gallery-js {
-    --border: rgba(0, 0, 0, 0.5);
-    --selected: rgba(255, 0, 0, 0.9);
-
     @padding: 15px;
-    display: flex; overflow-x: auto;
+    display: flex; overflow-x: auto; overflow-y: hidden;
     margin: auto; padding: @padding;
     height: 150px + 2 * @padding;
 
     @media screen and (max-width: @small) {
-        height: 150px + 2 * @padding;
+        height: 120px + 2 * @padding;
     }
     @media screen and (max-width: @micro) {
-        height: 150px + 2 * @padding;
+        height: 100px + 2 * @padding;
     }
 
     img, video {
         height: 100%;
         border: 1px solid var(--border);
-        cursor: pointer;
+        cursor: pointer; //box-sizing: content-box;
 
         &:not(:first-child) {
             margin-left: @padding;
@@ -235,5 +232,10 @@ hr.signature {
 }
 
 .gallery-spot {
+    justify-content: center;
     margin: 10px auto;
+
+    * {
+        cursor: pointer;
+    }
 }

app/static/scripts/gallery.js

@@ -40,9 +40,14 @@ document.querySelectorAll(".gallery-js > *").forEach(item => {
         // Change content of spotlight
         let spot = e.target.parentElement.nextElementSibling;
         spot.replaceChild(e.target.cloneNode(true), spot.firstElementChild);
+        // Open spotlight media in a new tab
+        spot.firstElementChild.addEventListener("click", function(e) {
+            window.open(spot.firstElementChild.src, "_blank");
+        });
 
+        // Display the spotlight
         if(e.target.classList.contains('selected')) {
-             spot.style.display = "block";
+             spot.style.display = "flex";
         } else {
             spot.style.display = "none";
         }

app/utils/markdown_extensions/gallery.py

@@ -21,13 +21,14 @@ class GalleryTreeprocessor(Treeprocessor):
                     ul[-1][-1].tail = ul[-1][-1].tail[:-9]
 
                 if has_gallery:
-                    # TODO: Manipulate the output tree
                     el = etree.Element("div")
-                    p = etree.Element("p")
-                    p.text = "<There is a gallery here:>"
+                    el.set('class', 'gallery')
                     parent.remove(ul)
-                    el.append(p)
-                    el.append(ul)
+                    for li in ul:
+                        # Filter out items that are not single medias
+                        if len(li) == 1 and li[0].tag in ["img", "video"]:
+                            el.append(li[0])
+
                     parent.insert(idx, el)
 
 class GalleryExtension(Extension):

app/utils/render.py

@@ -24,7 +24,8 @@ def render(*args, styles=[], scripts=[], **kwargs):
         'scripts/pc-utils.js',
         'scripts/smartphone_patch.js',
         'scripts/simplemde.min.js',
-        'scripts/filter.js'
+        'scripts/gallery.js',
+        'scripts/filter.js',
     ]
 
     # Apply theme from user settings