knobs look way better

UI/Content/base.less

@@ -93,3 +93,8 @@
   font-size : 56px;
   color     : white;
 }
+
+.label-large {
+  padding: 4px 6px;
+  font-size: 16px;
+}

UI/JsLibraries/jquery.knob.js

@@ -475,6 +475,7 @@
                             ) return;
 
                             s.val(v);
+                            s.$.trigger('change', v);
                         }
                 , kval, to, m = 1, kv = {37:-s.o.step, 38:s.o.step, 39:s.o.step, 40:-s.o.step};
 

UI/Settings/Misc/MiscTemplate.html

@@ -1,5 +1,5 @@
 <fieldset>
-    <legend>General</legend>
+    <legend>Misc</legend>
 
     <div class="control-group">
         <label class="control-label">Backlog Searching</label>
@@ -49,9 +49,9 @@
         <div class="controls">
             <textarea rows="3" name="nzbRestrictions" class="nzb-restrictions"></textarea>
             <span class="help-inline">
-                <i class="icon-question-sign" title="White list or black list nzbs based on these rules<br/>White list: +:LoL<br/>Black list: -:French"/>
+                <i class="icon-question-sign" title="Blacklist NZBs based on these words (case-insensitive)"/>
             </span>
-            <span class="text-area-help">Newline-delimited set of rules in the form of +|-:</span>
+            <span class="text-area-help">Newline-delimited set of rules</span>
         </div>
     </div>
 </fieldset>

UI/Settings/Quality/Size/QualitySizeTemplate.html

@@ -1,8 +1,20 @@
 <div class="quality-size-item">
     <h2 class="center-block">{{name}}</h2>
     <div class="size">
+        <div class="size-value-wrapper">
+            <div>
+                <span class="label label-large label-warning x-size-thirty"
+                      name="thirtyMinuteSize"
+                      title="Maximum size for a 30 minute episode in Megabytes">
+                </span>
+            </div>
+            <div>
+                <span class="label label-large label-info x-size-sixty"
+                      name="sixtyMinuteSize"
+                      title="Maximum size for a 60 minute episode in Megabytes">
+                </span>
+            </div>
+        </div>
         <input type="text" name="maxSize" class="knob x-knob" />
     </div>
-    <div class="size-value">30 minute limit: <span name="thirtyMinuteSize" class="thirty-minute-size"></span>MB</div>
-    <div class="size-value">60 minute limit: <span name="sixtyMinuteSize" class="sixty-minute-size"></span>MB</div>
 </div>

UI/Settings/Quality/Size/QualitySizeView.js

@@ -8,16 +8,17 @@ define(['marionette', 'Mixins/AsModelBoundView', 'jquery.knob'], function (Mario
 
         ui: {
             knob            : '.x-knob',
-            thirtyMinuteSize: '.thirty-minute-size',
+            thirtyMinuteSize: '.x-size-thirty',
-            sixtyMinuteSize : '.sixty-minute-size'
+            sixtyMinuteSize : '.x-size-sixty'
         },
 
         events: {
-            'change .x-knob': '_changeMaxSize'
+//            'change .x-knob': '_changeMaxSize'
         },
 
         initialize: function (options) {
             this.qualityProfileCollection = options.qualityProfiles;
+            this.model.on('change:maxSize', this._changeMaxSize, this)
         },
 
         onRender: function () {
@@ -26,15 +27,14 @@ define(['marionette', 'Mixins/AsModelBoundView', 'jquery.knob'], function (Mario
                 max          : 200,
                 step         : 10,
                 cursor       : 25,
-                width       : 100,
+                width        : 150,
-                stopper     : true
+                stopper      : true,
+                displayInput : false
             });
         },
 
-        _changeMaxSize: function (e, value) {
+        _changeMaxSize: function (e) {
-            this.model.set({
+            var value = this.model.get('maxSize');
-                maxSize: value
-            });
 
             this.ui.thirtyMinuteSize.html(value * 30);
             this.ui.sixtyMinuteSize.html(value * 60);

UI/Settings/Quality/quality.less

@@ -32,17 +32,18 @@
 .quality-size-item {
 
   .card;
+  text-align: center;
 
   width: 200px;
-  height: 200px;
+  height: 220px;
   padding: 10px 15px;
 
   h3 {
     margin-top: 0px;
-    text-align: center;
   }
 
   .size {
+    position: relative;
     height: 100px;
     margin: 10px;
     text-align: center;
@@ -52,8 +53,14 @@
     box-shadow: none;
   }
 
-  .size-value {
+  .size-value-wrapper {
-    text-align: center;
+    position: absolute;
+    top: 50px;
+    width: 100%;
+
+    div {
+      margin-top: 2px;
+    }
   }
 }