add existing has a load more button that shows all of the results.

NzbDrone.Api/Series/SeriesLookupModule.cs

@@ -23,7 +23,7 @@ namespace NzbDrone.Api.Series
         private Response Search()
         {
             var tvDbResults = _searchProxy.SearchForNewSeries((string)Request.Query.term);
-            return MapToResource(tvDbResults).FirstOrDefault().AsResponse();
+            return MapToResource(tvDbResults).AsResponse();
         }
 
 

UI/AddSeries/Collection.js

@@ -5,9 +5,11 @@ define(['app', 'Series/SeriesModel'], function () {
         model: NzbDrone.Series.SeriesModel,
 
         parse: function (response) {
-            if (response) {
-                response.id = undefined;
-            }
+
+            _.each(response, function (model) {
+                model.id = undefined;
+            });
+
             return response;
         }
     });

UI/AddSeries/Existing/ImportSeriesView.js

@@ -4,69 +4,27 @@ define([
     'Quality/QualityProfileCollection',
     'AddSeries/Existing/UnmappedFolderModel',
     'AddSeries/Collection',
+    'AddSeries/SearchResultView',
     'Series/SeriesModel'], function (app, rootFolders, qualityProfileCollection) {
 
-    NzbDrone.AddSeries.Existing.FolderMatchResultView = Backbone.Marionette.ItemView.extend({
-        template: 'AddSeries/SearchResultTemplate',
-
-        ui: {
-            qualityProfile: '.x-quality-profile',
-            addButton     : '.x-add'
-        },
-
-        events: {
-            'click .x-add': 'addSeries'
-        },
-
-        initialize: function () {
-            this.model.set('isExisting', true);
-        },
-
-        addSeries: function () {
-            var icon = this.ui.addButton.find('icon');
-            icon.removeClass('icon-plus').addClass('icon-spin icon-spinner disabled');
-
-            var self = this;
-
-            var quality = this.ui.qualityProfile.val();
-            var path = this.options.folder.path;
-
-            this.model.set('qualityProfileId', quality);
-            this.model.set('path', path);
-
-            this.model.save(undefined, {
-                success: function () {
-                    icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
-                    NzbDrone.Shared.Messenger.show({
-                        message: 'Added: ' + self.model.get('title')
-                    });
-
-                    NzbDrone.vent.trigger(NzbDrone.Events.SeriesAdded, { existing: true, series: self.model });
-                    self.trigger('seriesAdded');
-                    self.close();
-                },
-                fail   : function () {
-                    icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
-                }
-            });
-        }
-    });
-
     NzbDrone.AddSeries.Existing.UnmappedFolderCompositeView = Backbone.Marionette.CompositeView.extend({
 
         template         : 'AddSeries/Existing/UnmappedFolderCompositeViewTemplate',
         itemViewContainer: '.x-folder-name-match-results',
-        itemView         : NzbDrone.AddSeries.Existing.FolderMatchResultView,
+        itemView         : NzbDrone.AddSeries.SearchResultView,
 
         events: {
             'click .x-btn-search'  : 'search',
+            'click .x-load-more'   : '_loadMore',
             'keydown .x-txt-search': 'keyDown'
         },
 
         ui: {
             searchButton: '.x-btn-search',
             searchText  : '.x-txt-search',
-            profileList : '.x-lst-quality-profile'
+            profileList : '.x-lst-quality-profile',
+            searchBar   : '.x-search-bar',
+            loadMore    : '.x-load-more'
         },
 
         initialize: function () {
@@ -79,22 +37,31 @@ define([
         },
 
         onRender: function () {
-            this.resultView = new NzbDrone.AddSeries.SearchResultView({ collection: this.collection });
+            this.ui.loadMore.show();
         },
 
         search: function () {
             var icon = this.ui.searchButton.find('icon');
+            icon.removeClass('icon-search').addClass('icon-spin icon-spinner disabled');
 
+            var self = this;
             var deferred = $.Deferred();
 
             this.collection.reset();
-            icon.removeClass('icon-search').addClass('icon-spin icon-spinner disabled');
 
-            this.collection.fetch({
+            this.searchCollection = new NzbDrone.AddSeries.Collection();
+
+            this.searchCollection.fetch({
                 data   : { term: this.ui.searchText.val() },
                 success: function (collection) {
                     icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
                     deferred.resolve();
+                    self.collection.add(self.searchCollection.shift());
+
+                    if (self.showall) {
+                        self._showAll();
+                    }
+
                 },
                 fail   : function () {
                     icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
@@ -105,6 +72,7 @@ define([
             return deferred.promise();
         },
 
+
         keyDown: function (e) {
             //Check for enter being pressed
             var code = (e.keyCode ? e.keyCode :e.which);
@@ -113,9 +81,19 @@ define([
             }
         },
 
-        collectionReset: function () {
-            _.each(this.collection.models, function (model) {
-                model.set('isExisting', true);
+        _loadMore: function () {
+            this.showall = true;
+
+            this.ui.searchBar.fadeIn();
+            this.ui.loadMore.fadeOut();
+
+            this._showAll();
+        },
+
+        _showAll: function () {
+            var self = this;
+            this.searchCollection.each(function (searchResult) {
+                self.collection.add(searchResult);
             });
         },
 
@@ -123,7 +101,8 @@ define([
             return {
                 qualityProfile: this.ui.profileList,
                 rootFolder    : this.model.get('rootFolder'),
-                folder        : this.model.get('folder')
+                folder        : this.model.get('folder'),
+                isExisting    : true
             };
         }
     });
@@ -160,14 +139,13 @@ define([
                 var that = this;
                 var currentIndex = index;
                 this.addItemView(model, this.getItemView(), index);
-                console.log('start');
                 $.when(this.children.findByModel(model).search())
                     .then(function () {
-                        console.log('done');
                         that.showAndSearch(currentIndex + 1);
                     });
             }
         }
 
     });
-});
+})
+;

UI/AddSeries/Existing/UnmappedFolderCompositeViewTemplate.html

@@ -1,8 +1,11 @@
 <div class="unmapped-folder-view">
-    <div class="row">
-        <div class="x-folder-name-match-results folder-name-matches"/>
+    <div class="text-center">
+        <h2>
+            <icon class="icon-folder-open"></icon>
+            {{folder.path}}
+        </h2>
     </div>
-    <div class="row" style="visibility: collapse;">
+    <div class="row x-search-bar" style="display: none;">
         <div class="folder-header span11">
             <div class="input-prepend">
                 <i class="add-on icon-search"></i>
@@ -14,8 +17,10 @@
             </div>
         </div>
     </div>
-    <div class="row text-center">
-        load more
+    <div class="row">
+        <div class="x-folder-name-match-results folder-name-matches"/>
+    </div>
+    <div class="text-center new-series-loadmore x-load-more" style="display: none;">
+        <i class="icon-angle-down"/> more
     </div>
-
 </div>

UI/AddSeries/New/AddNewSeriesView.js

@@ -1,5 +1,8 @@
 "use strict";
-define(['app', 'AddSeries/RootFolders/RootFolderCollection', 'AddSeries/New/SearchResultView', 'Shared/SpinnerView',
+define(['app',
+        'AddSeries/RootFolders/RootFolderCollection',
+        'AddSeries/SearchResultView',
+        'Shared/SpinnerView',
         'AddSeries/Collection'], function () {
     NzbDrone.AddSeries.New.AddNewSeriesView = Backbone.Marionette.Layout.extend({
         template: 'AddSeries/New/AddNewSeriesTemplate',
@@ -38,7 +41,7 @@ define(['app', 'AddSeries/RootFolders/RootFolderCollection', 'AddSeries/New/Sear
                     self.$el.data('timeout', window.setTimeout(self.search, 500, self));
                 });
 
-            this.resultView = new NzbDrone.AddSeries.SearchResultView({ collection: this.collection });
+            this.resultView = new NzbDrone.AddSeries.SearchResultCollectionView({ collection: this.collection });
         },
 
         search: function (context) {

UI/AddSeries/SearchResultTemplate.html

@@ -7,30 +7,30 @@
         </div>
         <div class="span9">
 
-            <div class="row">
-                {{#unless isExisting}}
-                    <select class="span6 x-root-folder">
-                        {{#each rootFolders.models}}
-                            <option value="{{id}}">{{attributes.path}}</option>
-                        {{/each}}
-                    </select>
-                {{/unless}}
-                <select class="span2 x-quality-profile">
-                    {{#each qualityProfiles.models}}
-                        <option value="{{id}}">{{attributes.name}}</option>
-                    {{/each}}
-                </select>
-
-                <div class="btn btn-success x-add pull-right">
-                    <icon class="icon-plus"></icon>
-                </div>
-            </div>
             <div class="row">
                 <h2>{{title}}</h2>
             </div>
-            <div class="row">
+            <div class="row new-series-overview x-overview">
                 {{overview}}
             </div>
+            <div class="row">
+                <div class="btn btn-success x-add pull-right new-series-add">
+                    Add
+                    <icon class="icon-plus"></icon>
+                </div>
+                {{#unless isExisting}}
+                <select class="span6 x-root-folder">
+                    {{#each rootFolders.models}}
+                    <option value="{{id}}">{{attributes.path}}</option>
+                    {{/each}}
+                </select>
+                {{/unless}}
+                <select class="span2 x-quality-profile pull-right">
+                    {{#each qualityProfiles.models}}
+                    <option value="{{id}}">{{attributes.name}}</option>
+                    {{/each}}
+                </select>
+            </div>
         </div>
     </div>
 </div>

UI/AddSeries/SearchResultView.js

@@ -1,59 +1,68 @@
-'use strict';
-define(['app', 'Series/SeriesCollection'], function (app) {
-
-    NzbDrone.AddSeries.New.SearchItemView = Backbone.Marionette.ItemView.extend({
-
-        template: "AddSeries/SearchResultTemplate",
-
-        ui: {
-            qualityProfile: '.x-quality-profile',
-            rootFolder    : '.x-root-folder',
-            addButton     : '.x-add'
-        },
-
-        events: {
-            'click .x-add': 'addSeries'
-        },
-
-        onRender: function () {
-            this.listenTo(this.model, 'change', this.render);
-        },
-
-        addSeries: function () {
-            var icon = this.ui.addButton.find('icon');
-            icon.removeClass('icon-plus').addClass('icon-spin icon-spinner disabled');
-
-            var quality = this.ui.qualityProfile.val();
-            var rootFolderPath = this.ui.rootFolder.children(':selected').text();
-
-            this.model.set('qualityProfileId', quality);
-            this.model.set('rootFolderPath', rootFolderPath);
-
-            var self = this;
-
-            this.model.save(undefined, {
-                url    : NzbDrone.Series.SeriesCollection.prototype.url,
-                success: function () {
-                    icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
-                    NzbDrone.Shared.Messenger.show({
-                        message: 'Added: ' + self.model.get('title')
-                    });
-
-                    NzbDrone.vent.trigger(NzbDrone.Events.SeriesAdded, { existing: false, series: self.model });
-                },
-                fail: function () {
-                    icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
-                }
-            });
-        }
-    });
-
-    NzbDrone.AddSeries.SearchResultView = Backbone.Marionette.CollectionView.extend({
-
-        itemView  : NzbDrone.AddSeries.New.SearchItemView,
-        initialize: function () {
-            this.listenTo(this.collection, 'reset', this.render);
-        }
-
-    });
-});
+'use strict';
+define(['app', 'Series/SeriesCollection'], function (app) {
+
+    NzbDrone.AddSeries.SearchResultView = Backbone.Marionette.ItemView.extend({
+
+        template: "AddSeries/SearchResultTemplate",
+
+        ui: {
+            qualityProfile: '.x-quality-profile',
+            rootFolder    : '.x-root-folder',
+            addButton     : '.x-add',
+            overview      : '.x-overview'
+        },
+
+        events: {
+            'click .x-add': 'addSeries'
+        },
+
+        initialize: function () {
+            if (this.isExisting) {
+                this.modal.set('isExisting', true);
+            }
+        },
+
+        onRender: function () {
+            this.listenTo(this.model, 'change', this.render);
+        },
+
+        addSeries: function () {
+            var icon = this.ui.addButton.find('icon');
+            icon.removeClass('icon-plus').addClass('icon-spin icon-spinner disabled');
+
+            var quality = this.ui.qualityProfile.val();
+            var rootFolderPath = this.ui.rootFolder.children(':selected').text();
+
+            this.model.set('qualityProfileId', quality);
+            this.model.set('rootFolderPath', rootFolderPath);
+
+            var self = this;
+
+            this.model.save(undefined, {
+                url    : NzbDrone.Series.SeriesCollection.prototype.url,
+                success: function () {
+                    icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
+                    NzbDrone.Shared.Messenger.show({
+                        message: 'Added: ' + self.model.get('title')
+                    });
+
+                    NzbDrone.vent.trigger(NzbDrone.Events.SeriesAdded, { existing: false, series: self.model });
+                },
+                fail   : function () {
+                    icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
+                }
+            });
+        }
+    });
+
+
+    NzbDrone.AddSeries.SearchResultCollectionView = Backbone.Marionette.CollectionView.extend({
+
+        itemView  : NzbDrone.AddSeries.SearchResultView,
+        initialize: function () {
+            this.listenTo(this.collection, 'reset', this.render);
+        }
+
+    });
+
+});

UI/AddSeries/addSeries.less

@@ -1,13 +1,18 @@
-.result-list {
+@import "../shared/Styles/card.less";
+
+.result-list {
+
   font-size: 14px;
   text-align: left;
   padding-bottom: 30px;
 }
+
 .existing-root-folder-view {
   h1 {
     padding: 10px 0 20px 0;
   }
 }
+
 .nz-input-large {
   margin-top: 20px;
   margin-bottom: 40px;
@@ -22,18 +27,20 @@
     height: 50px;
   }
 }
+
 .folder-name-matches {
   padding-left: 20px;
   padding-top: 10px;
 }
+
 .img-polaroid {
   min-width: 138px;
   min-height: 203px;
   max-width: 138px;
   max-height: 203px;
 }
+
 .unmapped-folder-view {
-  background: #fcf8e3;
   margin-top: 20px;
   padding: 20px;
   .folder-header {
@@ -47,7 +54,11 @@
     }
   }
 }
+
 .search-item {
+
+  .card;
+
   padding-bottom: 20px;
   a {
     color: #343434;
@@ -59,3 +70,26 @@
     font-size: 16px;
   }
 }
+
+.new-series-overview {
+  text-overflow: ellipsis;
+  white-space: pre-line;
+  overflow: hidden;
+  height: 125px;
+}
+
+.new-series-add {
+  margin-left: 20px;
+}
+
+.new-series-loadmore {
+  font-size: 30px;
+  font-weight: 300;
+
+  cursor: pointer;
+
+  background: #fcf8e3;
+
+  padding-top: 10px;
+  padding-bottom: 10px;
+}

UI/Series/series.less

@@ -1,3 +1,5 @@
+@import "../Shared/Styles/card.less";
+
 .series-item {
   padding-bottom: 30px;
 
@@ -26,6 +28,9 @@
   }
 
   .series-posters-item {
+
+    .card;
+
     margin-bottom: 20px;
 
     .center {

UI/Shared/Styles/card.less

@@ -0,0 +1,9 @@
+.card {
+  margin :10px;
+  padding: 10px;
+  box-shadow: 0px 0px 20px 1px #e1e1e1;
+  color: #444444;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+}