Settings will load with zero notifications

UI/Settings/Indexers/AddCardTemplate.html

@@ -1,7 +0,0 @@
-<li>
-    <div class="indexer-settings-item add-card x-add-card">
-        <span class="center well">
-            <i class="icon-plus" title="Add Newznab"/>
-        </span>
-    </div>
-</li>

UI/Settings/Indexers/CollectionTemplate.html

@@ -2,7 +2,15 @@
     <legend>Indexers</legend>
     <div class="row">
         <div class="span12">
-            <ul id="x-indexers" class="indexer-list"></ul>
+            <ul id="x-indexers" class="indexer-list">
+                <li>
+                    <div class="indexer-settings-item add-card x-add-card">
+                        <span class="center well">
+                            <i class="icon-plus" title="Add Newznab"/>
+                        </span>
+                    </div>
+                </li>
+            </ul>
         </div>
     </div>
 </fieldset>

UI/Settings/Indexers/CollectionView.js

@@ -10,19 +10,19 @@ define(['app',
             itemViewContainer: '#x-indexers',
             template         : 'Settings/Indexers/CollectionTemplate',
 
+            ui: {
+                'addCard': '.x-add-card'
+            },
+
             events: {
                 'click .x-add-card': '_openSchemaModal'
             },
 
-            onRender: function () {
-                this.listenTo(this.collection, 'add', this.render);
-
-                this.templateFunction = Marionette.TemplateCache.get('Settings/Indexers/AddCardTemplate');
-                var html = this.templateFunction();
-
-                this.$itemViewContainer.append(html);
+            appendHtml: function(collectionView, itemView, index){
+                collectionView.ui.addCard.parent('li').before(itemView.el);
             },
 
+
             _openSchemaModal: function () {
                 var self = this;
                 //TODO: Is there a better way to deal with changing URLs?

UI/Settings/Indexers/indexers.less

@@ -29,20 +29,8 @@
   }
 
   &.add-card {
-    .clickable;
-    color: #adadad;
-    font-size: 50px;
-    text-align: center;
-
     .center {
-      display: inline-block;
-      padding: 0px 20px;
-      padding-top: 5px;
       margin-top: 100px;
     }
-
-    i {
-      .clickable;
-    }
   }
 }

UI/Settings/Notifications/AddCardTemplate.html

@@ -1,7 +0,0 @@
-<li>
-    <div class="notification-item add-card x-add-card">
-        <span class="center well">
-            <i class="icon-plus" title="Add Notification"/>
-        </span>
-    </div>
-</li>

UI/Settings/Notifications/CollectionTemplate.html

@@ -1,5 +1,13 @@
 <div class="row">
     <div class="span12">
-        <ul class="notifications"></ul>
+        <ul class="notifications">
+            <li>
+                <div class="notification-item add-card x-add-card">
+                    <span class="center well">
+                        <i class="icon-plus" title="Add Notification"/>
+                    </span>
+                </div>
+            </li>
+        </ul>
     </div>
 </div>

UI/Settings/Notifications/CollectionView.js

@@ -3,24 +3,24 @@ define([
     'app',
     'marionette',
     'Settings/Notifications/ItemView',
-    'Settings/Notifications/SchemaModal'
-], function (App, Marionette, NotificationItemView, SchemaModal) {
+    'Settings/Notifications/SchemaModal',
+    'Settings/Notifications/AddCardView'
+], function (App, Marionette, NotificationItemView, SchemaModal, AddCardView) {
     return Marionette.CompositeView.extend({
         itemView         : NotificationItemView,
         itemViewContainer: '.notifications',
         template         : 'Settings/Notifications/CollectionTemplate',
 
+        ui: {
+          'addCard': '.x-add-card'
+        },
+
         events: {
             'click .x-add-card': '_openSchemaModal'
         },
 
-        onRender: function () {
-            this.listenTo(this.collection, 'add', this.render);
-
-            this.templateFunction = Marionette.TemplateCache.get('Settings/Notifications/AddCardTemplate');
-            var html = this.templateFunction();
-
-            this.$itemViewContainer.append(html);
+        appendHtml: function(collectionView, itemView, index){
+            collectionView.ui.addCard.parent('li').before(itemView.el);
         },
 
         _openSchemaModal: function () {

UI/Settings/Notifications/notifications.less

@@ -58,20 +58,8 @@
   }
 
   &.add-card {
-    .clickable;
-    color: #adadad;
-    font-size: 50px;
-    text-align: center;
-
     .center {
-      display: inline-block;
-      padding: 0px 20px;
-      padding-top: 5px;
       margin-top: 15px;
     }
-
-    i {
-      .clickable;
-    }
   }
 }

UI/Settings/Quality/Profile/AddCardTemplate.html

@@ -1,7 +0,0 @@
-<li>
-    <div class="quality-profile-item add-card x-add-card">
-        <span class="center well">
-            <i class="icon-plus" title="Add Profile"/>
-        </span>
-    </div>
-</li>

UI/Settings/Quality/Profile/QualityProfileCollectionTemplate.html

@@ -2,7 +2,15 @@
     <legend>Quality Profiles</legend>
     <div class="row">
         <div class="span12">
-            <ul class="quality-profiles"></ul>
+            <ul class="quality-profiles">
+                <li>
+                    <div class="quality-profile-item add-card x-add-card">
+                        <span class="center well">
+                            <i class="icon-plus" title="Add Profile"/>
+                        </span>
+                    </div>
+                </li>
+            </ul>
         </div>
     </div>
 </fieldset>

UI/Settings/Quality/Profile/QualityProfileCollectionView.js

@@ -12,19 +12,19 @@ define(['app',
         itemViewContainer: '.quality-profiles',
         template         : 'Settings/Quality/Profile/QualityProfileCollectionTemplate',
 
+        ui: {
+            'addCard': '.x-add-card'
+        },
+
         events: {
             'click .x-add-card': '_addProfile'
         },
 
-        onRender: function () {
-            this.listenTo(this.collection, 'add', this.render);
-
-            this.templateFunction = Marionette.TemplateCache.get('Settings/Quality/Profile/AddCardTemplate');
-            var html = this.templateFunction();
-
-            this.$itemViewContainer.append(html);
+        appendHtml: function(collectionView, itemView, index){
+            collectionView.ui.addCard.parent('li').before(itemView.el);
         },
 
+
         _addProfile: function () {
             var self = this;
             var schemaCollection = new ProfileCollection();

UI/Settings/Quality/quality.less

@@ -29,21 +29,9 @@
   }
 
   &.add-card {
-    .clickable;
-    color: #adadad;
-    font-size: 50px;
-    text-align: center;
-
     .center {
-      display: inline-block;
-      padding: 0px 20px;
-      padding-top: 5px;
       margin-top: 30px;
     }
-
-    i {
-      .clickable;
-    }
   }
 }
 

UI/Settings/settings.less

@@ -20,4 +20,23 @@ li.save-and-add:hover {
   text-decoration: none;
   color: rgb(255, 255, 255);
   background-color: rgb(0, 129, 194);
+}
+
+.add-card {
+  .clickable;
+  color: #adadad;
+  font-size: 50px;
+  text-align: center;
+  background-color: #f5f5f5;
+
+  .center {
+    .well;
+    display: inline-block;
+    padding: 5px 20px 0px;
+    background-color: white;
+  }
+
+  i {
+    .clickable;
+  }
 }