From cabd61c4ea7cf9e018cd813e1f2a451030b9ce1a Mon Sep 17 00:00:00 2001
From: Philipp Klaus <philipp.klaus@gmail.com>
Date: Fri, 10 Feb 2017 10:34:46 +0100
Subject: [PATCH] add a percent sign to the margin inputs

---
 views/labeldesigner.jinja2 | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/views/labeldesigner.jinja2 b/views/labeldesigner.jinja2
index f1576c7..c4a5a17 100644
--- a/views/labeldesigner.jinja2
+++ b/views/labeldesigner.jinja2
@@ -79,14 +79,21 @@
             <div id="collapse3" class="panel-collapse collapse">
               <div class="chooser panel-body">
               <label for="marginTop">Margin Top:</label>
-              <input id="marginTop" class="form-control" type="number" min="0" max="200" value="24" onChange="preview()" required>
+              <div class="input-group marginsTopBottom">
+                <input id="marginTop" class="form-control" type="number" min="0" max="200" value="24" onChange="preview()" required>    <span class="input-group-addon">%</span>
+              </div>
               <label for="marginBottom">Margin Bottom:</label>
-              <input id="marginBottom" class="form-control" type="number" min="0" max="200" value="45" onChange="preview()" required>
+              <div class="input-group marginsTopBottom">
+                <input id="marginBottom" class="form-control" type="number" min="0" max="200" value="45" onChange="preview()" required> <span class="input-group-addon">%</span>
+              </div>
               <label for="marginLeft">Margin Left:</label>
-              <input id="marginLeft" class="form-control" type="number" min="0" max="200" value="35" onChange="preview()" required>
+              <div class="input-group marginsLeftRight">
+                <input id="marginLeft" class="form-control" type="number" min="0" max="200" value="35" onChange="preview()" required>   <span class="input-group-addon">%</span>
+              </div>
               <label for="marginRight">Margin Right:</label>
-              <input id="marginRight" class="form-control" type="number" min="0" max="200" value="35" onChange="preview()" required>
-              (margins in % of font size)
+              <div class="input-group marginsLeftRight">
+                <input id="marginRight" class="form-control" type="number" min="0" max="200" value="35" onChange="preview()" required>  <span class="input-group-addon">%</span>
+              </div>
               </div> <!-- class="chooser panel-body" -->
             </div>
           </div>
@@ -142,18 +149,12 @@ function formData() {
 }
 
 function preview() {
-  // http://stackoverflow.com/a/16284355
-  // http://stackoverflow.com/a/7697455
   if ($('input[name=orientation]:checked').val() == 'standard') {
-    $('#marginTop').prop('disabled',   false).removeAttr('title');
-    $('#marginBottom').prop('disabled',false).removeAttr('title');
-    $('#marginLeft').prop('disabled',  true).prop('title',  'Only relevant if rotated orientation is selected.');
-    $('#marginRight').prop('disabled', true).prop('title',  'Only relevant if rotated orientation is selected.');
+    $('.marginsTopBottom').prop('disabled', false).removeAttr('title');
+    $('.marginsLeftRight').prop('disabled', true).prop('title',  'Only relevant if rotated orientation is selected.');
   } else {
-    $('#marginTop').prop('disabled',   true).prop('title',  'Only relevant if standard orientation is selected.');
-    $('#marginBottom').prop('disabled',true).prop('title',  'Only relevant if standard orientation is selected.');
-    $('#marginLeft').prop('disabled',  false).removeAttr('title');
-    $('#marginRight').prop('disabled', false).removeAttr('title');
+    $('.marginsTopBottom').prop('disabled', true).prop('title',  'Only relevant if standard orientation is selected.');
+    $('.marginsLeftRight').prop('disabled', false).removeAttr('title');
   }
   $.ajax({
     type:        'POST',