Bootstrap 3

New: Updated UI New: Mobile browser support Fixed: /favicon.ico will return the favicon now
2026-04-24 22:35:39 -04:00 · 2014-05-04 00:11:43 -07:00
parent 28fa264c69
commit 99f2b07a11
148 changed files with 2691 additions and 2054 deletions
@@ -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">
@@ -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">
@@ -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]);
@@ -10,10 +10,10 @@ define(
            _.each(this.items, function (item) {
                if (item.allowed) {
                    if (item.quality.id === cutoff.id) {
-                        ret += '<span class="label label-info" title="Cutoff">' + item.quality.name + '</span>&nbsp;';
+                        ret += '<li><span class="label label-info" title="Cutoff">' + item.quality.name + '</span></li>';
                    }
                    else {
-                        ret += '<span class="label">' + item.quality.name + '</span>&nbsp;';
+                        ret += '<li><span class="label label-default">' + item.quality.name + '</span></li>';
                    }
                }
            });
@@ -6,7 +6,7 @@ define(
    ], function (vent, Marionette) {

        return  Marionette.ItemView.extend({
-            template: 'Settings/Quality/Profile/DeleteTemplate',
+            template: 'Settings/Quality/Profile/DeleteQualityProfileViewTemplate',

            events: {
                'click .x-confirm-delete': '_removeProfile'
@@ -0,0 +1,15 @@
+<div class="modal-dialog">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+            <h3>Delete: {{name}}</h3>
+        </div>
+        <div class="modal-body">
+            <p>Are you sure you want to delete '{{name}}'?</p>
+        </div>
+        <div class="modal-footer">
+            <button class="btn" data-dismiss="modal">cancel</button>
+            <button class="btn btn-danger x-confirm-delete">delete</button>
+        </div>
+    </div>
+</div>
@@ -1,11 +0,0 @@
-<div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <h3>Delete: {{name}}</h3>
-</div>
-<div class="modal-body">
-    <p>Are you sure you want to delete '{{name}}'?</p>
-</div>
-<div class="modal-footer">
-    <button class="btn" data-dismiss="modal">cancel</button>
-    <button class="btn btn-danger x-confirm-delete">delete</button>
-</div>
@@ -3,13 +3,26 @@ define(
    [
        'underscore',
        'vent',
+        'AppLayout',
        'marionette',
        'backbone',
        'Settings/Quality/Profile/Edit/EditQualityProfileItemView',
        'Settings/Quality/Profile/Edit/QualitySortableCollectionView',
        'Settings/Quality/Profile/Edit/EditQualityProfileView',
+        'Settings/Quality/Profile/DeleteQualityProfileView',
+        'Series/SeriesCollection',
        'Config'
-    ], function (_, vent, Marionette, Backbone, EditQualityProfileItemView, QualitySortableCollectionView, EditQualityProfileView, Config) {
+    ], function (_,
+                 vent,
+                 AppLayout,
+                 Marionette,
+                 Backbone,
+                 EditQualityProfileItemView,
+                 QualitySortableCollectionView,
+                 EditQualityProfileView,
+                 DeleteView,
+                 SeriesCollection,
+                 Config) {

        return Marionette.Layout.extend({
            template: 'Settings/Quality/Profile/Edit/EditQualityProfileLayoutTemplate',
@@ -19,14 +32,24 @@ define(
                qualities: '#x-qualities'
            },

+            ui: {
+                deleteButton: '.x-delete'
+            },
+
            events: {
-                'click .x-save'  : '_saveQualityProfile',
-                'click .x-cancel': '_cancelQualityProfile'
+                'click .x-save'   : '_saveQualityProfile',
+                'click .x-cancel' : '_cancelQualityProfile',
+                'click .x-delete' : '_delete'
            },

            initialize: function (options) {
                this.profileCollection = options.profileCollection;
                this.itemsCollection = new Backbone.Collection(_.toArray(this.model.get('items')).reverse());
+                this.listenTo(SeriesCollection, 'all', this._updateDisableStatus);
+            },
+
+            onRender: function () {
+                this._updateDisableStatus();
            },

            onShow: function () {
@@ -103,6 +126,25 @@ define(

            _showFieldsView: function () {
                this.fields.show(this.fieldsView);
+            },
+
+            _delete: function () {
+                var view = new DeleteView({ model: this.model });
+                AppLayout.modalRegion.show(view);
+            },
+
+            _updateDisableStatus: function () {
+                if (this._isQualityInUse()) {
+                    this.ui.deleteButton.addClass('disabled');
+                    this.ui.deleteButton.attr('title', 'Can\'t delete quality profiles attached to a series.');
+                }
+                else {
+                    this.ui.deleteButton.removeClass('disabled');
+                }
+            },
+
+            _isQualityInUse: function () {
+                return SeriesCollection.where({'qualityProfileId': this.model.id}).length !== 0;
            }
        });
    });
@@ -1,29 +1,37 @@
-<div class="modal-header">
-    <button type="button" class="close x-cancel" aria-hidden="true">&times;</button>
-    {{#if id}}
+<div class="modal-dialog">
+    <div class="modal-content">
+        <div class="modal-header">
+        <button type="button" class="close x-cancel" aria-hidden="true">&times;</button>
+        {{#if id}}
        <h3>Edit</h3>
-    {{else}}
+        {{else}}
        <h3>Add</h3>
-    {{/if}}
-</div>
-<div class="modal-body">
-    <div class="form-horizontal">
-        <div id="x-fields"></div>
-        <div class="form-group">
-            <label class="control-label">Qualities</label>
-            <div class="controls qualities-controls">
-                <span id="x-qualities"></span>
-                <span class="help-inline">
-                    <i class="icon-nd-form-info" title="Qualities higher in the list are more preferred. Only checked qualities will be wanted."/>
-                </span>
+        {{/if}}
+    </div>
+        <div class="modal-body">
+            <div class="form-horizontal">
+                <div id="x-fields"></div>
+                <div class="form-group">
+                    <label class="col-sm-3 control-label">Qualities</label>
+
+                    <div class="col-sm-5">
+                        <div class="controls qualities-controls">
+                            <span id="x-qualities"></span>
+                        </div>
+                    </div>
+
+                    <div class="col-sm-1 help-inline">
+                        <i class="icon-nd-form-info" title="Qualities higher in the list are more preferred. Only checked qualities will be wanted."/>
+                    </div>
+                </div>
            </div>
        </div>
+        <div class="modal-footer">
+            {{#if id}}
+            <button class="btn btn-danger pull-left x-delete">delete</button>
+            {{/if}}
+            <button class="btn x-cancel">cancel</button>
+            <button class="btn btn-primary x-save">save</button>
+        </div>
    </div>
-</div>
-<div class="modal-footer">
-    {{#if id}}
-        <button class="btn btn-danger pull-left x-delete">delete</button>
-    {{/if}}
-    <button class="btn x-cancel">cancel</button>
-    <button class="btn btn-primary x-save">save</button>
-</div>
+</div>
@@ -1,21 +1,23 @@
 <div class="form-group">
-    <label class="control-label">Name</label>
-    <div class="controls">
-        <input type="text" name="name">
+    <label class="col-sm-3 control-label">Name</label>
+    <div class="col-sm-5">
+        <input type="text" name="name" class="form-control">
    </div>
 </div>
 <div class="form-group">
-    <label class="control-label">Cutoff</label>
-    <div class="controls">
-        <select class="x-cutoff" name="cutoff.id" validation-name="cutoff">
+    <label class="col-sm-3 control-label">Cutoff</label>
+
+    <div class="col-sm-5">
+        <select class="form-control x-cutoff" name="cutoff.id" validation-name="cutoff">
            {{#eachReverse items}}
            {{#if allowed}}
            <option value="{{quality.id}}">{{quality.name}}</option>
            {{/if}}
            {{/eachReverse}}
        </select>
-        <span class="help-inline">
-            <i class="icon-nd-form-info" title="Once this quality is reached NzbDrone will no longer download episodes"/>
-        </span>
+    </div>
+
+    <div class="col-sm-1 help-inline">
+        <i class="icon-nd-form-info" title="Once this quality is reached NzbDrone will no longer download episodes"/>
    </div>
 </div>
@@ -5,12 +5,10 @@ define(
        'AppLayout',
        'marionette',
        'Settings/Quality/Profile/Edit/EditQualityProfileLayout',
-        'Settings/Quality/Profile/DeleteView',
-        'Series/SeriesCollection',
        'Mixins/AsModelBoundView',
        'Settings/Quality/Profile/AllowedLabeler',
        'bootstrap'
-    ], function (AppLayout, Marionette, EditProfileView, DeleteProfileView, SeriesCollection, AsModelBoundView) {
+    ], function (AppLayout, Marionette, EditProfileView, AsModelBoundView) {

        var view = Marionette.ItemView.extend({
            template: 'Settings/Quality/Profile/QualityProfileViewTemplate',
@@ -22,47 +20,16 @@ define(
            },

            events: {
-                'click .x-edit'  : '_editProfile',
-                'click .x-delete': '_deleteProfile'
+                'click'  : '_editProfile'
            },

            initialize: function () {
                this.listenTo(this.model, 'sync', this.render);
-                this.listenTo(SeriesCollection, 'all', this._updateDisableStatus);
            },

            _editProfile: function () {
                var view = new EditProfileView({ model: this.model, profileCollection: this.model.collection });
                AppLayout.modalRegion.show(view);
-            },
-
-            _deleteProfile: function () {
-                if (this._isQualityInUse()) {
-                    return;
-                }
-
-                var view = new DeleteProfileView({ model: this.model });
-                AppLayout.modalRegion.show(view);
-            },
-
-            onRender: function () {
-                this._updateDisableStatus();
-            },
-
-            _updateDisableStatus: function () {
-                if (this._isQualityInUse()) {
-                    this.ui.deleteButton.addClass('disabled');
-                    this.ui.deleteButton.attr('title', 'Can\'t delete quality profiles attached to a series.');
-                }
-                else {
-                    this.ui.deleteButton.removeClass('disabled');
-                    this.ui.deleteButton.attr('title', 'Delete Quality Profile');
-                }
-            },
-
-            _isQualityInUse: function () {
-                return SeriesCollection.where({'qualityProfileId': this.model.id}).length !== 0;
-
            }
        });

@@ -1,11 +1,9 @@
-<div class="quality-profile-item thingy">
+<div class="quality-profile-item thingy" title="Click to edit">
    <div>
        <h3 name="name"></h3>
-        <span class="btn-group pull-right">
-            <button class="btn btn-xs btn-icon-only x-edit"><i class="icon-nd-edit"/></button>
-            <button class="btn btn-xs btn-icon-only x-delete"><i class="icon-nd-delete"/></button>
-        </span>
    </div>

-    {{allowedLabeler}}
+    <ul class="allowed-qualities">
+        {{allowedLabeler}}
+    </ul>
 </div>
@@ -1,19 +1,27 @@
@import "../../Content/Bootstrap/mixins";
@import "../../Content/FontAwesome/font-awesome";
+@import "../../Shared/Styles/clickable.less";

 .quality-profile-item {
+  .clickable;

  width: 300px;
  height: 120px;
  padding: 10px 15px;

-  h3 {
-    width: 240px;
-  }
-
  &.add-card {
    .center {
-      margin-top: 30px;
+      margin-top: 10px;
+    }
+  }
+
+  .allowed-qualities {
+
+    padding-left: 0px;
+
+    li {
+      list-style-type : none;
+      margin: 1px;
    }
  }
 }
@@ -66,6 +74,7 @@ ul.qualities {
    .quality-label {
      color: #c6c6c6;
    }
+
    .drag-handle, .select-handle {
      opacity: 0.2;
      line-height: 20px;