UI improvements: icons, button disabled while printing

static/css/custom.css

@@ -0,0 +1,13 @@
+#statusBox.alert {
+  margin-bottom: 0;
+}
+
+.alert .glyphicon{
+  display:table-cell;
+}
+
+.alert div,
+.alert span{
+  padding-left: 10px;
+  display:table-cell;
+}

views/base.jinja2

@@ -8,6 +8,7 @@
 
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="/static/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/static/css/custom.css">
 
     <title>{% block page_title %}{% endblock %} | Brother QL</title>
   </head>

views/labeldesigner.jinja2

@@ -17,30 +17,36 @@
             <div class="panel-heading">
               <h4 class="panel-title">
                 <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
-                Label Size</a>
+                <span class="glyphicon glyphicon-file" aria-hidden="true"></span> Label Size</a>
               </h4>
             </div>
             <div id="collapse1" class="panel-collapse collapse">
+              <div class="chooser panel-body">
               <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> <!-- class="chooser panel-body" -->
             </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>
+                  <span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>
+                  <!-- <span class="glyphicon glyphicon-text" aria-hidden="true"></span> -->
+                  Font Settings
+                </a>
               </h4>
             </div>
             <div id="collapse2" class="panel-collapse collapse in">
+              <div class="chooser panel-body">
               <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()">
+              <input id="fontSize" class="form-control" type="number" min="1" value="70" max="150" onChange="preview()" required>
               <label for="fontAlign" class="control-label input-group">Font Alignment:</label>
               <div class="btn-group" data-toggle="buttons">
                   <label class="btn btn-default">
@@ -53,7 +59,7 @@
                       <input type="radio" name="fontAlign" onchange="preview()" value="right" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
                   </label>
               </div>
-
+              </div> <!-- class="chooser panel-body" -->
             </div>
           </div>
           <div class="panel panel-default">
@@ -64,7 +70,9 @@
               </h4>
             </div>
             <div id="collapse3" class="panel-collapse collapse">
-              <div class="panel-body">Some more settings will show here, once implemented.</div>
+              <div class="chooser panel-body">
+                Some more settings will show here, once implemented.
+              </div> <!-- class="chooser panel-body" -->
             </div>
           </div>
         </div>
@@ -80,7 +88,9 @@
       <fieldset class="form-group">
         <label for="previewImg">Label Preview:</label>
         <img id="previewImg" style="border: 1px solid #444; width: 90%; margin: 5%;"/>
-         <button type="button" class="btn btn-primary btn-block btn-lg" onClick="print()">Print</button>
+         <button id="printButton" type="button" class="btn btn-primary btn-block btn-lg" onClick="print()">
+           <span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print
+         </button>
       </fieldset>
       <div class="panel panel-default">
         <div class="panel-heading">
@@ -124,12 +134,15 @@ function preview() {
 
 function setStatus(data) {
   if (data['success'])
-    $('#statusPanel').html('Printing was successful.');
+    $('#statusPanel').html('<div id="statusBox" class="alert alert-success" role="alert"><i class="glyphicon glyphicon-check"></i><span>Printing was successful.</span></div>');
   else
-    $('#statusPanel').html('Printing was unsuccessful:<br />'+data['message']);
+    $('#statusPanel').html('<div id="statusBox" class="alert alert-warning" role="alert"><i class="glyphicon glyphicon-alert"></i><span>Printing was unsuccessful:<br />'+data['message']+'</span></div>');
+  $('#printButton').prop('disabled', false);
 }
 
 function print() {
+  $('#printButton').prop('disabled', true);
+  $('#statusPanel').html('');
   $.ajax({
     type:     'POST',
     dataType: 'json',