From 2cdb0ebccb59187a620234b9674351a4db30c1ce Mon Sep 17 00:00:00 2001
From: Michiel Scholten <michiel@diginaut.net>
Date: Wed, 14 Sep 2016 12:50:37 +0200
Subject: [PATCH] Put the tag selection in a collapsible element to prevent
 clutter

---
 templates/bookmarks.html | 36 +++++++++++++++++++++---------------
 templates/edit.html      | 17 ++++++++++++-----
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/templates/bookmarks.html b/templates/bookmarks.html
index 696be04..8f66859 100644
--- a/templates/bookmarks.html
+++ b/templates/bookmarks.html
@@ -46,22 +46,28 @@
 
 {% if tags %}
 <div class="row">
-    <p>
-    <div class="chip">
-        <a href="{{ url_for('bookmarks', userkey=userkey, filtermethod='starred') }}"><i class="tiny material-icons yellow-text">star</i></a>
+    <div class="col s12">
+        <ul class="collapsible" data-collapsible="expandable">
+            <li>
+              <div class="collapsible-header"><i class="material-icons">label</i>Filter on star/problem/comment/tag</div>
+              <div class="collapsible-body" style="padding: 10px;">
+                <div class="chip">
+                    <a href="{{ url_for('bookmarks', userkey=userkey, filtermethod='starred') }}"><i class="tiny material-icons yellow-text">star</i></a>
+                </div>
+                <div class="chip">
+                    <a href="{{ url_for('bookmarks', userkey=userkey, filtermethod='broken') }}"><i class="tiny material-icons red-text">report_problem</i></a>
+                </div>
+                <div class="chip">
+                    <a href="{{ url_for('bookmarks', userkey=userkey, filtermethod='note') }}"><i class="tiny material-icons">comment</i></a>
+                </div>
+                {% for tag in tags %}
+                <div class="chip">
+                    <a href="{{ url_for('tag', userkey=userkey, tag=tag) }}">{{ tag }}</a>
+                </div>
+                {% endfor %}
+            </li>
+        </ul>
     </div>
-    <div class="chip">
-        <a href="{{ url_for('bookmarks', userkey=userkey, filtermethod='broken') }}"><i class="tiny material-icons red-text">report_problem</i></a>
-    </div>
-    <div class="chip">
-        <a href="{{ url_for('bookmarks', userkey=userkey, filtermethod='note') }}"><i class="tiny material-icons">comment</i></a>
-    </div>
-    {% for tag in tags %}
-    <div class="chip">
-        <a href="{{ url_for('tag', userkey=userkey, tag=tag) }}">{{ tag }}</a>
-    </div>
-    {% endfor %}
-    </p>
 </div>
 {% endif %}
 
diff --git a/templates/edit.html b/templates/edit.html
index 4de3c6f..350abb0 100644
--- a/templates/edit.html
+++ b/templates/edit.html
@@ -82,11 +82,18 @@
     {% if tags %}
     <div class="row">
         <div class="col s12">
-            {% for tag in tags %}
-            <div class="chip clickable" id="tag_{{ tag }}">
-                {{ tag }}
-            </div>
-            {% endfor %}
+            <ul class="collapsible" data-collapsible="expandable">
+                <li>
+                  <div class="collapsible-header"><i class="material-icons">label</i>Existing tags</div>
+                  <div class="collapsible-body" style="padding: 10px;">
+                    {% for tag in tags %}
+                    <div class="chip clickable" id="tag_{{ tag }}">
+                        {{ tag }}
+                    </div>
+                    {% endfor %}
+                  </div>
+                </li>
+            </ul>
         </div>
         {% for tag in tags %}
         <script type="text/javascript">