From 60c499d4711b9eff38589037bf8104c92aedc367 Mon Sep 17 00:00:00 2001
From: Xevion <ryanchwalters@gmail.com>
Date: Mon, 1 Jul 2019 21:29:33 -0500
Subject: [PATCH] added divider and spoiler for tags

---
 app/templates/base.html   |  7 +++++--
 app/templates/hidden.html | 38 ++++++++++++++++++++++++--------------
 2 files changed, 29 insertions(+), 16 deletions(-)
diff --git a/app/templates/base.html b/app/templates/base.html
index 7591211..16d04c1 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -12,7 +12,7 @@
     {% block head %}
     <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-divider@2.0.1/dist/css/bulma-divider.min.css">
+
     <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
     <style type="text/css">
         /* Single line word breaking for content */
@@ -26,6 +26,7 @@
         }
     </style>
     {% endblock head %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-divider@2.0.1/dist/css/bulma-divider.min.css">
 </head>
 
 <body>
@@ -35,7 +36,9 @@
                 Xevion
             </a>
 
-            <a role="button" id="navbar-burger-id" class="navbar-burger burger" onclick="document.querySelector('.navbar-menu').classList.toggle('is-active');" aria-label="menu" aria-expanded="false">
+            <a role="button" id="navbar-burger-id" class="navbar-burger burger"
+                onclick="document.querySelector('.navbar-menu').classList.toggle('is-active');" aria-label="menu"
+                aria-expanded="false">
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
diff --git a/app/templates/hidden.html b/app/templates/hidden.html
index 1ddfab8..d5f52b0 100644
--- a/app/templates/hidden.html
+++ b/app/templates/hidden.html
@@ -36,8 +36,8 @@
                                     <label for="tags">Tags</label>
                                     <p class="control has-icons-left">
                                         <input class="input" type="search" name="tags" value="{{ tags }}""/>
-                                        <span class="icon is-small is-left">
-                                            <i class="fas fa-search"></i>
+                                        <span class=" icon is-small is-left">
+                                        <i class="fas fa-search"></i>
                                         </span>
                                     </p>
                                 </div>
@@ -45,7 +45,8 @@
                                 <div class="field">
                                     <label for="count">Count</label>
                                     <p class="control has-icons-left">
-                                        <input class="input" type="number" min="0" max="1000" name="count" value="{{ count or 50}}" />
+                                        <input class="input" type="number" min="0" max="1000" name="count"
+                                            value="{{ count or 50}}" />
                                         <span class="icon is-small is-left">
                                             <i class="fas fa-equals"></i>
                                         </span>
@@ -54,7 +55,8 @@
                                 <div class="field">
                                     <label for="page">Page</label>
                                     <p class="control has-icons-left">
-                                        <input class="input" type="number" min="0" max="1000" name="page" value="{{ page or 0 }}" />
+                                        <input class="input" type="number" min="0" max="1000" name="page"
+                                            value="{{ page or 0 }}" />
                                         <span class="icon is-small is-left">
                                             <i class="fas fa-flask"></i>
                                         </span>
@@ -62,15 +64,18 @@
                                 </div>
                                 <div class="field">
                                     <label for="base64">Use base64 encoding?</label>
-                                    <input type="checkbox" name="base64" value="true" {% if base64 %}checked{% endif %}/>
+                                    <input type="checkbox" name="base64" value="true"
+                                        {% if base64 %}checked{% endif %} />
                                 </div>
                                 <div class="field">
                                     <label for="showsample">Show fullsize (instead of thumbnail image)?</label>
-                                    <input type="checkbox" name="showfull" value="true" {% if showfull %}checked{% endif %}/>
+                                    <input type="checkbox" name="showfull" value="true"
+                                        {% if showfull %}checked{% endif %} />
                                 </div>
                                 <div class="field">
                                     <label for="showtags">Show tags of image?</label>
-                                    <input type="checkbox" name="showtags" value="true" {% if showtags %}checked{% endif %}/>
+                                    <input type="checkbox" name="showtags" value="true"
+                                        {% if showtags %}checked{% endif %} />
                                 </div>
                                 <div class="columns is-centered">
                                     <div class="column is-4">
@@ -78,7 +83,8 @@
                                     </div>
                                     <div class="column is-5"></div>
                                     <div class="column">
-                                        <a class="button is-info is-outlined" href="{{ request.path + '/help' }}">Help</a>                                
+                                        <a class="button is-info is-outlined"
+                                            href="{{ request.path + '/help' }}">Help</a>
                                     </div>
                                 </div>
                             </form>
@@ -93,7 +99,7 @@
                 <div class="card">
                     <div class="card-header">
                         <div class="card-header-title">
-                            Image #{{ image.index }} <a href="{{ image.view }}"><sup class="sup" >source</sup></a>
+                            Image #{{ image.index }} <a href="{{ image.view }}"><sup class="sup">source</sup></a>
                         </div>
                     </div>
                     <div class="card-image">
@@ -114,11 +120,15 @@
                     {% if showtags %}
                     <div class="card-content">
                         <div class="content word-break resize-font">
-                            {% for tag in image.tags %}
-                            <span class="pad-tag tag">
-                                {{ tag }}
-                            </span>
-                            {% endfor %}
+                            <details>
+                                <summary>Show Tags</summary>
+                                <div class="is-divider" data-content="Tags ({{ image.tags|length }})"></div>
+                                {% for tag in image.tags %}
+                                <span class="pad-tag tag">
+                                    {{ tag }}
+                                </span>
+                                {% endfor %}
+                            </details>
                         </div>
                     </div>
                     {% endif %}
