From 48b495caaec1ecf01f3788eb0e300c65e62a3c6f Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Tue, 12 Dec 2017 13:42:27 +0100
Subject: [PATCH] minimal image viewer

---
 content/static/css/main.css   |  5 ----
 content/templates/detail.html | 51 +++++++++++++++++++++++++++++++++--
 2 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/content/static/css/main.css b/content/static/css/main.css
index f039f58..d0bf67d 100644
--- a/content/static/css/main.css
+++ b/content/static/css/main.css
@@ -90,8 +90,3 @@ body, h1, h2, h3, h4, h5, h6 {
 .context ul, .links ul {
     list-style: none;
 }
-
-.images img {
-    max-width: 128px;
-    float: left;
-}
diff --git a/content/templates/detail.html b/content/templates/detail.html
index 4e52db4..427f935 100644
--- a/content/templates/detail.html
+++ b/content/templates/detail.html
@@ -87,8 +87,45 @@
 {% endif %}
 
 {% if content.images.exists %}
+<style>
+    .images {
+        display: grid;
+        grid-template-columns: 128px 128px 128px 128px 128px 128px 128px 128px;
+        grid-gap: 10px;
+    }
+    .images > div {
+        width: 128px;
+        height: 128px;
+        padding: 8px;
+        display: table-cell;
+        text-align: center;
+        position: relative;
+    }
+    .images > div > img {
+        transition: width,height 2s;
+        max-width: 92%;
+        max-height: 92%;
+        position: absolute;
+        top:0;
+        bottom:0;
+        left:0;
+        right:0;
+        margin:auto;
+    }
+    .images > div > img.active {
+        max-width: 92%;
+        max-height: 92%;
+        position: fixed;
+        top:0;
+        bottom:0;
+        left:0;
+        right:0;
+        margin:auto;
+        z-index: 1;
+    }
+</style>
+<b>Images:</b> <br>
 <div class="images">
-    <b>Images:</b> <br>
     {% for res in content.images %}
         <div>
             {% if res.is_image %}
@@ -102,8 +139,18 @@
             {% endif %}
         </div>
     {% endfor %}
-    <br clear="all">
 </div>
+<script>
+document.querySelectorAll('.images > div > img').forEach(function(img) {
+    img.addEventListener('click', function() {
+        if (this.classList.contains('active')) {
+            this.classList.remove('active');
+        } else {
+            this.classList.add('active');
+        }
+    });
+});
+</script>
 {% endif %}
 {% endif %}
 </div>