Bootstrap 3

New: Updated UI
New: Mobile browser support
Fixed: /favicon.ico will return the favicon now

src/UI/Settings/Quality/Definition/QualityDefinitionCollectionTemplate.html

@@ -2,11 +2,11 @@
     <legend>Quality Definitions</legend>
     <div class="col-md-11">
         <div id="quality-definition-list">
-            <div class="quality-header x-header">
+            <div class="quality-header x-header hidden-xs">
                 <div class="row">
-                    <span class="col-md-2">Quality</span>
-                    <span class="col-md-2">Title</span>
-                    <span class="offset1 col-md-4">Size Limit</span>
+                    <span class="col-md-2 col-sm-3">Quality</span>
+                    <span class="col-md-2 col-sm-3">Title</span>
+                    <span class="col-md-4 col-sm-6">Size Limit</span>
                 </div>
             </div>
             <div class="rows x-rows">

src/UI/Settings/Quality/Definition/QualityDefinitionTemplate.html

@@ -1,10 +1,10 @@
-    <span class="col-md-2">
+    <span class="col-md-2 col-sm-3">
         {{quality.name}}
     </span>
-    <span class="col-md-2">
-        <input type="text" class="x-title form-control" value="{{title}}">
+    <span class="col-md-2 col-sm-3">
+        <input type="text" class="form-control" name="title">
     </span>
-    <span class="offset1 col-md-4">
+    <span class="col-md-4 col-sm-6">
         <div class="x-slider"></div>
         <div class="size-label-wrapper">
             <div class="pull-left">

src/UI/Settings/Quality/Definition/QualityDefinitionView.js

@@ -13,7 +13,6 @@ define(
             className: 'row',
 
             ui: {
-                title              : '.x-title',
                 sizeSlider         : '.x-slider',
                 thirtyMinuteMinSize: '.x-min-thirty',
                 sixtyMinuteMinSize : '.x-min-sixty',
@@ -22,7 +21,6 @@ define(
             },
 
             events: {
-                'change .x-title': '_updateTitle',
                 'slide .x-slider': '_updateSize'
             },
 
@@ -36,15 +34,11 @@ define(
                     range       : true,
                     min         : 0,
                     max         : 200,
-                    values      : [ this.model.get('minSize'), this.model.get('maxSize') ],
+                    values      : [ this.model.get('minSize'), this.model.get('maxSize') ]
                 });     
                 
                 this._changeSize();     
             },
-            
-            _updateTitle: function() {
-                this.model.set('title', this.ui.title.val());
-            },
 
             _updateSize: function (event, ui) {
                 this.model.set('minSize', ui.values[0]);