Bootstrap 3

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

src/UI/AddSeries/AddSeriesLayoutTemplate.html

@@ -1,23 +1,17 @@
-<div class="row operations-row">
-    <div class="btn-group btn-block">
-        <div class="btn btn-lg add-series-import-btn x-import">
-            <i class="icon-hdd"/>
-            Import existing series on disk
+<div class="row">
+    <div class="col-md-12">
+        <div class="btn-group add-series-btn-group btn-group-lg btn-block">
+            <button type="button" class="btn btn-default col-md-10 col-xs-8 add-series-import-btn x-import">
+                <i class="icon-hdd"/>
+                Import existing series on disk
+            </button>
+            <button class="btn btn-default col-md-2 col-xs-4 x-add-new"><i class="icon-play hidden-xs"></i> Add new series</button>
         </div>
-        <button class="btn btn-lg btn-icon-only dropdown-toggle" data-toggle="dropdown">
-            <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu">
-            <li class="add-new x-add-new">
-                Add new series
-            </li>
-        </ul>
     </div>
-
-    <!--<div class="btn btn-block btn-lg add-series-import-btn x-import">-->
-        <!--<i class="icon-hdd"/>-->
-        <!--Import existing series on disk-->
-    <!--</div>-->
 </div>
-<div id="add-series-workspace"/>
+<div class="row">
+    <div class="col-md-12">
+        <div id="add-series-workspace"></div>
+    </div>
+</div>
 

src/UI/AddSeries/AddSeriesViewTemplate.html

