From 5df1ea821b1c3be5c7778d328f4e3f9b0f1fb370 Mon Sep 17 00:00:00 2001
From: Philipp Klaus <philipp.klaus@gmail.com>
Date: Mon, 19 Dec 2016 01:24:26 +0100
Subject: [PATCH] Move to a collapsible accordion for the settings

---
 views/labeldesigner.jinja2 | 42 +++++++++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/views/labeldesigner.jinja2 b/views/labeldesigner.jinja2
index cd56c58..5ae96a1 100644
--- a/views/labeldesigner.jinja2
+++ b/views/labeldesigner.jinja2
@@ -12,16 +12,38 @@
   <div class="row">
     <div class="col-md-4">
       <fieldset class="form-group">
-        <label for="labelSize">Label Size:</label>
-        <select class="form-control" id="labelSize" onChange="preview()">
-          {% for label_size in label_sizes %}<option value="{{label_size[0]}}">{{label_size[1]}}</option>{% endfor %}
-        </select>
-       <label for="fontFamily">Font Selection:</label>
-        <select class="form-control" id="fontFamily" onChange="preview()">
-          {% for font in fonts %}<option>{{font}}</option> {% endfor %}
-        </select>
-        <label for="fontSize">Font Size:</label>
-        <input id="fontSize" type="text" name="quant[2]" class="form-control input-number" value="70" min="1" max="120" onChange="preview()">
+        <div class="panel-group" id="accordion">
+          <div class="panel panel-default">
+            <div class="panel-heading">
+              <h4 class="panel-title">
+                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
+                Label Size</a>
+              </h4>
+            </div>
+            <div id="collapse1" class="panel-collapse collapse">
+              <label for="labelSize" style="display: none">Label Size:</label>
+              <select class="form-control" id="labelSize" onChange="preview()">
+                {% for label_size in label_sizes %}<option value="{{label_size[0]}}">{{label_size[1]}}</option>{% endfor %}
+              </select>
+            </div>
+          </div>
+          <div class="panel panel-default">
+            <div class="panel-heading">
+              <h4 class="panel-title">
+                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
+                Font Settings</a>
+              </h4>
+            </div>
+            <div id="collapse2" class="panel-collapse collapse in">
+              <label for="fontFamily">Font Family:</label>
+              <select class="form-control" id="fontFamily" onChange="preview()">
+                {% for font in fonts %}<option>{{font}}</option> {% endfor %}
+              </select>
+              <label for="fontSize" >Font Size:</label>
+              <input id="fontSize" class="form-control" type="number" min="1" value="70" max="150" onChange="preview()">
+            </div>
+          </div>
+        </div>
       </fieldset>
     </div>
     <div class="col-md-4">