@@ -1,12 +1,13 @@
 {{#if folder.path}}
-<div class="row unmapped-folder-path">
-    <div class="col-md-11">
+<div class="unmapped-folder-path">
+    <div class="col-md-12">
         {{folder.path}}
     </div>
 </div>{{/if}}
-<div class="row x-search-bar">
-    <div class="input-group nz-input-large add-series-search col-md-11">
-        <i class="input-group-addon icon-search"/>
+<div class="x-search-bar">
+    <div class="input-group input-group-lg add-series-search">
+        <span class="input-group-addon"><i class="icon-search"/></span>
+
         {{#if folder}}
         <input type="text" class="form-control x-series-search" value="{{folder.name}}">
         {{else}}

src/UI/AddSeries/RootFolders/RootFolderLayoutTemplate.html

@@ -7,15 +7,19 @@
         <div class="modal-body root-folders-modal">
             <div class="validation-errors"></div>
             <div class="alert alert-info">Enter the path that contains some or all of your TV series, you will be able to choose which series you want to import<button type="button" class="close" data-dismiss="alert">×</button></div>
+
             <div class="input-group x-path form-group">
                 <span class="input-group-addon">&nbsp;<i class="icon-folder-open"></i></span>
-                <input class="col-md-9" type="text" validation-name="path" placeholder="Enter path to folder that contains your shows">
-                <button class="btn btn-success x-add">
-                    <i class="icon-ok"/>
-                </button>
+                <input class="col-md-9 form-control" type="text" validation-name="path" placeholder="Enter path to folder that contains your shows">
+                <span class="input-group-btn ">
+                    <button class="btn btn-success x-add">
+                        <i class="icon-ok"/>
+                    </button>
+                </span>
             </div>
+
             {{#if items}}
-            <h4>Recent Folders</h4>
+                <h4>Recent Folders</h4>
             {{/if}}
             <div id="current-dirs" class="root-folders-list"></div>
         </div>

src/UI/AddSeries/RootFolders/RootFolderSelectionPartial.html

@@ -1,12 +1,11 @@
-<div>
-    <select class="col-md-4 x-root-folder" validation-name="RootFolderPath">
-        {{#if this}}
-        {{#each this}}
-        <option value="{{id}}">{{path}}</option>
-        {{/each}}
-        {{else}}
-        <option value="">Select Path</option>
-        {{/if}}
-        <option value="addNew">Add a different path</option>
-    </select>
-</div>
+<select class="col-md-4 form-control x-root-folder" validation-name="RootFolderPath">
+    {{#if this}}
+    {{#each this}}
+    <option value="{{id}}">{{path}}</option>
+    {{/each}}
+    {{else}}
+    <option value="">Select Path</option>
+    {{/if}}
+    <option value="addNew">Add a different path</option>
+</select>
+

src/UI/AddSeries/RootFolders/StartingSeasonSelectionPartial.html

@@ -1,4 +1,4 @@
-<select class="starting-season x-starting-season">
+<select class="form-control md-col-2 starting-season x-starting-season">
     {{#each this}}
         {{#if_eq seasonNumber compare="0"}}
             <option value="{{seasonNumber}}">Specials</option>

src/UI/AddSeries/SearchResultViewTemplate.html

@@ -6,8 +6,7 @@
                 {{defaultImg}} >
             </a>
         </div>
-        <div class="col-md-9">
-
+        <div class="col-md-10">
             <div class="row">
                 <h2 class="series-title">
                     {{titleWithYear}}
@@ -21,42 +20,51 @@
                     {{overview}}
                 </div>
             </div>
-            {{#unless existing}}
-            <div class="row labels">
-                {{#unless path}}
-                <div class="col-md-4">Path</div>
-                {{/unless}}
-
-                <div class="col-md-1 starting-season starting-season-label">Starting Season</div>
-                <div class="col-md-2">Quality Profile</div>
-            </div>
-            {{/unless}}
             <div class="row">
-                <form class="form-inline">
-                    {{#if existing}}
-                    <div class="btn add-series disabled pull-right">
-                        Already Exists
-                    </div>
-                    {{else}}
+                {{#unless existing}}
                     {{#unless path}}
-                    {{> RootFolderSelectionPartial rootFolders}}
-                    {{/unless}}
-
-                    {{> StartingSeasonSelectionPartial seasons}}
-                    {{> QualityProfileSelectionPartial qualityProfiles}}
-
-                    <label class="checkbox-button" title="Use season folders">
-                        <input type="checkbox" class="x-season-folder"/>
-                        <div class="btn btn-primary btn-icon-only">
-                            <i class="icon-folder-close"></i>
+                        <div class="form-group col-md-4">
+                            <label>Path</label>
+                            {{> RootFolderSelectionPartial rootFolders}}
                         </div>
-                    </label>
+                    {{/unless}}
+                    <div class="form-group col-md-2">
+                        <label>Starting Season</label>
+                        {{> StartingSeasonSelectionPartial seasons}}
+                    </div>
+                    <div class="form-group col-md-2">
+                        <label>Quality Profile</label>
+                        {{> QualityProfileSelectionPartial qualityProfiles}}
+                    </div>
+                    <div class="form-group col-md-2">
+                        <label>Season Folders</label>
 
-                    <span class="btn btn-success x-add add-series pull-right"> Add
-                        <i class="icon-plus"></i>
-                    </span>
-                    {{/if}}
-                </form>
+                        <div class="input-group">
+                            <label class="checkbox toggle well">
+                                <input type="checkbox" class="x-season-folder"/>
+                                <p>
+                                    <span>Yes</span>
+                                    <span>No</span>
+                                </p>
+                                <div class="btn btn-primary slide-button"/>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="form-group col-md-1 pull-right">
+                        <label>&nbsp;</label>
+                        <button class="btn btn-success x-add add-series pull-right pull-none-xs"> Add
+                            <i class="icon-plus"></i>
+                        </button>
+                    </div>
+
+                {{else}}
+                    <div class="col-md-1 col-md-offset-11">
+                        <button class="btn add-series disabled pull-right pull-none-xs">
+                            Already Exists
+                        </button>
+                    </div>
+
+                {{/unless}}
             </div>
         </div>
     </div>

src/UI/AddSeries/addSeries.less

@@ -2,20 +2,11 @@
 @import "../Shared/Styles/clickable.less";
 
 #add-series-screen {
-
-  .operations-row {
-    margin-left : 0px;
-  }
-
   .existing-series {
 
     .card();
     margin : 30px 0px;
 
-    .add-series-search {
-      width : 970px;
-    }
-
     .unmapped-folder-path {
       padding: 20px;
       margin-left : 0px;
@@ -42,17 +33,6 @@
   .add-series-search {
     margin-top    : 20px;
     margin-bottom : 20px;
-    padding-left  : 20px;
-
-    *[class*='icon-'] {
-      font-size   : 28px;
-      height      : 30px;
-      width       : 40px;
-      padding-top : 14px;
-    }
-    input {
-      height : 50px;
-    }
   }
 
   .search-item {
@@ -101,12 +81,8 @@
     }
 
     .checkbox {
-      width         : 100px;
-      margin-left   : 0px;
-      display       : inline-block;
-      padding-top   : 0px;
-      margin-bottom : 0px;
-    }
+          margin-top : 0px;
+        }
 
     .starting-season {
       width: 140px;
@@ -116,9 +92,9 @@
       }
     }
 
-    .labels {
-      [class*="span"] {
-        margin-left: 3px;
+    i {
+      &:before {
+        color: #ffffff;
       }
     }
   }
@@ -147,16 +123,6 @@ li.add-new:hover {
   background-color: rgb(0, 129, 194);
 }
 
-.btn-group {
-  .dropdown-menu {
-    right: 0px;
-  }
-
-  .add-series-import-btn {
-    width: 93.3%;
-  }
-}
-
 .root-folders-modal {
   overflow: visible;