Bootstrap 3

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

Gruntfile.js

@@ -27,7 +27,7 @@ module.exports = function (grunt) {
             },
 
             bootstrap: {
-                src : srcContent + 'Bootstrap/bootstrap.less',
+                src : srcContent + 'bootstrap.less',
                 dest: destContent + 'bootstrap.css'
             },
             general  : {
@@ -118,7 +118,7 @@ module.exports = function (grunt) {
         requirejs: {
             compile:{
                 options: {
-                    mainConfigFile: "src/UI/app.js",
+                    mainConfigFile: 'src/UI/app.js',
                     fileExclusionRegExp: /^.*\.(?!js$)[^.]+$/,
                     preserveLicenseComments: false,
                     dir: outputDir,
@@ -139,11 +139,11 @@ module.exports = function (grunt) {
                 nospawn: false
             },
             bootstrap  : {
-                files: [ srcContent + 'Bootstrap/**', srcContent + 'FontAwesome/**'],
+                files: [ srcContent + 'Bootstrap/**', srcContent + 'FontAwesome/**', srcContent + 'bootstrap.less'],
                 tasks: ['less:bootstrap','less:general']
             },
             generalLess: {
-                files: [ srcRoot + '**/*.less', '!**/Bootstrap/**', '!**/FontAwesome/**'],
+                files: [ srcRoot + '**/*.less', '!**/Bootstrap/**', '!**/FontAwesome/**', '!' + srcContent + '/bootstrap.less'],
                 tasks: ['less:general']
             },
             handlebars : {

src/NzbDrone.Api/Frontend/Mappers/FaviconMapper.cs

@@ -0,0 +1,30 @@
+using System.IO;
+using NLog;
+using NzbDrone.Common.Disk;
+using NzbDrone.Common.EnvironmentInfo;
+
+namespace NzbDrone.Api.Frontend.Mappers
+{
+    public class FaviconMapper : StaticResourceMapperBase
+    {
+        private readonly IAppFolderInfo _appFolderInfo;
+
+        public FaviconMapper(IAppFolderInfo appFolderInfo, IDiskProvider diskProvider, Logger logger)
+            : base(diskProvider, logger)
+        {
+            _appFolderInfo = appFolderInfo;
+        }
+
+        protected override string Map(string resourceUrl)
+        {
+            var path = Path.Combine("Content", "Images", "favicon.ico");
+
+            return Path.Combine(_appFolderInfo.StartUpFolder, "UI", path);
+        }
+
+        public override bool CanHandle(string resourceUrl)
+        {
+            return resourceUrl.Equals("/favicon.ico");
+        }
+    }
+}

src/NzbDrone.Api/Frontend/Mappers/StaticResourceMapper.cs

@@ -1,6 +1,5 @@
 using System.IO;
 using NLog;
-using NzbDrone.Common;
 using NzbDrone.Common.Disk;
 using NzbDrone.Common.EnvironmentInfo;
 
@@ -29,7 +28,7 @@ namespace NzbDrone.Api.Frontend.Mappers
             return resourceUrl.StartsWith("/Content") ||
                    resourceUrl.EndsWith(".js") ||
                    resourceUrl.EndsWith(".css") ||
-                   resourceUrl.EndsWith(".ico") ||
+                   (resourceUrl.EndsWith(".ico") && !resourceUrl.Equals("/favicon.ico")) ||
                    resourceUrl.EndsWith(".swf");
         }
     }

src/NzbDrone.Api/NzbDrone.Api.csproj

@@ -128,6 +128,7 @@
     <Compile Include="Extensions\NancyJsonSerializer.cs" />
     <Compile Include="Extensions\RequestExtensions.cs" />
     <Compile Include="Frontend\IsCacheableSpecification.cs" />
+    <Compile Include="Frontend\Mappers\FaviconMapper.cs" />
     <Compile Include="Frontend\Mappers\IndexHtmlMapper.cs" />
     <Compile Include="Frontend\Mappers\LogFileMapper.cs" />
     <Compile Include="Frontend\Mappers\MediaCoverMapper.cs" />

src/NzbDrone.Automation.Test/PageModel/PageBase.cs

@@ -13,6 +13,7 @@ namespace NzbDrone.Automation.Test.PageModel
         public PageBase(RemoteWebDriver driver)
         {
             _driver = driver;
+            driver.Manage().Window.Maximize();
         }
 
         public IWebElement FindByClass(string className, int timeout = 5)
@@ -52,7 +53,7 @@ namespace NzbDrone.Automation.Test.PageModel
         {
             get
             {
-                return Find(By.LinkText("Series"));
+                return FindByClass("x-series-nav");
             }
         }
 
@@ -60,7 +61,7 @@ namespace NzbDrone.Automation.Test.PageModel
         {
             get
             {
-                return Find(By.LinkText("Calendar"));
+                return FindByClass("x-calendar-nav");
             }
         }
 
@@ -68,7 +69,7 @@ namespace NzbDrone.Automation.Test.PageModel
         {
             get
             {
-                return Find(By.LinkText("History"));
+                return FindByClass("x-history-nav");
             }
         }
 
@@ -76,7 +77,7 @@ namespace NzbDrone.Automation.Test.PageModel
         {
             get
             {
-                return Find(By.LinkText("Wanted"));
+                return FindByClass("x-wanted-nav");
             }
         }
 
@@ -84,7 +85,7 @@ namespace NzbDrone.Automation.Test.PageModel
         {
             get
             {
-                return Find(By.LinkText("Settings"));
+                return FindByClass("x-settings-nav");
             }
         }
 
@@ -92,7 +93,7 @@ namespace NzbDrone.Automation.Test.PageModel
         {
             get
             {
-                return Find(By.PartialLinkText("System"));
+                return FindByClass("x-system-nav");
             }
         }
 

src/NzbDrone.Core/NzbDrone.Core.csproj

@@ -194,6 +194,7 @@
     <Compile Include="Datastore\Migration\046_fix_nzb_su_url.cs" />
     <Compile Include="Datastore\Migration\047_add_published_date_blacklist_column.cs" />
     <Compile Include="Datastore\Migration\048_add_title_to_scenemappings.cs" />
+    <Compile Include="Datastore\Migration\049_fix_dognzb_url.cs" />
     <Compile Include="Datastore\Migration\Framework\MigrationContext.cs" />
     <Compile Include="Datastore\Migration\Framework\MigrationController.cs" />
     <Compile Include="Datastore\Migration\Framework\MigrationExtension.cs" />

src/UI/AddSeries/AddSeriesLayoutTemplate.html

@@ -1,23 +1,17 @@
-<div class="row operations-row">
+<div class="row">
-    <div class="btn-group btn-block">
+    <div class="col-md-12">
-        <div class="btn btn-lg add-series-import-btn x-import">
+        <div class="btn-group add-series-btn-group btn-group-lg btn-block">
-            <i class="icon-hdd"/>
+            <button type="button" class="btn btn-default col-md-10 col-xs-8 add-series-import-btn x-import">
-            Import existing series on disk
+                <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="unmapped-folder-path">
-    <div class="col-md-11">
+    <div class="col-md-12">
         {{folder.path}}
     </div>
 </div>{{/if}}
-<div class="row x-search-bar">
+<div class="x-search-bar">
-    <div class="input-group nz-input-large add-series-search col-md-11">
+    <div class="input-group input-group-lg add-series-search">
-        <i class="input-group-addon icon-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">
+                <input class="col-md-9 form-control" type="text" validation-name="path" placeholder="Enter path to folder that contains your shows">
-                <button class="btn btn-success x-add">
+                <span class="input-group-btn ">
-                    <i class="icon-ok"/>
+                    <button class="btn btn-success x-add">
-                </button>
+                        <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 form-control x-root-folder" validation-name="RootFolderPath">
-    <select class="col-md-4 x-root-folder" validation-name="RootFolderPath">
+    {{#if this}}
-        {{#if this}}
+    {{#each this}}
-        {{#each this}}
+    <option value="{{id}}">{{path}}</option>
-        <option value="{{id}}">{{path}}</option>
+    {{/each}}
-        {{/each}}
+    {{else}}
-        {{else}}
+    <option value="">Select Path</option>
-        <option value="">Select Path</option>
+    {{/if}}
-        {{/if}}
+    <option value="addNew">Add a different path</option>
-        <option value="addNew">Add a different path</option>
+</select>
-    </select>
+
-</div>

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">
+                {{#unless existing}}
-                    {{#if existing}}
-                    <div class="btn add-series disabled pull-right">
-                        Already Exists
-                    </div>
-                    {{else}}
                     {{#unless path}}
-                    {{> RootFolderSelectionPartial rootFolders}}
+                        <div class="form-group col-md-4">
-                    {{/unless}}
+                            <label>Path</label>
-
+                            {{> RootFolderSelectionPartial rootFolders}}
-                    {{> 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>
-                    </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
+                        <div class="input-group">
-                        <i class="icon-plus"></i>
+                            <label class="checkbox toggle well">
-                    </span>
+                                <input type="checkbox" class="x-season-folder"/>
-                    {{/if}}
+                                <p>
-                </form>
+                                    <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-top : 0px;
-      margin-left   : 0px;
+        }
-      display       : inline-block;
-      padding-top   : 0px;
-      margin-bottom : 0px;
-    }
 
     .starting-season {
       width: 140px;
@@ -116,9 +92,9 @@
       }
     }
 
-    .labels {
+    i {
-      [class*="span"] {
+      &:before {
-        margin-left: 3px;
+        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;
 

src/UI/Calendar/CalendarFeedViewTemplate.html

@@ -1,29 +1,33 @@
-<div class="modal-header">
+<div class="modal-dialog">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <div class="modal-content">
-    <h3>NzbDrone Calendar feed</h3>
+        <div class="modal-header">
-</div>
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-<div class="modal-body edit-series-modal">
+            <h3>NzbDrone Calendar feed</h3>
-    <div class="row">
+        </div>
-        <div>
+        <div class="modal-body edit-series-modal">
-            <div class="form-horizontal">
+            <div class="row">
-                <div class="form-group">
+                <div>
-                    <label class="control-label">iCal feed</label>
+                    <div class="form-horizontal">
+                        <div class="form-group">
+                            <label class="control-label">iCal feed</label>
 
-                    <div class="controls ical-url">
+                            <div class="controls ical-url">
-                        <div class="input-group">
+                                <div class="input-group">
-                            <input type="text" class="x-ical-url" value="{{icalHttpUrl}}" readonly="readonly" />
+                                    <input type="text" class="x-ical-url" value="{{icalHttpUrl}}" readonly="readonly" />
-                            <button class="btn btn-icon-only x-ical-copy" title="Copy to clipboard"><i class="icon-copy"></i></button>
+                                    <button class="btn btn-icon-only x-ical-copy" title="Copy to clipboard"><i class="icon-copy"></i></button>
-                            <a class="btn btn-icon-only no-router" title="Subscribe" href="{{icalWebCalUrl}}" target="_blank"><i class="icon-calendar-empty"></i></a>
+                                    <a class="btn btn-icon-only no-router" title="Subscribe" href="{{icalWebCalUrl}}" target="_blank"><i class="icon-calendar-empty"></i></a>
+                                </div>
+                                <span class="help-inline">
+                                    <i class="icon-nd-form-info" title="Copy this url into your clients subscription form or use the subscribe button if your browser support webcal"/>
+                                </span>
+                            </div>
                         </div>
-                        <span class="help-inline">
-                            <i class="icon-nd-form-info" title="Copy this url into your clients subscription form or use the subscribe button if your browser support webcal"/>
-                        </span>
                     </div>
                 </div>
             </div>
         </div>
+        <div class="modal-footer">
+            <button class="btn" data-dismiss="modal">close</button>
+        </div>
     </div>
 </div>
-<div class="modal-footer">
-    <button class="btn" data-dismiss="modal">close</button>
-</div>

src/UI/Calendar/CalendarLayoutTemplate.html

@@ -1,5 +1,5 @@
 <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3 hidden-xs">
         <div class="pull-left">
             <h4>Upcoming</h4>
         </div>
@@ -10,7 +10,7 @@
         </div>
         <div id="x-upcoming"/>
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9 col-xs-12">
         <div id="x-calendar" class="calendar"/>
         <div class="legend calendar">
             <ul class='legend-labels'>

src/UI/Calendar/CalendarView.js

@@ -2,6 +2,7 @@
 
 define(
     [
+        'jquery',
         'vent',
         'marionette',
         'moment',
@@ -12,7 +13,7 @@ define(
         'Mixins/backbone.signalr.mixin',
         'fullcalendar',
         'jquery.easypiechart'
-    ], function (vent, Marionette, moment, CalendarCollection, StatusModel, QueueCollection, Config) {
+    ], function ($, vent, Marionette, moment, CalendarCollection, StatusModel, QueueCollection, Config) {
 
         return Marionette.ItemView.extend({
             storageKey: 'calendar.view',
@@ -24,28 +25,7 @@ define(
             },
 
             render    : function () {
-                this.$el.empty().fullCalendar({
+                this.$el.empty().fullCalendar(this._getOptions());
-                    defaultView   : Config.getValue(this.storageKey, 'basicWeek'),
-                    allDayDefault : false,
-                    ignoreTimezone: false,
-                    weekMode      : 'variable',
-                    firstDay      : StatusModel.get('startOfWeek'),
-                    timeFormat    : 'h(:mm)tt',
-                    header        : {
-                        left  : 'prev,next today',
-                        center: 'title',
-                        right : 'month,basicWeek,basicDay'
-                    },
-                    buttonText    : {
-                        prev: '<i class="icon-arrow-left"></i>',
-                        next: '<i class="icon-arrow-right"></i>'
-                    },
-                    viewRender    : this._viewRender.bind(this),
-                    eventRender   : this._eventRender.bind(this),
-                    eventClick    : function (event) {
-                        vent.trigger(vent.Commands.ShowEpisodeDetails, {episode: event.model});
-                    }
-                });
             },
 
             onShow: function () {
@@ -178,6 +158,59 @@ define(
                 }
 
                 return downloading.get('title');
+            },
+
+            _getOptions: function () {
+                var options = {
+                    allDayDefault : false,
+                    ignoreTimezone: false,
+                    weekMode      : 'variable',
+                    firstDay      : StatusModel.get('startOfWeek'),
+                    timeFormat    : 'h(:mm)tt',
+                    buttonText    : {
+                        prev: '<i class="icon-arrow-left"></i>',
+                        next: '<i class="icon-arrow-right"></i>'
+                    },
+                    viewRender    : this._viewRender.bind(this),
+                    eventRender   : this._eventRender.bind(this),
+                    eventClick    : function (event) {
+                        vent.trigger(vent.Commands.ShowEpisodeDetails, {episode: event.model});
+                    }
+                };
+
+                if ($(window).width() < 768) {
+                    options.defaultView = Config.getValue(this.storageKey, 'basicDay');
+
+                    options.titleFormat = {
+                        month: 'MMM yyyy',                             // September 2009
+                        week: 'MMM d[ yyyy]{ \'&#8212;\'[ MMM] d yyyy}', // Sep 7 - 13 2009
+                        day: 'ddd, MMM d, yyyy'                  // Tuesday, Sep 8, 2009
+                    };
+
+                    options.header = {
+                        left  : 'prev,next today',
+                        center: 'title',
+                        right : 'basicWeek,basicDay'
+                    };
+                }
+
+                else {
+                    options.defaultView = Config.getValue(this.storageKey, 'basicWeek');
+
+                    options.titleFormat = {
+                        month: 'MMM yyyy',                             // September 2009
+                        week: 'MMM d[ yyyy]{ \'&#8212;\'[ MMM] d yyyy}', // Sep 7 - 13 2009
+                        day: 'dddd, MMM d, yyyy'                  // Tues, Sep 8, 2009
+                    };
+
+                    options.header = {
+                        left  : 'prev,next today',
+                        center: 'title',
+                        right : 'month,basicWeek,basicDay'
+                    };
+                }
+
+                return options;
             }
         });
     });

src/UI/Cells/EpisodeActionsCellTemplate.html

@@ -1,4 +1,4 @@
-<div class="btn-group">
+<div class="btn-group hidden-xs">
     <button class="btn btn-xs x-automatic-search x-automatic-search-icon" title="Automatic Search" data-container="body"><i class="icon-search"></i></button>
     <button class="btn btn-xs dropdown-toggle" data-toggle="dropdown">
         <span class="caret"></span>
@@ -8,3 +8,7 @@
         <li class="x-manual-search">Manual Search</li>
     </ul>
 </div>
+
+<div class="visible-xs">
+    <button class="btn btn-xs x-automatic-search x-automatic-search-icon" title="Automatic Search" data-container="body"><i class="icon-search"></i></button>
+</div>

src/UI/Cells/SeriesActionsCell.js

@@ -18,8 +18,8 @@ define(
                 this.$el.empty();
 
                 this.$el.html(
-                    '<i class="icon-cog x-edit-series" title="" data-original-title="Edit Series"></i> ' +
+                    '<i class="icon-nd-edit x-edit-series" title="" data-original-title="Edit Series"></i> ' +
-                    '<i class="icon-remove x-remove-series" title="" data-original-title="Delete Series"></i>'
+                    '<i class="icon-remove x-remove-series hidden-xs" title="" data-original-title="Delete Series"></i>'
                 );
 
                 this.delegateEvents();

src/UI/Cells/cells.less

@@ -16,6 +16,10 @@
 .episode-title-cell {
   .btn-link;
   .text-overflow();
+
+  &:hover {
+    text-transform: none;
+  }
 }
 
 .air-date-cell {
@@ -88,7 +92,7 @@ td.episode-status-cell, td.quality-cell {
 }
 
 .episode-actions-cell {
-  width: 50px;
+  width: 65px;
 
   li {
     .clickable();
@@ -110,12 +114,13 @@ td.episode-status-cell, td.quality-cell {
 }
 
 .series-actions-cell {
-  width: 56px;
+  width     : 56px;
+  min-width : 56px;
 }
 
 .timeleft-cell {
-  cursor: default;
+  cursor : default;
-  width: 80px;
+  width  : 80px;
 }
 
 .queue-status-cell {

src/UI/Content/Backgrid/paginator.less

@@ -17,6 +17,10 @@
     font-size  : 13px;
     position   : absolute;
     right      : 0;
+
+    .label {
+      margin-top: 5px;
+    }
   }
 
   ul {

src/UI/Content/Messenger/messenger.css

@@ -4,93 +4,98 @@ ul.messenger {
   padding: 0;
 }
 /* line 8, ../../src/sass/messenger.sass */
-ul.messenger li {
+ul.messenger > li {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 /* line 14, ../../src/sass/messenger.sass */
+ul.messenger.messenger-empty {
+  display: none;
+}
+/* line 17, ../../src/sass/messenger.sass */
 ul.messenger .messenger-message {
   overflow: hidden;
   *zoom: 1;
 }
-/* line 17, ../../src/sass/messenger.sass */
+/* line 20, ../../src/sass/messenger.sass */
 ul.messenger .messenger-message.messenger-hidden {
   display: none;
 }
-/* line 20, ../../src/sass/messenger.sass */
+/* line 23, ../../src/sass/messenger.sass */
 ul.messenger .messenger-message .messenger-phrase, ul.messenger .messenger-message .messenger-actions a {
   padding-right: 5px;
 }
-/* line 23, ../../src/sass/messenger.sass */
+/* line 26, ../../src/sass/messenger.sass */
 ul.messenger .messenger-message .messenger-actions {
   float: right;
 }
-/* line 26, ../../src/sass/messenger.sass */
+/* line 29, ../../src/sass/messenger.sass */
 ul.messenger .messenger-message .messenger-actions a {
   cursor: pointer;
   text-decoration: underline;
 }
-/* line 30, ../../src/sass/messenger.sass */
+/* line 33, ../../src/sass/messenger.sass */
+ul.messenger .messenger-message ul, ul.messenger .messenger-message ol {
+  margin: 10px 18px 0;
+}
+/* line 36, ../../src/sass/messenger.sass */
 ul.messenger.messenger-fixed {
   position: fixed;
   z-index: 10000;
 }
-/* line 34, ../../src/sass/messenger.sass */
+/* line 40, ../../src/sass/messenger.sass */
 ul.messenger.messenger-fixed .messenger-message {
   min-width: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
-/* line 39, ../../src/sass/messenger.sass */
+/* line 45, ../../src/sass/messenger.sass */
 ul.messenger.messenger-fixed .message .messenger-actions {
   float: left;
 }
-/* line 42, ../../src/sass/messenger.sass */
+/* line 48, ../../src/sass/messenger.sass */
 ul.messenger.messenger-fixed.messenger-on-top {
   top: 20px;
 }
-/* line 45, ../../src/sass/messenger.sass */
+/* line 51, ../../src/sass/messenger.sass */
 ul.messenger.messenger-fixed.messenger-on-bottom {
   bottom: 20px;
 }
-/* line 48, ../../src/sass/messenger.sass */
+/* line 54, ../../src/sass/messenger.sass */
 ul.messenger.messenger-fixed.messenger-on-top, ul.messenger.messenger-fixed.messenger-on-bottom {
   left: 50%;
   width: 800px;
   margin-left: -400px;
 }
 @media (max-width: 960px) {
-  /* line 48, ../../src/sass/messenger.sass */
+  /* line 54, ../../src/sass/messenger.sass */
   ul.messenger.messenger-fixed.messenger-on-top, ul.messenger.messenger-fixed.messenger-on-bottom {
     left: 10%;
     width: 80%;
     margin-left: 0px;
   }
 }
-/* line 58, ../../src/sass/messenger.sass */
+/* line 64, ../../src/sass/messenger.sass */
 ul.messenger.messenger-fixed.messenger-on-top.messenger-on-right, ul.messenger.messenger-fixed.messenger-on-bottom.messenger-on-right {
   right: 20px;
   left: auto;
 }
-/* line 62, ../../src/sass/messenger.sass */
+/* line 68, ../../src/sass/messenger.sass */
 ul.messenger.messenger-fixed.messenger-on-top.messenger-on-left, ul.messenger.messenger-fixed.messenger-on-bottom.messenger-on-left {
   left: 20px;
   margin-left: 0px;
 }
-/* line 66, ../../src/sass/messenger.sass */
+/* line 72, ../../src/sass/messenger.sass */
 ul.messenger.messenger-fixed.messenger-on-right, ul.messenger.messenger-fixed.messenger-on-left {
-    width: auto;
+  width: 350px;
-    min-width: 350px;
-    max-width: 800px;
-    word-wrap: break-word;
 }
-/* line 69, ../../src/sass/messenger.sass */
+/* line 75, ../../src/sass/messenger.sass */
 ul.messenger.messenger-fixed.messenger-on-right .messenger-actions, ul.messenger.messenger-fixed.messenger-on-left .messenger-actions {
   float: left;
 }
-/* line 72, ../../src/sass/messenger.sass */
+/* line 78, ../../src/sass/messenger.sass */
 ul.messenger .messenger-spinner {
   display: none;
 }

src/UI/Content/Messenger/messenger.flat.css

@@ -234,33 +234,28 @@ ul.messenger.messenger-spinner-active .messenger-spinner .messenger-spinner {
   transform-origin: 100% 50%;
 }
 
-/* line 15, ../../src/sass/messenger-theme-future.sass */
+/* line 15, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future {
+ul.messenger-theme-flat {
-  -webkit-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.24), 0px 1px 5px rgba(0, 0, 0, 0.6);
-  -moz-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.24), 0px 1px 5px rgba(0, 0, 0, 0.6);
-  box-shadow: inset 0px 1px rgba(255, 255, 255, 0.24), 0px 1px 5px rgba(0, 0, 0, 0.6);
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5c5b5b), color-stop(100%, #353535));
+  -moz-user-select: none;
-  background-image: -webkit-linear-gradient(#5c5b5b, #353535);
+  -webkit-user-select: none;
-  background-image: -moz-linear-gradient(#5c5b5b, #353535);
+  -o-user-select: none;
-  background-image: -o-linear-gradient(#5c5b5b, #353535);
+  user-select: none;
-  background-image: linear-gradient(#5c5b5b, #353535);
+  background: #404040;
-  background-color: #5c5b5b;
-  border: 1px solid rgba(0, 0, 0, 0.5);
 }
-/* line 24, ../../src/sass/messenger-theme-future.sass */
+/* line 20, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future.messenger-empty {
+ul.messenger-theme-flat.messenger-empty {
   display: none;
 }
-/* line 27, ../../src/sass/messenger-theme-future.sass */
+/* line 23, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-message {
+ul.messenger-theme-flat .messenger-message {
-  -webkit-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 0px -1px rgba(0, 0, 0, 0.23), inset 48px 0px 0px rgba(0, 0, 0, 0.3), inset 46px 0px 0px rgba(255, 255, 255, 0.07);
+  -webkit-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
-  -moz-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 0px -1px rgba(0, 0, 0, 0.23), inset 48px 0px 0px rgba(0, 0, 0, 0.3), inset 46px 0px 0px rgba(255, 255, 255, 0.07);
+  -moz-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
-  box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 0px -1px rgba(0, 0, 0, 0.23), inset 48px 0px 0px rgba(0, 0, 0, 0.3), inset 46px 0px 0px rgba(255, 255, 255, 0.07);
+  box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   -ms-border-radius: 0px;
@@ -272,17 +267,15 @@ ul.messenger-theme-future .messenger-message {
   font-size: 13px;
   background: transparent;
   color: #f0f0f0;
-  text-shadow: 0px 1px #111111;
   font-weight: 500;
   padding: 10px 30px 13px 65px;
 }
-/* line 40, ../../src/sass/messenger-theme-future.sass */
+/* line 35, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-message .close {
+ul.messenger-theme-flat .messenger-message .messenger-close {
   position: absolute;
   top: 0px;
   right: 0px;
   color: #888888;
-  text-shadow: 0px 1px black;
   opacity: 1;
   font-weight: bold;
   display: block;
@@ -294,62 +287,51 @@ ul.messenger-theme-future .messenger-message .close {
   border: 0;
   -webkit-appearance: none;
 }
-/* line 57, ../../src/sass/messenger-theme-future.sass */
+/* line 51, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-message .close:hover {
+ul.messenger-theme-flat .messenger-message .messenger-close:hover {
   color: #bbbbbb;
 }
-/* line 60, ../../src/sass/messenger-theme-future.sass */
+/* line 54, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-message .close:active {
+ul.messenger-theme-flat .messenger-message .messenger-close:active {
   color: #777777;
 }
-/* line 63, ../../src/sass/messenger-theme-future.sass */
+/* line 57, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-message .messenger-actions {
+ul.messenger-theme-flat .messenger-message .messenger-actions {
   float: none;
   margin-top: 10px;
 }
-/* line 67, ../../src/sass/messenger-theme-future.sass */
+/* line 61, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-message .messenger-actions a {
+ul.messenger-theme-flat .messenger-message .messenger-actions a {
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 1px rgba(255, 255, 255, 0.1);
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 1px rgba(255, 255, 255, 0.1);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 1px rgba(255, 255, 255, 0.1);
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   text-decoration: none;
+  color: #aaaaaa;
+  background: #2e2e2e;
   display: inline-block;
   padding: 10px;
-  color: #aaaaaa;
-  text-shadow: 0px 1px #222222;
   margin-right: 10px;
-  padding: 3px 10px 5px;
+  padding: 4px 11px 6px;
   text-transform: capitalize;
 }
-/* line 79, ../../src/sass/messenger-theme-future.sass */
+/* line 72, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-message .messenger-actions a:hover {
+ul.messenger-theme-flat .messenger-message .messenger-actions a:hover {
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 1px rgba(255, 255, 255, 0.2);
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 1px rgba(255, 255, 255, 0.2);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 1px rgba(255, 255, 255, 0.2);
   color: #f0f0f0;
+  background: #2e2e2e;
 }
-/* line 83, ../../src/sass/messenger-theme-future.sass */
+/* line 76, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-message .messenger-actions a:active {
+ul.messenger-theme-flat .messenger-message .messenger-actions a:active {
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.28), inset 0px 1px rgba(0, 0, 0, 0.1);
+  background: #292929;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.28), inset 0px 1px rgba(0, 0, 0, 0.1);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.28), inset 0px 1px rgba(0, 0, 0, 0.1);
-  background: rgba(0, 0, 0, 0.04);
   color: #aaaaaa;
 }
-/* line 88, ../../src/sass/messenger-theme-future.sass */
+/* line 80, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-message .messenger-actions .messenger-phrase {
+ul.messenger-theme-flat .messenger-message .messenger-actions .messenger-phrase {
   display: none;
 }
-/* line 91, ../../src/sass/messenger-theme-future.sass */
+/* line 83, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-message .messenger-message-inner:before {
+ul.messenger-theme-flat .messenger-message .messenger-message-inner:before {
-  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
@@ -365,23 +347,26 @@ ul.messenger-theme-future .messenger-message .messenger-message-inner:before {
   width: 13px;
   z-index: 20;
 }
-/* line 105, ../../src/sass/messenger-theme-future.sass */
+/* line 95, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-message.alert-success .messenger-message-inner:before {
+ul.messenger-theme-flat .messenger-message.alert-success .messenger-message-inner:before {
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5fca4a), color-stop(100%, #098d38));
+  background: #5fca4a;
-  background-image: -webkit-linear-gradient(top, #5fca4a, #098d38);
+}
-  background-image: -moz-linear-gradient(top, #5fca4a, #098d38);
+/* line 98, ../../src/sass/messenger-theme-flat.sass */
-  background-image: -o-linear-gradient(top, #5fca4a, #098d38);
+ul.messenger-theme-flat .messenger-message.alert-info .messenger-message-inner:before {
-  background-image: linear-gradient(top, #5fca4a, #098d38);
+  background: #61c4b8;
-  background-color: #5fca4a;
+}
+/* line 103, ../../src/sass/messenger-theme-flat.sass */
+ul.messenger-theme-flat .messenger-message.alert-error .messenger-message-inner:before {
+  background: #dd6a45;
 }
 /* line 32, ../../src/sass/messenger-spinner.scss */
-ul.messenger-theme-future .messenger-message.alert-error.messenger-retry-soon .messenger-spinner {
+ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-soon .messenger-spinner {
   width: 32px;
   height: 32px;
   background: transparent;
 }
 /* line 37, ../../src/sass/messenger-spinner.scss */
-ul.messenger-theme-future .messenger-message.alert-error.messenger-retry-soon .messenger-spinner .messenger-spinner-side .messenger-spinner-fill {
+ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-soon .messenger-spinner .messenger-spinner-side .messenger-spinner-fill {
   background: #dd6a45;
   -webkit-animation-duration: 20s;
   -moz-animation-duration: 20s;
@@ -391,9 +376,9 @@ ul.messenger-theme-future .messenger-message.alert-error.messenger-retry-soon .m
   opacity: 1;
 }
 /* line 45, ../../src/sass/messenger-spinner.scss */
-ul.messenger-theme-future .messenger-message.alert-error.messenger-retry-soon .messenger-spinner:after {
+ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-soon .messenger-spinner:after {
   content: "";
-  background: #333333;
+  background: #292929;
   position: absolute;
   width: 26px;
   height: 26px;
@@ -403,13 +388,13 @@ ul.messenger-theme-future .messenger-message.alert-error.messenger-retry-soon .m
   display: block;
 }
 /* line 32, ../../src/sass/messenger-spinner.scss */
-ul.messenger-theme-future .messenger-message.alert-error.messenger-retry-later .messenger-spinner {
+ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-later .messenger-spinner {
   width: 32px;
   height: 32px;
   background: transparent;
 }
 /* line 37, ../../src/sass/messenger-spinner.scss */
-ul.messenger-theme-future .messenger-message.alert-error.messenger-retry-later .messenger-spinner .messenger-spinner-side .messenger-spinner-fill {
+ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-later .messenger-spinner .messenger-spinner-side .messenger-spinner-fill {
   background: #dd6a45;
   -webkit-animation-duration: 600s;
   -moz-animation-duration: 600s;
@@ -419,9 +404,9 @@ ul.messenger-theme-future .messenger-message.alert-error.messenger-retry-later .
   opacity: 1;
 }
 /* line 45, ../../src/sass/messenger-spinner.scss */
-ul.messenger-theme-future .messenger-message.alert-error.messenger-retry-later .messenger-spinner:after {
+ul.messenger-theme-flat .messenger-message.alert-error.messenger-retry-later .messenger-spinner:after {
   content: "";
-  background: #333333;
+  background: #292929;
   position: absolute;
   width: 26px;
   height: 26px;
@@ -430,56 +415,41 @@ ul.messenger-theme-future .messenger-message.alert-error.messenger-retry-later .
   left: 3px;
   display: block;
 }
-/* line 116, ../../src/sass/messenger-theme-future.sass */
+/* line 114, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-message.alert-error .messenger-message-inner:before {
+ul.messenger-theme-flat .messenger-message-slot.messenger-last .messenger-message {
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dd6a45), color-stop(100%, #91361a));
-  background-image: -webkit-linear-gradient(top, #dd6a45, #91361a);
-  background-image: -moz-linear-gradient(top, #dd6a45, #91361a);
-  background-image: -o-linear-gradient(top, #dd6a45, #91361a);
-  background-image: linear-gradient(top, #dd6a45, #91361a);
-  background-color: #dd6a45;
-}
-/* line 121, ../../src/sass/messenger-theme-future.sass */
-ul.messenger-theme-future .messenger-message.alert-info .messenger-message-inner:before {
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #61c4b8), color-stop(100%, #1992a3));
-  background-image: -webkit-linear-gradient(top, #61c4b8, #1992a3);
-  background-image: -moz-linear-gradient(top, #61c4b8, #1992a3);
-  background-image: -o-linear-gradient(top, #61c4b8, #1992a3);
-  background-image: linear-gradient(top, #61c4b8, #1992a3);
-  background-color: #61c4b8;
-}
-/* line 127, ../../src/sass/messenger-theme-future.sass */
-ul.messenger-theme-future .messenger-message-slot.last .messenger-message {
   -webkit-border-radius: 4px 4px 0px 0px;
   -moz-border-radius: 4px 4px 0px 0px;
   -ms-border-radius: 4px 4px 0px 0px;
   -o-border-radius: 4px 4px 0px 0px;
   border-radius: 4px 4px 0px 0px;
+  -webkit-box-shadow: inset 48px 0px 0px #292929;
+  -moz-box-shadow: inset 48px 0px 0px #292929;
+  box-shadow: inset 48px 0px 0px #292929;
 }
-/* line 130, ../../src/sass/messenger-theme-future.sass */
+/* line 118, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-message-slot.first .messenger-message {
+ul.messenger-theme-flat .messenger-message-slot.messenger-first .messenger-message {
   -webkit-border-radius: 0px 0px 4px 4px;
   -moz-border-radius: 0px 0px 4px 4px;
   -ms-border-radius: 0px 0px 4px 4px;
   -o-border-radius: 0px 0px 4px 4px;
   border-radius: 0px 0px 4px 4px;
-  -webkit-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px rgba(0, 0, 0, 0.3), inset 46px 0px 0px rgba(255, 255, 255, 0.07);
+  -webkit-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
-  -moz-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px rgba(0, 0, 0, 0.3), inset 46px 0px 0px rgba(255, 255, 255, 0.07);
+  -moz-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
-  box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px rgba(0, 0, 0, 0.3), inset 46px 0px 0px rgba(255, 255, 255, 0.07);
+  box-shadow: inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px #292929;
 }
-/* line 134, ../../src/sass/messenger-theme-future.sass */
+/* line 122, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-message-slot.first.last .messenger-message {
+ul.messenger-theme-flat .messenger-message-slot.messenger-first.messenger-last .messenger-message {
-  -webkit-box-shadow: inset 48px 0px 0px rgba(0, 0, 0, 0.3), inset 46px 0px 0px rgba(255, 255, 255, 0.07);
-  -moz-box-shadow: inset 48px 0px 0px rgba(0, 0, 0, 0.3), inset 46px 0px 0px rgba(255, 255, 255, 0.07);
-  box-shadow: inset 48px 0px 0px rgba(0, 0, 0, 0.3), inset 46px 0px 0px rgba(255, 255, 255, 0.07);
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
+  -webkit-box-shadow: inset 48px 0px 0px #292929;
+  -moz-box-shadow: inset 48px 0px 0px #292929;
+  box-shadow: inset 48px 0px 0px #292929;
 }
-/* line 138, ../../src/sass/messenger-theme-future.sass */
+/* line 126, ../../src/sass/messenger-theme-flat.sass */
-ul.messenger-theme-future .messenger-spinner {
+ul.messenger-theme-flat .messenger-spinner {
   display: block;
   position: absolute;
   left: 7px;

src/UI/Content/Overrides/bootstrap.less

@@ -1,48 +1,16 @@
 @import "../prefixer";
+@import "../Bootstrap/variables";
+@import "../variables";
+
+@input-border-focus: @droneTeal;
+@font-family-sans-serif:  "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+@modal-md: 800px;
+@modal-lg: 800px;
 
 .label, .badge, i {
   cursor : default;
 }
 
-.input-group {
-  .input-group-addon {
-    margin-left : 0;
-  }
-}
-
-.label, .badge, .btn {
-  .text-shadow(none);
-}
-
-.btn {
-
-  text-transform : capitalize;
-  min-width      : 80px;
-  padding        : 4px 12px;
-
-  &.btn-xs {
-    min-width : 0px;
-  }
-
-  &.btn-icon-only {
-    min-width : 41px;
-  }
-  
-  &.btn-icon-only-xs {
-    @media (max-width: @screen-xs-max) {
-      min-width : 41px;
-   
-      span {
-          .responsive-invisibility();
-      }
-    }
-  }
-  
-  label, input {
-    padding: 0px;
-  }
-}
-
 .slide-button {
   min-width : 0px;
 }
@@ -60,3 +28,47 @@
 .tooltip-inner {
   word-wrap: break-word;
 }
+
+.dropdown-submenu {
+  position:relative;
+  & > .dropdown-menu {
+    top:0;
+    left:100%;
+    margin-top:-6px;
+    margin-left:-1px;
+    -webkit-border-radius:0 6px 6px 6px;
+    -moz-border-radius:0 6px 6px 6px;
+    border-radius:0 6px 6px 6px;
+  }
+  & > a:after {
+    display:block;
+    content:" ";
+    float:right;
+    width:0;
+    height:0;
+    border-color:transparent;
+    border-style:solid;
+    border-width:5px 0 5px 5px;
+    border-left-color:#cccccc;
+    margin-top:5px;
+    margin-right:-10px;
+  }
+}
+.dropdown-submenu:hover {
+  & > .dropdown-menu {
+    display:block;
+  }
+  & > a:after {
+    border-left-color:#ffffff;
+  }
+}
+.dropdown-submenu.pull-left {
+  float:none;
+  & > .dropdown-menu {
+    left:-100%;
+    margin-left:10px;
+    -webkit-border-radius:6px 0 6px 6px;
+    -moz-border-radius:6px 0 6px 6px;
+    border-radius:6px 0 6px 6px;
+  }
+}

src/UI/Content/Overrides/bootstrap.toggle-switch.less

@@ -2,6 +2,9 @@
 @import "Bootstrap/mixins";
 
 .toggle {
+  height: 34px;
+  box-sizing: border-box;
+
   .slide-button {
     .button-variant(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
 

src/UI/Content/Overrides/fullcalendar.less

@@ -9,3 +9,13 @@
   white-space: nowrap;
   overflow: hidden;
 }
+
+@media (max-width: @screen-xs-max) {
+  .fc-button {
+    padding: 0px 5px;
+  }
+
+  .fc-header-space {
+    padding-left: 5px;
+  }
+}

src/UI/Content/Overrides/messenger.less

@@ -1,5 +1,23 @@
+@import "../variables";
+
 body.control-panel-visible {
   ul.messenger.messenger-fixed.messenger-on-bottom {
     bottom: 95px;
   }
 }
+
+ul.messenger-theme-flat .messenger-message.alert-info .messenger-message-inner:before {
+  background: @droneTeal;
+}
+
+@media (max-width: @screen-xs-max) {
+  ul.messenger.messenger-fixed.messenger-on-bottom {
+    width: 100%;
+    bottom: 0px;
+    .border-bottom-radius(0);
+
+    &.messenger-on-right {
+      right : 0px;
+    }
+  }
+}

src/UI/Content/bootstrap.less

@@ -0,0 +1,2 @@
+@import "./Bootstrap/bootstrap";
+@import "./Overrides/bootstrap";

src/UI/Content/form.less

@@ -1,13 +1,7 @@
 @import "../Shared/Styles/clickable.less";
 
 .form-group {
-  .controls {
+  .input-group {
-    i {
-      font-size    : 16px;
-      color        : #595959;
-      margin-right : 5px;
-    }
-
     .checkbox {
       width         : 100px;
       margin-left   : 0px;
@@ -20,6 +14,7 @@
       display        : inline-block;
       margin-top     : -20px;
       margin-bottom  : 0;
+      margin-left    : 10px;
       vertical-align : middle;
     }
 
@@ -30,6 +25,22 @@
       }
     }
   }
+
+  i {
+    font-size    : 16px;
+    color        : #595959;
+    margin-right : 5px;
+  }
+
+  .help-inline {
+    display      : inline-block;
+    margin-top   : 8px;
+    padding-left : 0px;
+
+    @media (max-width: @screen-xs-max) {
+      margin-left: 0px;
+    }
+  }
 }
 
 .text-area-help {
@@ -39,7 +50,12 @@
 }
 
 textarea.release-restrictions {
-  width : 260px;
+  width     : 100%;
+  max-width : 100%;
+}
+
+.help-inline-text-area {
+  margin-top: 25px !important;
 }
 
 .help-link {
@@ -58,3 +74,16 @@ h3 {
     text-transform: none;
   }
 }
+
+.form-inline {
+  div {
+    display : inline-block;
+  }
+}
+
+.has-error {
+  .help-inline {
+    color: #b94a48;
+    margin-left: 0px;
+  }
+}

src/UI/Content/menu.less

@@ -1,161 +0,0 @@
-@import "prefixer";
-
-@grid-float-breakpoint:     @screen-xs-min;
-
-#main-menu-region {
-  text-align    : center;
-  margin-bottom : 10px;
-
-  i:before {
-    font-size : 35px;
-  }
-
-  i {
-    width : 40px;
-  }
-  
-  .navbar-nav, .navbar-nav>li {
-    float          : none;
-  }
-  
-  .navbar-brand {
-    padding        : 0px;
-  }
-  
-  .logo {
-    margin-top     : 25px;
-    vertical-align : middle;
-    height         : 70px;
-    width          : 70px;
-    
-    color: #ff0000;
-    &:after {
-      content: "unknown";
-    }
-    
-    @media (min-width: @screen-xs-min) {
-      &:after {
-        content: "xs";
-      }
-    }
-    
-    @media (min-width: @screen-sm-min) {
-      &:after {
-        content: "sm";
-      }
-    }
-    
-    @media (min-width: @screen-md-min) {
-      &:after {
-        content: "md";
-      }
-    }
-    
-    @media (min-width: @screen-lg-min) {
-      &:after {
-        content: "lg";
-      }
-    }
-  }
-
-  li {
-    list-style-type : none;
-    display         : inline-block;
-    position        : relative;
-
-    a {
-
-      &:focus {
-        text-decoration : none;
-      }
-
-      display       : block;
-      
-      @media (max-width: @screen-xs-max) {
-        border-radius : 6px;
-        padding       : 15px 10px 5px;
-        min-height    : 38px;
-        min-width     : 42px;
-        margin        : 20px 0px 5px;
-      }
-      
-      @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-        border-radius : 6px;
-        padding       : 15px 10px 5px;
-        min-height    : 76px;
-        min-width     : 84px;
-        margin        : 20px 0px 5px;
-      }
-      
-      @media (min-width: @screen-md-min) {
-        border-radius : 6px;
-        padding       : 15px 10px 5px;
-        min-height    : 76px;
-        min-width     : 84px;
-        margin        : 20px 10px 5px;
-      }
-      
-      color         : #b9b9b9;
-      font-weight   : 100;
-    }
-    span.label.pull-right {
-      position : absolute;
-      top      : 28px;
-      right    : 18px;
-    }
-  }
-}
-
-.backdrop  {
-  #nav-region {
-    background-color : #000000;
-    .opacity(0.85);
-  }
-
-
-}
-
-#nav-region {
-  margin-bottom : 80px;
-  height        : 150px;
-
-  .col-md-12 {
-    margin-left : 0px;
-  }
-
-  li {
-    a {
-      &:hover {
-        background-color : #555555;
-        text-decoration  : none;
-      }
-
-      .label {
-        cursor: pointer;
-      }
-    }
-  }
-}
-
-.search {
-  text-align: center;
-
-  input, .input-group-addon {
-    background-color: #333333;
-    border-color: #333333;
-    color: #cccccc;
-  }
-
-  ul {
-    text-align: left;
-  }
-
-  .dropdown-menu {
-    background-color: #333333;
-    color: #cccccc;
-
-    > li > a {
-      color: #cccccc;
-    }
-  }
-}

src/UI/Content/navbar.less

@@ -0,0 +1,227 @@
+@import "prefixer";
+@import "variables";
+
+@grid-float-breakpoint:     @screen-xs-min;
+
+.backdrop  {
+  .navbar-nzbdrone {
+    background-color : #000000;
+    .opacity(0.85);
+    padding-bottom: 10px;
+  }
+}
+
+.navbar-nzbdrone {
+  text-align    : center;
+
+  i:before {
+    font-size : 35px;
+    display: block;
+  }
+  
+  .navbar-nav, .navbar-nav>li {
+    float          : none;
+  }
+
+  .navbar-toggle {
+    border-color: #333;
+
+    &:hover,
+    &:focus {
+      background-color: #333;
+    }
+
+    .icon-bar {
+      background-color: #ffffff;
+    }
+  }
+
+  .navbar-brand {
+    position: absolute;
+
+    @media (max-width: @screen-xs-max) {
+      padding: 9px 15px;
+      font-size: 14px;
+    }
+
+    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+      padding: 20px 15px;
+    }
+
+    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+      padding: 30px 15px;
+    }
+
+    @media (min-width: @screen-lg-min) {
+      padding: 22px 15px;
+    }
+  }
+
+  .logo-text {
+    color: white;
+    font-weight: 300;
+
+    .highlight {
+      font-weight: 400;
+      color: @droneTeal;
+    }
+  }
+
+  li {
+    list-style-type : none;
+    display         : inline-block;
+    position        : relative;
+
+    a {
+      display     : block;
+      color       : #b9b9b9;
+      font-weight : 100;
+
+      &:hover {
+        background-color : #555555;
+        text-decoration  : none;
+      }
+
+      .label {
+        cursor: pointer;
+      }
+
+      &:focus {
+        text-decoration : none;
+      }
+
+      @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+        border-radius : 6px;
+        padding       : 5px 0px 5px;
+        min-height    : 76px;
+        min-width     : 64px;
+        margin        : 20px 5px 5px;
+      }
+
+      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+        border-radius : 6px;
+        padding       : 15px 10px 5px;
+        min-height    : 76px;
+        min-width     : 64px;
+        margin        : 20px 10px 5px;
+      }
+
+      @media (min-width: @screen-lg-min) {
+        border-radius : 6px;
+        padding       : 15px 10px 5px;
+        min-height    : 76px;
+        min-width     : 84px;
+        margin        : 20px 10px 5px;
+      }
+    }
+
+    .health {
+      .label {
+        position : absolute;
+        top      : 10px;
+        right    : 10px;
+      }
+    }
+  }
+
+  @media (max-width: @screen-xs-max) {
+    text-align : left;
+
+    i:before {
+      font-size : 14px;
+      display: inline-block;
+    }
+
+    li {
+      display: block;
+
+      a:hover {
+        background-color: transparent;
+      }
+
+      .health {
+        margin-left: 5px;
+
+        .label {
+          position : static;
+        }
+      }
+    }
+  }
+}
+
+.search {
+
+  i:before {
+    font-size: 14px;
+  }
+
+  .input-group {
+      input, .input-group-addon {
+        background-color: #333333;
+      }
+  }
+
+    input, .input-group-addon {
+      border-color: #333333;
+      color: #cccccc;
+    }
+
+  ul {
+    text-align: left;
+  }
+
+  .tt-dropdown-menu {
+
+    background-color: #333333;
+    color: #cccccc;
+    opacity: .95;
+
+    .tt-suggestion {
+      color: #cccccc;
+
+      &.tt-cursor {
+        //item selected
+
+        background-color: @droneTeal;
+        color: #222222;
+
+        a {
+          //link in item selected
+          color: #222222;
+        }
+      }
+    }
+  }
+}
+
+//.screen-size {
+//  color: @droneTeal;
+//  &:after {
+//    content: "unknown";
+//  }
+//
+//  @media (min-width: @screen-xs-min) {
+//    &:after {
+//      content: "xs";
+//    }
+//  }
+//
+//  @media (min-width: @screen-sm-min) {
+//    &:after {
+//      content: "sm";
+//    }
+//  }
+//
+//  @media (min-width: @screen-md-min) {
+//    &:after {
+//      content: "md";
+//    }
+//  }
+//
+//  @media (min-width: @screen-lg-min) {
+//    &:after {
+//      content: "lg";
+//    }
+//  }
+//}

src/UI/Content/progress-bars.less

@@ -11,15 +11,16 @@
   }
     
   .progressbar-back-text, .progressbar-front-text {
-    font-size   : 11.844px;
+    font-size   : 12px;
     font-weight : bold;
     text-align  : center;
     cursor      : default;
+    line-height : 20px;
   }
 
   .progressbar-back-text {
-    position : absolute;
+    position    : absolute;
-    height   : 100%;
+    height      : 100%;
   }
 
   .progressbar-front-text {
@@ -27,7 +28,7 @@
     height   : 100%;
   }
 
-  .bar {
+  .progress-bar {
     position : absolute;
     overflow : hidden;
   }

src/UI/Content/theme.less

@@ -3,7 +3,7 @@
 @import "Bootstrap/type";
 @import "font";
 @import "form";
-@import "menu";
+@import "navbar";
 @import "Backgrid/backgrid";
 @import "prefixer";
 @import "icons";
@@ -14,6 +14,15 @@
 @import "../Shared/Styles/clickable";
 @import "../Shared/Styles/card";
 @import "../Rename/rename";
+@import "typeahead";
+@import "utilities";
+
+.main-region {
+  @media (min-width: @screen-lg-min) {
+    padding-left  : 30px;
+    padding-right : 30px;
+  }
+}
 
 .toolbar {
 
@@ -150,8 +159,9 @@ body {
   min-width  : 1210px; */
   max-width  : 1210px;
   margin     : auto;
-  margin-top : -70px;
+//  margin-top : -70px;
   padding    : 20px 0px;
+
   .header {
     padding-bottom : 10px;
     margin-bottom  : 20px;
@@ -186,12 +196,6 @@ body {
   color : @state-danger-text;
 }
 
-.form-inline {
-  div {
-    display : inline-block;
-  }
-}
-
 .error {
   background: #FF0000;
 }
@@ -219,6 +223,17 @@ body {
   left: 0;
   bottom: 0;
   width: 100%;
-  height: 55px;
+  height: 80px;
   opacity: 0;
+
+  @media (max-width: @screen-sm-max) {
+    height: initial;
+    position: static;
+  }
+}
+
+.tab-content {
+  .tab-pane {
+    padding-top: 10px;
+  }
 }

src/UI/Content/typeahead.less

@@ -0,0 +1,152 @@
+/*
+ * typehead.js-bootstrap3.less
+ * @version 0.2.3
+ * https://github.com/hyspace/typeahead.js-bootstrap3.less
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+//custom mixin for .form-control-validation
+.typeahead-form-control(@border-color: #ccc;) {
+  border-color: @border-color;
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+  &:focus {
+    border-color: darken(@border-color, 10%);
+    @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
+    .box-shadow(@shadow);
+  }
+}
+
+//main styles for control
+.tt-input,
+.tt-hint {
+  .twitter-typeahead &{
+    //validation states
+    .has-warning &{
+      .typeahead-form-control(@state-warning-text);
+    }
+    .has-error &{
+      .typeahead-form-control(@state-danger-text);
+    }
+    .has-success &{
+      .typeahead-form-control(@state-success-text);
+    }
+  }
+
+  //border
+  .input-group .twitter-typeahead:first-child &{
+    .border-left-radius(@border-radius-base);
+  }
+  .input-group .twitter-typeahead:last-child &{
+    .border-right-radius(@border-radius-base);
+  }
+
+  //sizing - small:size and border
+  .input-group.input-group-sm .twitter-typeahead &{
+    .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+  }
+  .input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) &{
+    border-radius: 0;
+  }
+  .input-group.input-group-sm .twitter-typeahead:first-child &{
+    .border-left-radius(@border-radius-small);
+    .border-right-radius(0);
+  }
+  .input-group.input-group-sm .twitter-typeahead:last-child &{
+    .border-left-radius(0);
+    .border-right-radius(@border-radius-small);
+  }
+
+  //sizing - large:size and border
+  .input-group.input-group-lg .twitter-typeahead &{
+    .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
+  }
+  .input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) &{
+    border-radius: 0;
+  }
+  .input-group.input-group-lg .twitter-typeahead:first-child &{
+    .border-left-radius(@border-radius-large);
+    .border-right-radius(0);
+  }
+  .input-group.input-group-lg .twitter-typeahead:last-child &{
+    .border-left-radius(0);
+    .border-right-radius(@border-radius-large);
+  }
+}
+
+//for wrapper
+.twitter-typeahead {
+  width: 100%;
+  .input-group &{
+    //overwrite `display:inline-block` style
+    display: table-cell!important;
+    float: left;
+  }
+}
+
+//particular style for each other
+.twitter-typeahead .tt-hint {
+  color: @text-muted;//color - hint
+}
+.twitter-typeahead .tt-input {
+  z-index: 2;
+  //disabled status
+  //overwrite inline styles of .tt-query
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+    //overwirte inline style
+    background-color: @input-bg-disabled!important;
+  }
+}
+
+//dropdown styles
+.tt-dropdown-menu {
+  //dropdown menu
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: @zindex-dropdown;
+  min-width: 160px;
+  width: 100%;
+  padding: 5px 0;
+  margin: 2px 0 0;
+  list-style: none;
+  font-size: @font-size-base;
+  background-color: @dropdown-bg;
+  border: 1px solid @dropdown-fallback-border;
+  border: 1px solid @dropdown-border;
+  border-radius: @border-radius-base;
+  .box-shadow(0 6px 12px rgba(0,0,0,.175));
+  background-clip: padding-box;
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+
+  .tt-suggestion {
+    //item
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: normal;
+    line-height: @line-height-base;
+    color: @dropdown-link-color;
+    white-space: nowrap;
+
+    &.tt-cursor {
+      //item selected
+      text-decoration: none;
+      outline: 0;
+      background-color: @dropdown-link-hover-bg;
+      color: @dropdown-link-hover-color;
+      a {
+        //link in item selected
+        color: @dropdown-link-hover-color;
+      }
+    }
+    p {
+      margin: 0;
+    }
+  }
+}

src/UI/Content/utilities.less

@@ -0,0 +1,19 @@
+@import "Bootstrap/variables";
+@import "Bootstrap/mixins";
+
+@media (max-width: @screen-sm-max) {
+  .pull-none-xs {
+    float : none !important;
+  }
+
+  .btn-group {
+    &.btn-group-collapse {
+      > .btn {
+        margin        : 2px;
+        display       : block;
+        float         : none;
+        border-radius : @border-radius-base !important;
+      }
+    }
+  }
+}

src/UI/Episode/Activity/EpisodeActivityLayoutTemplate.html

@@ -1 +1 @@
-<div class="activity-table"></div>
+<div class="activity-table table-responsive"></div>

src/UI/Episode/EpisodeDetailsLayoutTemplate.html

@@ -1,33 +1,37 @@
-<div class="episode-detail-modal">
+<div class="modal-dialog">
-    <div class="modal-header">
+    <div class="modal-content">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <div class="episode-detail-modal">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
-        <h3>
+                <h3>
-            <i class="icon-bookmark x-episode-monitored episode-monitored" title="Toggle monitored status" />
+                    <i class="icon-bookmark x-episode-monitored episode-monitored" title="Toggle monitored status" />
-            {{series.title}} - {{EpisodeNumber}} - {{title}}
+                    {{series.title}} - {{EpisodeNumber}} - {{title}}
-        </h3>
+                </h3>
 
-    </div>
+            </div>
-    <div class="modal-body">
+            <div class="modal-body">
-        <ul class="nav nav-tabs" id="myTab">
+                <ul class="nav nav-tabs" id="myTab">
-            <li><a href="#episode-summary" class="x-episode-summary">Summary</a></li>
+                    <li><a href="#episode-summary" class="x-episode-summary">Summary</a></li>
-            <li><a href="#episode-activity" class="x-episode-activity">Activity</a></li>
+                    <li><a href="#episode-activity" class="x-episode-activity">Activity</a></li>
-            <li><a href="#episode-search" class="x-episode-search">Search</a></li>
+                    <li><a href="#episode-search" class="x-episode-search">Search</a></li>
-        </ul>
+                </ul>
-        <div class="tab-content">
+                <div class="tab-content">
-            <div class="tab-pane" id="episode-summary"/>
+                    <div class="tab-pane" id="episode-summary"/>
-            <div class="tab-pane" id="episode-activity"/>
+                    <div class="tab-pane" id="episode-activity"/>
-            <div class="tab-pane" id="episode-search"/>
+                    <div class="tab-pane" id="episode-search"/>
+                </div>
+            </div>
+            <div class="modal-footer">
+                {{#unless hideSeriesLink}}
+                    {{#with series}}
+                        <a href="{{route}}" class="btn btn-default pull-left" data-dismiss="modal">open series</a>
+                    {{/with}}
+                {{/unless}}
+
+                <button class="btn btn-default" data-dismiss="modal">close</button>
+            </div>
         </div>
     </div>
-    <div class="modal-footer">
-        {{#unless hideSeriesLink}}
-            {{#with series}}
-                <a href="{{route}}" class="btn pull-left" data-dismiss="modal">open series</a>
-            {{/with}}
-        {{/unless}}
-
-        <button class="btn" data-dismiss="modal">close</button>
-    </div>
 </div>
 

src/UI/Episode/Search/ManualLayoutTemplate.html

@@ -1,2 +1,2 @@
-<div id="episode-release-grid"/>
+<div id="episode-release-grid" class="table-responsive"></div>
 <button class="btn x-search-back">Back</button>

src/UI/Form/CheckboxTemplate.html

@@ -1,21 +1,23 @@
 <div class="form-group">
-    <label class="control-label">{{label}}</label>
+    <label class="col-sm-3 control-label">{{label}}</label>
 
-    <div class="controls">
+    <div class="col-sm-5">
-        <label class="checkbox toggle well">
+        <div class="input-group">
-            <input type="checkbox" name="fields.{{order}}.value"/>
+            <label class="checkbox toggle well">
-            <p>
+                <input type="checkbox" name="fields.{{order}}.value"/>
-                <span>Yes</span>
+                <p>
-                <span>No</span>
+                    <span>Yes</span>
-            </p>
+                    <span>No</span>
+                </p>
 
-            <div class="btn btn-primary slide-button"/>
+                <div class="btn btn-primary slide-button"/>
-        </label>
+            </label>
 
-        {{#if helpText}}
+            {{#if helpText}}
-            <span class="help-inline-checkbox">
+                <span class="help-inline-checkbox">
-                <i class="icon-nd-form-info" title="{{helpText}}"/>
+                    <i class="icon-nd-form-info" title="{{helpText}}"/>
-            </span>
+                </span>
-        {{/if}}
+            {{/if}}
+        </div>
     </div>
 </div>

src/UI/Form/FormHelpPartial.html

@@ -1,11 +1,8 @@
-{{#if helpText}}
+<span class="col-sm-1 help-inline">
-    <span class="help-inline">
+    {{#if helpText}}
         <i class="icon-nd-form-info" title="{{helpText}}"/>
-    </span>
+    {{/if}}
-{{/if}}
+    {{#if helpLink}}
-
-{{#if helpLink}}
-    <span class="help-inline">
         <a href="{{helpLink}}" class="help-link"><i class="icon-info-sign"/></a>
-    </span>
+    {{/if}}
-{{/if}}
+</span>

src/UI/Form/PasswordTemplate.html

@@ -1,12 +1,8 @@
 <div class="form-group">
-    <label class="control-label">{{label}}</label>
+    <label class="col-sm-3 control-label">{{label}}</label>
 
-    <div class="controls">
+    <div class="col-sm-5">
-        <input type="password" name="fields.{{order}}.value" validation-name="{{name}}"/>
+        <input type="password" name="fields.{{order}}.value" validation-name="{{name}}" class="form-control"/>
-        {{#if helpText}}
-            <span class="help-inline">
-                <i class="icon-nd-form-info" title="{{helpText}}"/>
-            </span>
-        {{/if}}
     </div>
+    {{> FormHelpPartial}}
 </div>

src/UI/Form/PathTemplate.html

@@ -1,12 +1,8 @@
 <div class="form-group">
-    <label class="control-label">{{label}}</label>
+    <label class="col-sm-3 control-label">{{label}}</label>
 
-    <div class="controls">
+    <div class="col-sm-5">
-        <input type="text" name="fields.{{order}}.value" validation-name="{{name}}" class="x-path"/>
+        <input type="text" name="fields.{{order}}.value" validation-name="{{name}}" class="form-control x-path"/>
-        {{#if helpText}}
-            <span class="help-inline">
-                <i class="icon-nd-form-info" title="{{helpText}}"/>
-            </span>
-        {{/if}}
     </div>
+    {{> FormHelpPartial}}
 </div>

src/UI/Form/SelectTemplate.html

@@ -1,16 +1,12 @@
 <div class="form-group">
-    <label class="control-label">{{label}}</label>
+    <label class="col-sm-3 control-label">{{label}}</label>
 
-    <div class="controls">
+    <div class="col-sm-5">
-        <select name="fields.{{order}}.value">
+        <select name="fields.{{order}}.value" class="form-control">
             {{#each selectOptions}}
                 <option value="{{value}}">{{name}}</option>
             {{/each}}
         </select>
-        {{#if helpText}}
-            <span class="help-inline">
-                <i class="icon-nd-form-info" title="{{helpText}}"/>
-            </span>
-        {{/if}}
     </div>
+    {{> FormHelpPartial}}
 </div>

src/UI/Form/TextboxTemplate.html

@@ -1,8 +1,8 @@
 <div class="form-group">
-    <label class="control-label">{{label}}</label>
+    <label class="col-sm-3 control-label">{{label}}</label>
 
-    <div class="controls">
+    <div class="col-sm-5">
-        <input type="text" name="fields.{{order}}.value" validation-name="{{name}}" spellcheck="false"/>
+        <input type="text" name="fields.{{order}}.value" validation-name="{{name}}" spellcheck="false" class="form-control"/>
-        {{> FormHelpPartial}}
     </div>
+    {{> FormHelpPartial}}
 </div>

src/UI/Handlebars/Helpers/Episode.js

@@ -44,4 +44,16 @@ define(
             return 'primary';
 
         });
+
+        Handlebars.registerHelper('EpisodeProgressClass', function () {
+            if (this.episodeFileCount === this.episodeCount) {
+                if (this.continuing) {
+                    return '';
+                }
+
+                return 'progress-bar-success';
+            }
+
+            return 'progress-bar-danger';
+        });
     });

src/UI/Handlebars/Helpers/Quality.js

@@ -11,7 +11,7 @@ define(
             var profile = QualityProfileCollection.get(profileId);
 
             if (profile) {
-                return new Handlebars.SafeString('<span class="label quality-profile-label">' + profile.get("name") + '</span>');
+                return new Handlebars.SafeString('<span class="label label-default quality-profile-label">' + profile.get("name") + '</span>');
             }
 
             return undefined;

src/UI/Health/HealthView.js

@@ -6,6 +6,8 @@ define(
         'Health/HealthCollection'
     ], function (_, Marionette, HealthCollection) {
         return Marionette.ItemView.extend({
+            tagName: 'span',
+
             initialize: function () {
                 this.listenTo(HealthCollection, 'sync', this._healthSync);
                 HealthCollection.fetch();
@@ -25,10 +27,10 @@ define(
                 });
 
                 if (errors) {
-                    label = 'label-important';
+                    label = 'label-danger';
                 }
 
-                this.$el.html('<span class="label pull-right {0}">{1}</span>'.format(label, count));
+                this.$el.html('<span class="label {0}">{1}</span>'.format(label, count));
                 return this;
             },
 

src/UI/History/Blacklist/BlacklistLayoutTemplate.html

@@ -1,6 +1,6 @@
 <div id="x-toolbar"/>
 <div class="row">
-    <div class="col-md-12">
+    <div class="col-md-12 table-responsive">
         <div id="x-blacklist"/>
     </div>
 </div>

src/UI/History/Details/HistoryDetailsViewTemplate.html

@@ -1,86 +1,89 @@
-<div class="history-detail-modal">
+<div class="modal-dialog">
-    <div class="modal-header">
+    <div class="modal-content">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <div class="history-detail-modal">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
-        <h3>
+                <h3>
-            {{#if_eq eventType compare="grabbed"}}Grabbed{{/if_eq}}
+                    {{#if_eq eventType compare="grabbed"}}Grabbed{{/if_eq}}
-            {{#if_eq eventType compare="downloadFailed"}}Download Failed{{/if_eq}}
+                    {{#if_eq eventType compare="downloadFailed"}}Download Failed{{/if_eq}}
-            {{#if_eq eventType compare="downloadFolderImported"}}Episode Imported{{/if_eq}}
+                    {{#if_eq eventType compare="downloadFolderImported"}}Episode Imported{{/if_eq}}
-        </h3>
+                </h3>
 
-    </div>
+            </div>
-    <div class="modal-body">
+            <div class="modal-body">
-        {{#if_eq eventType compare="grabbed"}}
+                {{#if_eq eventType compare="grabbed"}}
-            <dl class="dl-horizontal">
+                    <dl class="dl-horizontal">
 
-                <dt>Name:</dt>
+                        <dt>Name:</dt>
-                <dd>{{sourceTitle}}</dd>
+                        <dd>{{sourceTitle}}</dd>
 
-                {{#with data}}
+                        {{#with data}}
-                    {{#if indexer}}
+                            {{#if indexer}}
-                        <dt>Indexer:</dt>
+                                <dt>Indexer:</dt>
-                        <dd>{{indexer}}</dd>
+                                <dd>{{indexer}}</dd>
-                    {{/if}}
+                            {{/if}}
 
-                    {{#if releaseGroup}}
+                            {{#if releaseGroup}}
-                        <dt>Release Group:</dt>
+                                <dt>Release Group:</dt>
-                        <dd>{{releaseGroup}}</dd>
+                                <dd>{{releaseGroup}}</dd>
-                    {{/if}}
+                            {{/if}}
 
-                    {{#if nzbInfoUrl}}
+                            {{#if nzbInfoUrl}}
-                        <dt>Info:</dt>
+                                <dt>Info:</dt>
-                        <dd><a href="{{nzbInfoUrl}}">{{nzbInfoUrl}}</a></dd>
+                                <dd><a href="{{nzbInfoUrl}}">{{nzbInfoUrl}}</a></dd>
-                    {{/if}}
+                            {{/if}}
 
-                    {{#if downloadClient}}
+                            {{#if downloadClient}}
-                        <dt>Download Client:</dt>
+                                <dt>Download Client:</dt>
-                        <dd>{{downloadClient}}</dd>
+                                <dd>{{downloadClient}}</dd>
-                    {{/if}}
+                            {{/if}}
 
-                    {{#if downloadClientId}}
+                            {{#if downloadClientId}}
-                        <dt>Download Client ID:</dt>
+                                <dt>Download Client ID:</dt>
-                        <dd>{{downloadClientId}}</dd>
+                                <dd>{{downloadClientId}}</dd>
-                    {{/if}}
+                            {{/if}}
-                {{/with}}
+                        {{/with}}
-            </dl>
+                    </dl>
-        {{/if_eq}}
+                {{/if_eq}}
-        {{#if_eq eventType compare="downloadFailed"}}
+                {{#if_eq eventType compare="downloadFailed"}}
-            <dl class="dl-horizontal">
+                    <dl class="dl-horizontal">
 
-                <dt>Name:</dt>
+                        <dt>Name:</dt>
-                <dd>{{sourceTitle}}</dd>
+                        <dd>{{sourceTitle}}</dd>
 
-                {{#with data}}
+                        {{#with data}}
-                    <dt>Message:</dt>
+                            <dt>Message:</dt>
-                    <dd>{{message}}</dd>
+                            <dd>{{message}}</dd>
-                {{/with}}
+                        {{/with}}
-            </dl>
+                    </dl>
-        {{/if_eq}}
+                {{/if_eq}}
-        {{#if_eq eventType compare="downloadFolderImported"}}
+                {{#if_eq eventType compare="downloadFolderImported"}}
-            <dl class="dl-horizontal">
+                    <dl class="dl-horizontal">
 
-                {{#if sourceTitle}}
+                        {{#if sourceTitle}}
-                    <dt>Name:</dt>
+                            <dt>Name:</dt>
-                    <dd>{{sourceTitle}}</dd>
+                            <dd>{{sourceTitle}}</dd>
-                {{/if}}
+                        {{/if}}
 
-                {{#with data}}
+                        {{#with data}}
-                    {{#if droppedPath}}
+                            {{#if droppedPath}}
-                        <dt>Source:</dt>
+                                <dt>Source:</dt>
-                        <dd>{{droppedPath}}</dd>
+                                <dd>{{droppedPath}}</dd>
-                    {{/if}}
+                            {{/if}}
 
-                    {{#if importedPath}}
+                            {{#if importedPath}}
-                        <dt>Imported To:</dt>
+                                <dt>Imported To:</dt>
-                        <dd>{{importedPath}}</dd>
+                                <dd>{{importedPath}}</dd>
-                    {{/if}}
+                            {{/if}}
-                {{/with}}
+                        {{/with}}
-            </dl>
+                    </dl>
-        {{/if_eq}}
+                {{/if_eq}}
-    </div>
+            </div>
-    <div class="modal-footer">
+            <div class="modal-footer">
-        {{#if_eq eventType compare="grabbed"}}<button class="btn btn-danger x-mark-as-failed">mark as failed</button>{{/if_eq}}
+                {{#if_eq eventType compare="grabbed"}}<button class="btn btn-danger x-mark-as-failed">mark as failed</button>{{/if_eq}}
-        <button class="btn" data-dismiss="modal">close</button>
+                <button class="btn" data-dismiss="modal">close</button>
+            </div>
+        </div>
     </div>
 </div>
-

src/UI/History/Queue/QueueLayoutTemplate.html

@@ -5,7 +5,7 @@
 </div>
 
 <div class="row">
-    <div class="col-md-12">
+    <div class="col-md-12 table-responsive">
         <div id="x-queue-pager"/>
     </div>
 </div>

src/UI/History/Table/HistoryTableLayout.js

@@ -88,7 +88,6 @@ define(
 
             onShow: function () {
                 this.history.show(new LoadingView());
-                //this.collection.fetch();
                 this._showToolbar();
             },
 
@@ -160,8 +159,9 @@ define(
                 this.collection.state.currentPage = 1;
                 var promise = this.collection.setFilterMode(mode);
 
-                if (buttonContext)
+                if (buttonContext) {
                     buttonContext.ui.icon.spinForPromise(promise);
+                }
             }
         });
     });

src/UI/History/Table/HistoryTableLayoutTemplate.html

@@ -1,6 +1,6 @@
 <div id="x-history-toolbar"/>
 <div class="row">
-    <div class="col-md-12">
+    <div class="col-md-12 table-responsive">
         <div id="x-history"/>
     </div>
 </div>

src/UI/JsLibraries/messenger.js

@@ -1,4 +1,4 @@
-/*! messenger 1.3.6 */
+/*! messenger 1.4.1 */
 /*
  * This file begins the output concatenated into messenger.js
  *
@@ -331,11 +331,11 @@ window.Messenger.Events = (function() {
 
     BaseView.prototype.delegateEvents = function(events) {
       var delegateEventSplitter, eventName, key, match, method, selector, _results;
-      if (!(events || (events = _.result(this, 'events')))) {
+      if (!(events || (events = _.result(this, "events")))) {
         return;
       }
-      delegateEventSplitter = /^(\S+)\s*(.*)$/;
       this.undelegateEvents();
+      delegateEventSplitter = /^(\S+)\s*(.*)$/;
       _results = [];
       for (key in events) {
         method = events[key];
@@ -343,7 +343,7 @@ window.Messenger.Events = (function() {
           method = this[events[key]];
         }
         if (!method) {
-          throw new Error("Method " + events[key] + " does not exist");
+          throw new Error("Method \"" + events[key] + "\" does not exist");
         }
         match = key.match(delegateEventSplitter);
         eventName = match[1];
@@ -409,7 +409,8 @@ window.Messenger.Events = (function() {
 
     _Message.prototype.defaults = {
       hideAfter: 10,
-      scroll: true
+      scroll: true,
+      closeButtonText: "×"
     };
 
     _Message.prototype.initialize = function(opts) {
@@ -574,7 +575,8 @@ window.Messenger.Events = (function() {
         _this = this;
       $message = $("<div class='messenger-message message alert " + opts.type + " message-" + opts.type + " alert-" + opts.type + "'>");
       if (opts.showCloseButton) {
-        $cancel = $('<button type="button" class="close" data-dismiss="alert">&times;</button>');
+        $cancel = $('<button type="button" class="messenger-close" data-dismiss="alert">');
+        $cancel.html(opts.closeButtonText);
         $cancel.click(function() {
           _this.cancel();
           return true;
@@ -992,7 +994,7 @@ window.Messenger.Events = (function() {
     };
 
     ActionMessenger.prototype.run = function() {
-      var args, attr, events, getMessageText, handler, handlers, m_opts, msg, old, opts, promiseAttrs, type, _i, _len, _ref2, _ref3,
+      var args, events, getMessageText, handler, handlers, m_opts, msg, old, opts, type, _ref2,
         _this = this;
       m_opts = arguments[0], opts = arguments[1], args = 3 <= arguments.length ? __slice.call(arguments, 2) : [];
       if (opts == null) {
@@ -1101,7 +1103,9 @@ window.Messenger.Events = (function() {
           }
           msg.update(msgOpts);
           if (responseOpts && msgOpts.message) {
-            Messenger();
+            Messenger(_.extend({}, _this.options, {
+              instance: _this
+            }));
             return msg.show();
           } else {
             return msg.hide();
@@ -1119,14 +1123,6 @@ window.Messenger.Events = (function() {
       if (m_opts.returnsPromise) {
         msg._actionInstance.then(handlers.success, handlers.error);
       }
-      promiseAttrs = ['done', 'progress', 'fail', 'state', 'then'];
-      for (_i = 0, _len = promiseAttrs.length; _i < _len; _i++) {
-        attr = promiseAttrs[_i];
-        if (msg[attr] != null) {
-          delete msg[attr];
-        }
-        msg[attr] = (_ref3 = msg._actionInstance) != null ? _ref3[attr] : void 0;
-      }
       return msg;
     };
 
@@ -1147,6 +1143,45 @@ window.Messenger.Events = (function() {
       return this.run(m_opts);
     };
 
+    ActionMessenger.prototype.error = function(m_opts) {
+      if (m_opts == null) {
+        m_opts = {};
+      }
+      if (typeof m_opts === 'string') {
+        m_opts = {
+          message: m_opts
+        };
+      }
+      m_opts.type = 'error';
+      return this.post(m_opts);
+    };
+
+    ActionMessenger.prototype.info = function(m_opts) {
+      if (m_opts == null) {
+        m_opts = {};
+      }
+      if (typeof m_opts === 'string') {
+        m_opts = {
+          message: m_opts
+        };
+      }
+      m_opts.type = 'info';
+      return this.post(m_opts);
+    };
+
+    ActionMessenger.prototype.success = function(m_opts) {
+      if (m_opts == null) {
+        m_opts = {};
+      }
+      if (typeof m_opts === 'string') {
+        m_opts = {
+          message: m_opts
+        };
+      }
+      m_opts.type = 'success';
+      return this.post(m_opts);
+    };
+
     return ActionMessenger;
 
   })(_Messenger);
@@ -1204,7 +1239,7 @@ window.Messenger.Events = (function() {
         inst = $el.messenger(opts);
         inst._location = chosen_loc;
         Messenger.instance = inst;
-      } else if ($(inst._location) !== $(chosen_loc)) {
+      } else if (!$(inst._location).is($(chosen_loc))) {
         inst.$el.detach();
         $parent.prepend(inst.$el);
       }

src/UI/Mixins/AsFilteredCollection.js

@@ -15,7 +15,7 @@ define(
                 this.state.filterValue = filter[1];
 
                 if (options.reset) {
-                    if (this.mode != 'server') {
+                    if (this.mode !== 'server') {
                         this.fullCollection.resetFiltered();
                     } else {
                         return this.fetch();
@@ -35,10 +35,12 @@ define(
                 self.shadowCollection = originalMakeFullCollection.call(this, models, options);
                 
                 var filterModel = function(model) {
-                    if (!self.state.filterKey || !self.state.filterValue)
+                    if (!self.state.filterKey || !self.state.filterValue) {
                         return true;
-                    else
+                    }
+                    else {
                         return model.get(self.state.filterKey) === self.state.filterValue;
+                    }
                 };
 
                 self.shadowCollection.filtered = function() {

src/UI/Mixins/AutoComplete.js

@@ -2,24 +2,40 @@
 define(
     [
         'jquery',
+        'underscore',
         'typeahead'
-    ], function ($) {
+    ], function ($, _) {
 
     $.fn.autoComplete = function (resource) {
         $(this).typeahead({
-            source   : function (filter, callback) {
+                hint      : true,
-                $.ajax({
+                highlight : true,
-                    url     : window.NzbDrone.ApiRoot + resource,
+                minLength : 3,
-                    dataType: 'json',
+                items     : 20
-                    type    : 'GET',
-                    data    : { query: filter },
-                    success : function (data) {
-                        callback(data);
-                    }
-                });
             },
-            minLength: 3,
+            {
-            items    : 20
+                name: resource.replace('/'),
+                displayKey: '',
+                source   : function (filter, callback) {
+                    $.ajax({
+                        url     : window.NzbDrone.ApiRoot + resource,
+                        dataType: 'json',
+                        type    : 'GET',
+                        data    : { query: filter },
+                        success : function (data) {
+
+                            var matches = [];
+
+                            $.each(data, function(i, d) {
+                                if (d.startsWith(filter)) {
+                                    matches.push({ value: d });
+                                }
+                            });
+
+                            callback(matches);
+                        }
+                    });
+                }
         });
     };
 });

src/UI/Navbar/NavbarLayoutTemplate.html

@@ -1,81 +1,46 @@
-<div class="navbar navbar-nzbdrone" role="navigation">
+<!-- Static navbar -->
+<div class="navbar navbar-nzbdrone" role="navigation">
     <div class="container-fluid">
-        <div class="col-md-12">
+        <div class="navbar-header">
-            <div id="main-menu-region">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                <div class="navbar-header logo">
+                <span class="sr-only">Toggle navigation</span>
-                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" />
+                <span class="icon-bar"></span>
-                    <a class="navbar-brand" href="{{UrlBase}} /">
+                <span class="icon-bar"></span>
-                        <img src="{{UrlBase}}/Content/Images/logo.png?v=2" alt="NzbDrone">
+                <span class="icon-bar"></span>
-                    </a>
+            </button>
-                </div>
+            <a class="navbar-brand" href="{{UrlBase}}/">
-                <div class="collapse navbar-collapse">
+                <!--<img src="{{UrlBase}}/Content/Images/logo.png?v=2" alt="nzbdrone">-->
-                    <ul class="nav navbar-nav">
+                <img src="{{UrlBase}}/Content/Images/logos/128.png" class="visible-lg"/>
-                        <li>
+                <img src="{{UrlBase}}/Content/Images/logos/64.png" class="visible-md visible-sm"/>
-                            <a href="{{UrlBase}}/">
+                <span class="visible-xs">
-                                <i class="icon-play"></i>
+                    <img src="{{UrlBase}}/Content/Images/logos/32.png"/>
-                                <br>
+                    <span class="logo-text"><span class="highlight">nzb</span>drone</span>
-                                Series
+                </span>
-                            </a>
+
-                        </li>
+            </a>
-                        <li>
+        </div>
-                            <a href="{{UrlBase}}/calendar">
+        <div class="navbar-collapse collapse x-navbar-collapse">
-                                <i class="icon-calendar"></i>
+            <ul class="nav navbar-nav">
-                                <br>
+                <li><a href="{{UrlBase}}/" class="x-series-nav"><i class="icon-play"></i> Series</a></li>
-                                Calendar
+                <li><a href="{{UrlBase}}/calendar" class="x-calendar-nav"><i class="icon-calendar"></i> Calendar</a></li>
-                            </a>
+                <li><a href="{{UrlBase}}/history" class="x-history-nav"><i class="icon-time"></i> History</a></li>
-                        </li>
+                <li><a href="{{UrlBase}}/wanted" class="x-wanted-nav"><i class="icon-warning-sign"></i> Wanted</a></li>
-                        <li>
+                <li><a href="{{UrlBase}}/settings" class="x-settings-nav"><i class="icon-cogs"></i> Settings</a></li>
-                            <a href="{{UrlBase}}/history">
+                <li><a href="{{UrlBase}}/system" class="x-system-nav"><i class="icon-laptop"></i> System<span id="x-health" class="health"></span></a></li>
-                                <i class="icon-time"></i>
+                <li><a href="http://nzbdrone.com/#donate" target="_blank"><i class="icon-nd-donate"></i> Donate</a></li>
-                                <br>
+            </ul>
-                                History
+            <ul class="nav navbar-nav navbar-right">
-                            </a>
+                <li class="active screen-size"></li>
-                        </li>
+            </ul>
-                        <li>
+        </div><!--/.nav-collapse -->
-                            <a href="{{UrlBase}}/wanted">
+    </div><!--/.container-fluid -->
-                                <i class="icon-warning-sign"></i>
+
-                                <br>
+    <div class="col-md-12 search">
-                                Wanted
+        <div class="col-md-6 col-md-offset-3">
-                            </a>
+            <div class="input-group">
-                        </li>
+                <span class="input-group-addon"><i class="icon-search"></i></span>
-                        <li>
+                <input type="text" class="col-md-6 form-control x-series-search" >
-                            <a href="{{UrlBase}}/settings">
-                                <i class="icon-cogs"></i>
-                                <br>
-                                Settings
-                            </a>
-                        </li>
-                        <li>
-                            <a href="{{UrlBase}}/system">
-                                <i class="icon-laptop"></i>
-                                <br>
-                                System
-                                <span id="x-health"></span>
-                            </a>
-                        </li>
-                        <li>
-                                <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=HGGGM7JT5YVSS" target="_blank">
-                                <i class="icon-nd-donate"></i>
-                                <br>
-                                Donate
-                            </a>
-                        </li>
-                    </ul>
-                </div>
             </div>
         </div>
     </div>
 </div>
-<div class="searchbar">
-<!--
-    <div class="row">
-        <div class="col-md-12">
-            <div class="search">
-                <div class="input-group">
-                    <span class="input-group-addon"><i class="icon-search"></i></span>
-                    <input class="col-md-4 x-series-search" id="prependedInput" type="text">
-                </div>
-            </div>
-        </div>
-    </div>-->
-</div>

src/UI/Navbar/NavbarView.js

@@ -14,7 +14,8 @@ define(
             },
 
             ui: {
-                search: '.x-series-search'
+                search: '.x-series-search',
+                collapse: '.x-navbar-collapse'
             },
 
             events: {
@@ -46,6 +47,10 @@ define(
                 else {
                     this.setActive(event.target);
                 }
+
+                if ($(window).width() < 768) {
+                    this.ui.collapse.collapse('hide');
+                }
             },
 
             setActive: function (element) {

src/UI/Navbar/Search.js

@@ -1,11 +1,12 @@
 'use strict';
 define(
     [
-        'backbone',
+        'underscore',
         'jquery',
+        'backbone',
         'Series/SeriesCollection',
         'typeahead'
-    ], function (Backbone, $, SeriesCollection) {
+    ], function (_, $, Backbone, SeriesCollection) {
         $(document).on('keydown', function (e) {
             if ($(e.target).is('input') || $(e.target).is('textarea')) {
                 return;
@@ -23,20 +24,33 @@ define(
 
         $.fn.bindSearch = function () {
             $(this).typeahead({
-                source: function () {
+                    hint: true,
-                    return SeriesCollection.pluck('title');
+                    highlight: true,
+                    minLength: 1
                 },
+                {
+                    name: 'series',
+                    displayKey: 'title',
+                    source: substringMatcher()
+                });
 
-                sorter: function (items) {
+            $(this).on('typeahead:selected typeahead:autocompleted', function (e, series) {
-                    return items.sort();
+                this.blur();
-                },
+                $(this).val('');
-
+                Backbone.history.navigate('/series/{0}'.format(series.titleSlug), { trigger: true });
-                updater: function (item) {
-                    var series = SeriesCollection.findWhere({ title: item });
-
-                    this.$element.blur();
-                    Backbone.history.navigate('/series/{0}'.format(series.get('titleSlug')), { trigger: true });
-                }
             });
         };
+
+        var substringMatcher = function() {
+            return function findMatches(q, cb) {
+                // regex used to determine if a string contains the substring `q`
+                var substrRegex = new RegExp(q, 'i');
+
+                var matches = _.select(SeriesCollection.toJSON(), function (series) {
+                    return substrRegex.test(series.title);
+                });
+
+                cb(matches);
+            };
+        };
     });

src/UI/Quality/QualityProfileSelectionPartial.html

@@ -1,4 +1,4 @@
-<select class="col-md-2 x-quality-profile">
+<select class="col-md-2 form-control x-quality-profile">
     {{#each this}}
     <option value="{{id}}">{{name}}</option>
     {{/each}}

src/UI/Rename/RenamePreviewLayoutTemplate.html

@@ -1,26 +1,29 @@
-<div class="rename-preview-modal">
+<div class="modal-dialog">
-    <div class="modal-header">
+    <div class="modal-content">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <div class="rename-preview-modal">
-        <h3>
+            <div class="modal-header">
-            <i class="icon-nd-rename"></i> Organize & Rename
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        </h3>
+                <h3>
+                    <i class="icon-nd-rename"></i> Organize & Rename
+                </h3>
 
-    </div>
+            </div>
-    <div class="modal-body">
+            <div class="modal-body">
-        <div class="alert alert-info path-info x-path-info">All paths are relative to: <strong>{{path}}</strong></div>
+                <div class="alert alert-info path-info x-path-info">All paths are relative to: <strong>{{path}}</strong></div>
-        <div id="rename-previews"></div>
+                <div id="rename-previews"></div>
-    </div>
+            </div>
-    <div class="modal-footer">
+            <div class="modal-footer">
-        <span class="rename-all-button x-rename-all-button pull-left">
+                <span class="rename-all-button x-rename-all-button pull-left">
-            <label class="checkbox-button" title="Toggle all">
+                    <label class="checkbox-button" title="Toggle all">
-                <input type="checkbox" checked="checked" class="x-rename-all"/>
+                        <input type="checkbox" checked="checked" class="x-rename-all"/>
-                <div class="btn btn-icon-only">
+                        <div class="btn btn-icon-only">
-                    <i class="icon-check"></i>
+                            <i class="icon-check"></i>
-                </div>
+                        </div>
-            </label>
+                    </label>
-        </span>
+                </span>
-        <button class="btn" data-dismiss="modal">close</button>
+                <button class="btn" data-dismiss="modal">close</button>
-        <button class="btn btn-primary x-organize">Organize</button>
+                <button class="btn btn-primary x-organize">Organize</button>
+            </div>
+        </div>
     </div>
 </div>
-

src/UI/Series/Delete/DeleteSeriesTemplate.html

@@ -1,42 +1,48 @@
-<div class="modal-header">
+<div class="modal-dialog">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <div class="modal-content">
-    <h3>Delete {{title}}</h3>
+        <div class="modal-header">
-</div>
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-<div class="modal-body delete-series-modal">
+            <h3>Delete {{title}}</h3>
-
-    <div class="row">
-        <div class="col-md-2">
-            <img class="series-poster" src="{{poster}}" {{defaultImg}}>
         </div>
-        <div class="col-md-7">
+        <div class="modal-body delete-series-modal">
-            <div class="form-horizontal">
-                <h3 class="path">{{path}}</h3>
 
-                <div class="form-group">
+            <div class="row">
-                    <label class="control-label">Delete all files</label>
+                <div class="col-sm-3 hidden-xs">
+                    <img class="series-poster" src="{{poster}}" {{defaultImg}}>
+                </div>
+                <div class="col-sm-9">
+                    <div class="form-horizontal">
+                        <h3 class="path">{{path}}</h3>
 
-                    <div class="controls">
+                        <div class="form-group">
-                        <label class="checkbox toggle well">
+                            <label class="col-sm-4 control-label">Delete all files</label>
-                            <input type="checkbox" class="x-delete-files"/>
-                            <p>
-                                <span>Yes</span>
-                                <span>No</span>
-                            </p>
 
-                            <div class="btn slide-button btn-danger"/>
+                            <div class="col-sm-8">
-                        </label>
+                                <div class="input-group">
+                                    <label class="checkbox toggle well">
+                                        <input type="checkbox" class="x-delete-files"/>
+                                        <p>
+                                            <span>Yes</span>
+                                            <span>No</span>
+                                        </p>
 
-                <span class="help-inline-checkbox">
+                                        <div class="btn slide-button btn-danger"/>
-                    <i class="icon-nd-form-info" title="Do you want to delete all files from disk?"/>
+                                    </label>
-                    <i class="icon-nd-form-warning" title="This option is irreversible, use with extreme caution"/>
+
-                </span>
+                                        <span class="help-inline-checkbox">
+                                            <i class="icon-nd-form-info" title="Do you want to delete all files from disk?"/>
+                                            <i class="icon-nd-form-warning" title="This option is irreversible, use with extreme caution"/>
+                                        </span>
+                                    </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </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>
-<div class="modal-footer">
-    <button class="btn" data-dismiss="modal">cancel</button>
-    <button class="btn btn-danger x-confirm-delete">delete</button>
-</div>

src/UI/Series/Details/InfoViewTemplate.html

@@ -1,32 +1,37 @@
-<div>
+<div class="row">
-    {{qualityProfile qualityProfileId}}
+    <div class="col-md-9">
-    <span class="label label-info">{{network}}</span>
+        {{qualityProfile qualityProfileId}}
-    <span class="label label-info">{{runtime}} minutes</span>
+        <span class="label label-info">{{network}}</span>
-    <span class="label label-info">{{path}}</span>
+        <span class="label label-info">{{runtime}} minutes</span>
-    {{#if_eq status compare="continuing"}}
+        <span class="label label-info">{{path}}</span>
-        <span class="label label-info">Continuing</span>
+        {{#if_eq status compare="continuing"}}
-    {{else}}
+            <span class="label label-info">Continuing</span>
-        <span class="label">Ended</span>
+        {{else}}
-    {{/if_eq}}
+            <span class="label label-default">Ended</span>
+        {{/if_eq}}
+    </div>
+    <div class="col-md-3">
+        <span class="series-info-links">
+            <a href="{{traktUrl}}" class="label label-info">Trakt</a>
 
-    <span class="pull-right">
+            {{#if imdbId}}
-        <a href="{{traktUrl}}" class="label label-info">Trakt</a>
+                <a href="{{imdbUrl}}" class="label label-info">IMDB</a>
+            {{/if}}
 
-        {{#if imdbId}}
+            {{#if tvdbId}}
-            <a href="{{imdbUrl}}" class="label label-info">IMDB</a>
+                <a href="{{tvdbUrl}}" class="label label-info">TVDB</a>
-        {{/if}}
+            {{/if}}
 
-        {{#if tvdbId}}
+            {{#if tvRageId}}
-            <a href="{{tvdbUrl}}" class="label label-info">TVDB</a>
+                <a href="{{tvRageUrl}}" class="label label-info">TVRage</a>
-        {{/if}}
+            {{/if}}
-
+        </span>
-        {{#if tvRageId}}
+    </div>
-            <a href="{{tvRageUrl}}" class="label label-info">TVRage</a>
-        {{/if}}
-    </span>
 </div>
-<div>
+<div class="row">
-    {{#each alternativeTitles}}
+    <div class="col-md-12">
-    <span class="label">{{this}}</span>
+        {{#each alternativeTitles}}
-    {{/each}}
+        <span class="label label-default">{{this}}</span>
+        {{/each}}
+    </div>
 </div>

src/UI/Series/Details/SeasonLayoutTemplate.html

@@ -31,7 +31,7 @@
             </div>
         </span>
     </h2>
-    <div class="x-episode-grid"></div>
+    <div class="x-episode-grid table-responsive"></div>
     <div class="show-hide-episodes x-show-hide-episodes">
         <h4>
             {{#if showingEpisodes}}

src/UI/Series/Details/SeriesDetailsTemplate.html

@@ -1,5 +1,5 @@
 <div class="row series-page-header">
-    <div class="col-md-11">
+    <div class="col-md-12">
         <div class="row">
             <h1>
                 <i class="x-monitored" title="Toggle monitored state for entire series"/>
@@ -24,9 +24,7 @@
         <div class="row series-detail-overview">
             {{overview}}
         </div>
-        <div id="info" class="row">
+        <div id="info" class="row series-info"></div>
-
-        </div>
     </div>
 </div>
 <div id="seasons"></div>

src/UI/Series/Edit/EditSeriesView.js

@@ -27,7 +27,6 @@ define(
                 this.model.set('qualityProfiles', QualityProfiles);
             },
 
-
             _saveSeries: function () {
 
                 var self = this;

src/UI/Series/Edit/EditSeriesViewTemplate.html

@@ -1,88 +1,90 @@
-<div class="modal-header">
+<div class="modal-dialog">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <div class="modal-content">
-    <h3>{{title}}</h3>
+        <div class="modal-header">
-</div>
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-<div class="modal-body edit-series-modal">
+            <h3>{{title}}</h3>
-    <div class="row">
-        <div class="col-md-2">
-            <img class="series-poster" src="{{poster}}"
-            {{defaultImg}}>
         </div>
-        <div class="col-md-7">
+        <div class="modal-body edit-series-modal">
-            <div class="form-horizontal">
+            <div class="row">
-
+                <div class="col-sm-3 hidden-xs">
-                <div class="form-group">
+                    <img class="series-poster" src="{{poster}}"
-                    <label class="control-label">Monitored</label>
+                    {{defaultImg}}>
-
-                    <div class="controls">
-                        <label class="checkbox toggle well">
-                            <input type="checkbox" name="monitored"/>
-                            <p>
-                                <span>Yes</span>
-                                <span>No</span>
-                            </p>
-
-                            <div class="btn btn-primary slide-button"/>
-                        </label>
-
-                        <span class="help-inline-checkbox">
-                            <i class="icon-nd-form-info" title="Should NzbDrone download episodes for this series?"/>
-                        </span>
-                    </div>
                 </div>
+                <div class="col-sm-9">
+                    <div class="form-horizontal">
 
-                <div class="form-group">
+                        <div class="form-group">
-                    <label class="control-label">Use Season Folder</label>
+                            <label class="col-sm-4 control-label">Monitored</label>
 
-                    <div class="controls">
+                            <div class="col-sm-8">
-                        <label class="checkbox toggle well">
+                                <div class="input-group">
-                            <input type="checkbox" name="seasonFolder"/>
+                                    <label class="checkbox toggle well">
-                            <p>
+                                        <input type="checkbox" name="monitored"/>
-                                <span>Yes</span>
+                                        <p>
-                                <span>No</span>
+                                            <span>Yes</span>
-                            </p>
+                                            <span>No</span>
+                                        </p>
 
-                            <div class="btn btn-primary slide-button"/>
+                                        <div class="btn btn-primary slide-button"/>
-                        </label>
+                                    </label>
 
-                <span class="help-inline-checkbox">
+                                    <span class="help-inline-checkbox">
-                    <i class="icon-nd-form-info" title="Should downloaded episodes be stored in season folders?"/>
+                                        <i class="icon-nd-form-info" title="Should NzbDrone download episodes for this series?"/>
-                </span>
+                                    </span>
-                    </div>
+                                </div>
-                </div>
+                            </div>
+                        </div>
 
-                <div class="form-group">
+                        <div class="form-group">
-                    <label class="control-label" for="inputQualityProfile">Quality Profile</label>
+                            <label class="col-sm-4 control-label">Use Season Folder</label>
 
-                    <div class="controls">
+                            <div class="col-sm-8">
+                                <div class="input-group">
+                                    <label class="checkbox toggle well">
+                                        <input type="checkbox" name="seasonFolder"/>
+                                        <p>
+                                            <span>Yes</span>
+                                            <span>No</span>
+                                        </p>
 
-                        <select class="x-quality-profile" id="inputQualityProfile" name="qualityProfileId">
+                                        <div class="btn btn-primary slide-button"/>
-                            {{#each qualityProfiles.models}}
+                                    </label>
-                            <option value="{{id}}">{{attributes.name}}</option>
-                            {{/each}}
-                        </select>
-                    <span class="help-inline">
-                        <i class="icon-nd-form-info" title="Which Quality Profile should NzbDrone use to download episodes?"/>
-                    </span>
-                    </div>
-                </div>
 
-                <div class="form-group">
+                                    <span class="help-inline-checkbox">
-                    <label class="control-label" for="inputPath">Path</label>
+                                        <i class="icon-nd-form-info" title="Should downloaded episodes be stored in season folders?"/>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
 
-                    <div class="controls">
+                        <div class="form-group">
-                        <input type="text" id="inputPath" class="x-path" placeholder="Path" name="path">
+                            <label class="col-sm-4 control-label" for="inputQualityProfile">Quality Profile</label>
-                <span class="help-inline">
+
-                    <i class="icon-nd-form-info" title="Where should NzbDrone store episodes for this series?"/>
+                            <div class="col-sm-4">
-                </span>
+                                <select class="form-control x-quality-profile" id="inputQualityProfile" name="qualityProfileId">
+                                    {{#each qualityProfiles.models}}
+                                    <option value="{{id}}">{{attributes.name}}</option>
+                                    {{/each}}
+                                </select>
+
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="col-sm-4 control-label" for="inputPath">Path</label>
+
+                            <div class="col-sm-6">
+                                <input type="text" id="inputPath" class="form-control x-path" placeholder="Path" name="path">
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
+        <div class="modal-footer">
+            <button class="btn btn-danger pull-left x-remove">delete</button>
+            <button class="btn" data-dismiss="modal">cancel</button>
+            <button class="btn btn-primary x-save">save</button>
+        </div>
     </div>
 </div>
-<div class="modal-footer">
-    <button class="btn btn-danger pull-left x-remove">delete</button>
-    <button class="btn" data-dismiss="modal">cancel</button>
-    <button class="btn btn-primary x-save">save</button>
-</div>

src/UI/Series/Editor/Organize/OrganizeFilesViewTemplate.html

@@ -1,23 +1,27 @@
-<div class="modal-header">
+<div class="modal-dialog">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <div class="modal-content">
-    <h3>Organize of Selected Series</h3>
+        <div class="modal-header">
-</div>
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-<div class="modal-body update-files-series-modal">
+            <h3>Organize of Selected Series</h3>
-    <div class="alert alert-info">
+        </div>
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <div class="modal-body update-files-series-modal">
-        Tip: To preview a rename... select "Cancel" then any series title and use the <i data-original-title="" class="icon-nd-rename" title=""></i>
+            <div class="alert alert-info">
+                <button type="button" class="close" data-dismiss="alert">&times;</button>
+                Tip: To preview a rename... select "Cancel" then any series title and use the <i data-original-title="" class="icon-nd-rename" title=""></i>
+            </div>
+
+            Are you sure you want to update all files in the {{numberOfSeries}} selected series?
+
+            {{debug}}
+            <ul class="selected-series">
+                {{#each series}}
+                <li>{{title}}</li>
+                {{/each}}
+            </ul>
+        </div>
+        <div class="modal-footer">
+            <button class="btn" data-dismiss="modal">cancel</button>
+            <button class="btn btn-danger x-confirm-organize">organize</button>
+        </div>
     </div>
-
-    Are you sure you want to update all files in the {{numberOfSeries}} selected series?
-
-    {{debug}}
-    <ul class="selected-series">
-        {{#each series}}
-        <li>{{title}}</li>
-        {{/each}}
-    </ul>
-</div>
-<div class="modal-footer">
-    <button class="btn" data-dismiss="modal">cancel</button>
-    <button class="btn btn-danger x-confirm-organize">organize</button>
 </div>

src/UI/Series/Editor/SeriesEditorFooterViewTemplate.html

@@ -1,22 +1,29 @@
 <div class="series-editor-footer">
     <div class="row">
-        <div class="col-md-2">Monitored</div>
+        <div class="form-group col-md-2">
-        <div class="col-md-2">Quality Profile</div>
+            <label>Monitored</label>
-        <div class="col-md-2">Season Folder</div>
-        <div class="col-md-4">Root Folder</div>
-    </div>
 
-    <div class="row">
+            <select class="form-control x-monitored">
-        <div class="col-md-2">
-            <select class="col-md-2 x-monitored">
                 <option value="noChange">No change</option>
                 <option value="true">Monitored</option>
                 <option value="false">Unmonitored</option>
             </select>
         </div>
 
-        <div class="col-md-2">
+        <div class="form-group col-md-2">
-            <select class="col-md-2 x-quality-profiles">
+            <label>Season Folder</label>
+
+            <select class="form-control x-season-folder">
+                <option value="noChange">No change</option>
+                <option value="true">Yes</option>
+                <option value="false">No</option>
+            </select>
+        </div>
+
+        <div class="form-group col-md-2">
+            <label>Quality Profile</label>
+
+            <select class="form-control x-quality-profiles">
                 <option value="noChange">No change</option>
                 {{#each qualityProfiles.models}}
                     <option value="{{id}}">{{attributes.name}}</option>
@@ -24,28 +31,24 @@
             </select>
         </div>
 
-        <div class="col-md-2">
+        <div class="form-group col-md-3">
-            <select class="col-md-2 x-season-folder">
+            <label>Root Folder</label>
-                <option value="noChange">No change</option>
-                <option value="true">Yes</option>
-                <option value="false">No</option>
-            </select>
-        </div>
 
-        <div class="col-md-3">
+            <select class="form-control x-root-folder" validation-name="RootFolderPath">
-            <select class="col-md-3 x-root-folder" validation-name="RootFolderPath">
                 <option value="noChange">No change</option>
                 {{#each rootFolders}}
-                    <option value="{{id}}">{{path}}</option>
+                <option value="{{id}}">{{path}}</option>
                 {{/each}}
                 <option value="addNew">Add a different path</option>
             </select>
         </div>
 
-        <span class="pull-right">
+        <div class="form-group col-md-3 actions">
-            <span class="selected-count x-selected-count">0  series selected</span>
+            <label class="x-selected-count">0 series selected</label>
-            <button class="btn btn-primary x-save">Save</button>
+            <div>
-            <button class="btn btn-danger x-organize-files">Organize</button>
+                <button class="btn btn-primary x-save">Save</button>
-        </span>
+                <button class="btn btn-danger x-organize-files">Organize</button>
+            </div>
+        </div>
     </div>
 </div>

src/UI/Series/Editor/SeriesEditorLayoutTemplate.html

@@ -2,6 +2,6 @@
 
 <div class="row">
     <div class="col-md-12">
-        <div id="x-series-editor" class="series-"></div>
+        <div id="x-series-editor" class="table-responsive"></div>
     </div>
 </div>

src/UI/Series/Index/EpisodeProgressPartial.html

@@ -1,15 +1,4 @@
-{{#if_eq episodeFileCount compare=episodeCount}}
+<div class="progress episode-progress">
-    {{#if_eq status compare="continuing"}}
-        <div class="progress episode-progress">
-    {{else}}
-        <div class="progress progress-success episode-progress">
-    {{/if_eq}}
-
-{{else}}
-    <div class="progress progress-danger episode-progress">
-{{/if_eq}}
-
     <span class="progressbar-back-text">{{episodeFileCount}} / {{episodeCount}}</span>
-
+    <div class="progress-bar {{EpisodeProgressClass}} episode-progress" style="width:{{percentOfEpisodes}}%"><span class="progressbar-front-text">{{episodeFileCount}} / {{episodeCount}}</span></div>
-    <div class="bar" style="width:{{percentOfEpisodes}}%"><span class="progressbar-front-text">{{episodeFileCount}} / {{episodeCount}}</span></div>
 </div>

src/UI/Series/Index/Overview/SeriesOverviewItemViewTemplate.html

@@ -1,26 +1,26 @@
 <div class="series-item">
     <div class="row">
-        <div class="col-xs-2">
+        <div class="col-md-2 col-xs-3">
             <a href="{{route}}">
                 <img class="series-poster" src="{{poster}}" {{defaultImg}}>
             </a>
         </div>
-        <div class="col-xs-10">
+        <div class="col-md-10 col-xs-9">
             <div class="row">
-                <div class="col-xs-10">
+                <div class="col-md-10 col-xs-10">
                     <a href="{{route}}" target="_blank">
                         <h2>{{title}}</h2>
                     </a>
                 </div>
-                <div class="col-xs-2">
+                <div class="col-md-2 col-xs-2">
-                    <div class="pull-right">
+                    <div class="pull-right series-overview-list-actions">
-                        <i class="icon-cog x-edit" title="Edit Series"/>
+                        <i class="icon-nd-edit x-edit" title="Edit Series"/>
                         <i class="icon-remove x-remove" title="Delete Series"/>
                     </div>
                 </div>
             </div>
             <div class="row">
-                <div class="col-xs-12">
+                <div class="col-md-12 col-xs-12">
                     <a href="{{route}}">
                         <div>
                             {{overview}}
@@ -29,15 +29,15 @@
                 </div>
             </div>
             <div class="row">
-                    <div class="col-xs-12">
+                    <div class="col-md-12">
                         &nbsp;
                     </div>
                 </div>
             <div class="row">
-                <div class="col-xs-10">
+                <div class="col-md-10 col-xs-8">
                     {{#if_eq status compare="continuing"}}
                         {{#if nextAiring}}
-                            <span class="label">{{NextAiring nextAiring}}</span>
+                            <span class="label label-default">{{NextAiring nextAiring}}</span>
                         {{/if}}
                     {{else}}
                         <span class="label label-important">Ended</span>
@@ -47,7 +47,7 @@
 
                     {{qualityProfile qualityProfileId}}
                 </div>
-                <div class="col-xs-2">
+                <div class="col-md-2 col-xs-4">
                     {{> EpisodeProgressPartial }}
                 </div>
             </div>

src/UI/Series/Index/Posters/SeriesPostersItemViewTemplate.html

@@ -2,7 +2,7 @@
     <div class="center">
         <div class="series-poster-container x-series-poster">
             <div class="series-controls">
-                <i class="icon-cog x-edit" title="Edit Series"/>
+                <i class="icon-nd-edit x-edit" title="Edit Series"/>
                 <i class="icon-remove x-remove" title="Delete Series"/>
             </div>
             {{#unless_eq status compare="continuing"}}
@@ -19,7 +19,7 @@
         <div class="labels">
             {{#if_eq status compare="continuing"}}
                 {{#if nextAiring}}
-                    <span class="label label-inverse">{{NextAiring nextAiring}}</span>
+                    <span class="label label-default">{{NextAiring nextAiring}}</span>
                 {{/if}}
             {{/if_eq}}
             {{> EpisodeProgressPartial }}

src/UI/Series/Index/SeriesIndexLayout.js

@@ -96,6 +96,7 @@ define(
             leftSideButtons: {
                 type      : 'default',
                 storeState: false,
+                collapse  : true,
                 items     :
                     [
                         {

src/UI/Series/Index/SeriesIndexLayoutTemplate.html

@@ -4,7 +4,7 @@
 </div>
 
 <div class="row">
-    <div class="col-md-12">
+    <div class="col-md-12 table-responsive">
         <div id="x-series"></div>
     </div>
 </div>

src/UI/Series/series.less

@@ -99,7 +99,7 @@
         left       : 0px;
         width      : 170px;
 
-        .progressbar-front-text {
+        .progressbar-front-text, .progressbar-back-text {
           width : 170px;
         }
       }
@@ -123,6 +123,26 @@
         .opacity(1);
       }
     }
+
+    @media (max-width: @screen-xs-max) {
+      height  : 235px;
+      margin  : 5px;
+      padding : 6px 5px;
+
+      .center {
+        .progress {
+          width : 125px;
+
+          .progressbar-front-text, .progressbar-back-text {
+            width : 125px
+          }
+        }
+      }
+
+      .labels {
+        width: 125px;
+      }
+    }
   }
 
   .series-poster-container {
@@ -180,6 +200,18 @@
       font-size   : 34px;
       line-height : 34px;
     }
+
+    @media (max-width: @screen-xs-max) {
+      .series-poster {
+        width       : 120px;
+        height      : 176px;
+      }
+
+      .ended-banner {
+        top  : 145px;
+        left : -137px;
+      }
+    }
   }
 }
 
@@ -219,12 +251,6 @@
     margin-top : 30px;
     font-size  : 12px;
   }
-
-  .search-buttons {
-    width        : 400px;
-    margin-left  : auto;
-    margin-right : auto;
-  }
 }
 
 .season-grid {
@@ -310,24 +336,22 @@
   }
 }
 
+//Overview List
+.series-overview-list-actions {
+  min-width: 56px;
+  max-width: 56px;
+}
+
 //Editor
 
 .series-editor-footer {
-  width: 1160px;
+  max-width: 1160px;
   color: #f5f5f5;
   margin-left: auto;
   margin-right: auto;
 
-  .selected-count {
+  .form-group {
-    margin-right: 10px;
+    padding-top: 0px;
-  }
-
-  .row {
-    margin-left: -40px;
-  }
-
-  .col-md-2 {
-    width: 160px;
   }
 }
 
@@ -349,3 +373,16 @@
     }
   }
 }
+
+.series-info {
+  .row {
+    margin-bottom: 5px;
+  }
+
+  .series-info-links {
+    @media (max-width: @screen-sm-max) {
+      display    : inline-block;
+      margin-top : 5px;
+    }
+  }
+}

src/UI/Settings/DownloadClient/Add/DownloadClientAddCollectionViewTemplate.html

@@ -1,12 +1,16 @@
-<div class="modal-header">
+<div class="modal-dialog">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <div class="modal-content">
-    <h3>Add Download Client</h3>
+        <div class="modal-header">
-</div>
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-<div class="modal-body">
+            <h3>Add Download Client</h3>
-    <div class="add-download-client add-thingies">
+        </div>
-        <ul class="items"></ul>
+        <div class="modal-body">
+            <div class="add-download-client add-thingies">
+                <ul class="items"></ul>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button class="btn" data-dismiss="modal">close</button>
+        </div>
     </div>
 </div>
-<div class="modal-footer">
-    <button class="btn" data-dismiss="modal">close</button>
-</div>

src/UI/Settings/DownloadClient/Add/DownloadClientAddItemViewTemplate.html

@@ -1,10 +1,6 @@
-<div class="add-thingy col-md-3">
+<div class="add-thingy">
-    <div class="row">
+    {{implementation}}
-        <div class="col-md-3">
+    {{#if link}}
-            {{implementation}}
+        <a href="{{link}}"><i class="icon-info-sign"/></a>
-            {{#if link}}
+    {{/if}}
-                <a href="{{link}}"><i class="icon-info-sign"/></a>
-            {{/if}}
-        </div>
-    </div>
 </div>

src/UI/Settings/DownloadClient/Delete/DownloadClientDeleteViewTemplate.html

@@ -1,11 +1,15 @@
-<div class="modal-header">
+<div class="modal-dialog">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <div class="modal-content">
-    <h3>Delete Download Client</h3>
+        <div class="modal-header">
-</div>
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-<div class="modal-body">
+            <h3>Delete Download Client</h3>
-    <p>Are you sure you want to delete '{{name}}'?</p>
+        </div>
-</div>
+        <div class="modal-body">
-<div class="modal-footer">
+            <p>Are you sure you want to delete '{{name}}'?</p>
-    <button class="btn" data-dismiss="modal">cancel</button>
+        </div>
-    <button class="btn btn-danger x-confirm-delete">delete</button>
+        <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>

src/UI/Settings/DownloadClient/DownloadClientCollectionViewTemplate.html

@@ -2,7 +2,7 @@
     <legend>Download Clients</legend>
     <div class="row">
         <div class="col-md-12">
-            <ul id="x-download-clients" class="download-client-list">
+            <ul id="x-download-clients" class="download-client-list thingies">
                 <li>
                     <div class="download-client-item thingy add-card x-add-card">
                         <span class="center well">

src/UI/Settings/DownloadClient/DownloadClientItemView.js

@@ -4,17 +4,15 @@ define(
     [
         'AppLayout',
         'marionette',
-        'Settings/DownloadClient/Edit/DownloadClientEditView',
+        'Settings/DownloadClient/Edit/DownloadClientEditView'
-        'Settings/DownloadClient/Delete/DownloadClientDeleteView'
+    ], function (AppLayout, Marionette, EditView) {
-    ], function (AppLayout, Marionette, EditView, DeleteView) {
 
         return Marionette.ItemView.extend({
             template: 'Settings/DownloadClient/DownloadClientItemViewTemplate',
             tagName : 'li',
 
             events: {
-                'click .x-edit'   : '_edit',
+                'click'   : '_edit'
-                'click .x-delete' : '_delete'
             },
 
             initialize: function () {
@@ -24,11 +22,6 @@ define(
             _edit: function () {
                 var view = new EditView({ model: this.model, downloadClientCollection: this.model.collection });
                 AppLayout.modalRegion.show(view);
-            },
-
-            _delete: function () {
-                var view = new DeleteView({ model: this.model});
-                AppLayout.modalRegion.show(view);
             }
         });
     });

src/UI/Settings/DownloadClient/DownloadClientItemViewTemplate.html

@@ -1,17 +1,13 @@
-<div class="download-client-item thingy">
+<div class="download-client-item thingy" title="Click to edit">
     <div>
         <h3>{{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>
 
     <div class="settings">
         {{#if enable}}
             <span class="label label-success">Enabled</span>
         {{else}}
-            <span class="label">Not Enabled</span>
+            <span class="label label-default">Not Enabled</span>
         {{/if}}
     </div>
 </div>

src/UI/Settings/DownloadClient/Edit/DownloadClientEditViewTemplate.html

@@ -1,59 +1,65 @@
-<div class="modal-header">
+<div class="modal-dialog">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <div class="modal-content">
-    {{#if id}}
+        <div class="modal-header">
-        <h3>Edit - {{implementation}}</h3>
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    {{else}}
+            {{#if id}}
-        <h3>Add - {{implementation}}</h3>
+                <h3>Edit - {{implementation}}</h3>
-    {{/if}}
+            {{else}}
-</div>
+                <h3>Add - {{implementation}}</h3>
-<div class="modal-body download-client-modal">
+            {{/if}}
-    <div class="form-horizontal">
+        </div>
-        <div class="form-group">
+        <div class="modal-body download-client-modal">
-            <label class="control-label">Name</label>
+            <div class="form-horizontal">
+                <div class="form-group">
+                    <label class="col-sm-3 control-label">Name</label>
 
-            <div class="controls">
+                    <div class="col-sm-5">
-                <input type="text" name="name"/>
+                        <input type="text" name="name" class="form-control"/>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="col-sm-3 control-label">Enable</label>
+
+                    <div class="col-sm-5">
+                        <div class="input-group">
+                            <label class="checkbox toggle well">
+                                <input type="checkbox" name="enable"/>
+                                <p>
+                                    <span>Yes</span>
+                                    <span>No</span>
+                                </p>
+
+                                <div class="btn btn-primary slide-button"/>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
+                {{formBuilder}}
             </div>
         </div>
+        <div class="modal-footer">
+            {{#if id}}
+                <button class="btn btn-danger pull-left x-delete">delete</button>
+            {{else}}
+                <button class="btn pull-left x-back">back</button>
+            {{/if}}
 
-        <div class="form-group">
+            <button class="btn x-test">test <i class="x-test-icon icon-nd-test"/></button>
-            <label class="control-label">Enable</label>
+            <button class="btn" data-dismiss="modal">cancel</button>
 
-            <div class="controls">
+            <div class="btn-group">
-                <label class="checkbox toggle well">
+                <button class="btn btn-primary x-save">save</button>
-                    <input type="checkbox" name="enable"/>
+                <button class="btn btn-icon-only btn-primary dropdown-toggle" data-toggle="dropdown">
-                    <p>
+                    <span class="caret"></span>
-                        <span>Yes</span>
+                </button>
-                        <span>No</span>
+                <ul class="dropdown-menu">
-                    </p>
+                    <li class="save-and-add x-save-and-add">
-
+                        save and add
-                    <div class="btn btn-primary slide-button"/>
+                    </li>
-                </label>
+                </ul>
             </div>
         </div>
-
-        {{formBuilder}}
-    </div>
-</div>
-<div class="modal-footer">
-    {{#if id}}
-        <button class="btn btn-danger pull-left x-delete">delete</button>
-    {{else}}
-        <button class="btn pull-left x-back">back</button>
-    {{/if}}
-
-    <button class="btn x-test">test <i class="x-test-icon icon-nd-test"/></button>
-    <button class="btn" data-dismiss="modal">cancel</button>
-
-    <div class="btn-group">
-        <button class="btn btn-primary x-save">save</button>
-        <button class="btn btn-icon-only btn-primary dropdown-toggle" data-toggle="dropdown">
-            <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu">
-            <li class="save-and-add x-save-and-add">
-                save and add
-            </li>
-        </ul>
     </div>
 </div>

src/UI/Settings/DownloadClient/FailedDownloadHandling/FailedDownloadHandlingViewTemplate.html

@@ -2,99 +2,105 @@
     <legend>Failed Download Handling</legend>
 
     <div class="form-group">
-        <label class="control-label">Enable</label>
+        <label class="col-sm-3 control-label">Enable</label>
 
-        <div class="controls">
+        <div class="col-sm-8">
-            <label class="checkbox toggle well">
+            <div class="input-group">
-                <input type="checkbox" name="enableFailedDownloadHandling" class="x-failed-download-handling"/>
+                <label class="checkbox toggle well">
-                <p>
+                    <input type="checkbox" name="enableFailedDownloadHandling" class="x-failed-download-handling"/>
-                    <span>Yes</span>
+                    <p>
-                    <span>No</span>
+                        <span>Yes</span>
-                </p>
+                        <span>No</span>
+                    </p>
 
-                <div class="btn btn-primary slide-button"/>
+                    <div class="btn btn-primary slide-button"/>
-            </label>
+                </label>
 
-            <span class="help-inline-checkbox">
+                <span class="help-inline-checkbox">
-                <i class="icon-nd-form-info" title="Process failed downloads and blacklist the release"/>
+                    <i class="icon-nd-form-info" title="Process failed downloads and blacklist the release"/>
-            </span>
+                </span>
+            </div>
         </div>
     </div>
 
     <div class="x-failed-download-options">
         <div class="form-group">
-            <label class="control-label">Redownload</label>
+            <label class="col-sm-3 control-label">Redownload</label>
 
-            <div class="controls">
+            <div class="col-sm-8">
-                <label class="checkbox toggle well">
+                <div class="input-group">
-                    <input type="checkbox" name="autoRedownloadFailed"/>
+                    <label class="checkbox toggle well">
-                    <p>
+                        <input type="checkbox" name="autoRedownloadFailed"/>
-                        <span>Yes</span>
+                        <p>
-                        <span>No</span>
+                            <span>Yes</span>
-                    </p>
+                            <span>No</span>
+                        </p>
 
-                    <div class="btn btn-primary slide-button"/>
+                        <div class="btn btn-primary slide-button"/>
-                </label>
+                    </label>
 
-                <span class="help-inline-checkbox">
+                    <span class="help-inline-checkbox">
-                    <i class="icon-nd-form-info" title="Automatically search for and attempt to download another release when a download fails?"/>
+                        <i class="icon-nd-form-info" title="Automatically search for and attempt to download another release when a download fails?"/>
-                </span>
+                    </span>
+                </div>
             </div>
         </div>
 
         <div class="form-group">
-            <label class="control-label">Remove</label>
+            <label class="col-sm-3 control-label">Remove</label>
 
-            <div class="controls">
+            <div class="col-sm-8">
-                <label class="checkbox toggle well">
+                <div class="input-group">
-                    <input type="checkbox" name="removeFailedDownloads"/>
+                    <label class="checkbox toggle well">
-                    <p>
+                        <input type="checkbox" name="removeFailedDownloads"/>
-                        <span>Yes</span>
+                        <p>
-                        <span>No</span>
+                            <span>Yes</span>
-                    </p>
+                            <span>No</span>
+                        </p>
 
-                    <div class="btn btn-primary slide-button"/>
+                        <div class="btn btn-primary slide-button"/>
-                </label>
+                    </label>
 
-                <span class="help-inline-checkbox">
+                    <span class="help-inline-checkbox">
-                    <i class="icon-nd-form-info" title="Automatically remove failed downloads from history and encrypted downloads from queue?"/>
+                        <i class="icon-nd-form-info" title="Automatically remove failed downloads from history and encrypted downloads from queue?"/>
-                </span>
+                    </span>
+                </div>
             </div>
         </div>
 
-        <div class="control-group advanced-setting">
+        <div class="form-group advanced-setting">
-            <label class="control-label">Grace Period</label>
+            <label class="col-sm-3 control-label">Grace Period</label>
 
-            <div class="controls">
+            <div class="col-sm-1 col-sm-push-2 help-inline">
-                <input type="number" min="1" max="24" name="blacklistGracePeriod"/>
-
-            <span class="help-inline">
                 <i class="icon-nd-form-info" title="Age in hours that a release will remain in the download client and retried"/>
-            </span>
+            </div>
+
+            <div class="col-sm-2 col-sm-pull-1">
+                <input type="number" min="1" max="24" name="blacklistGracePeriod" class="form-control"/>
             </div>
         </div>
 
-        <div class="control-group advanced-setting">
+        <div class="form-group advanced-setting">
-            <label class="control-label">Retry Interval</label>
+            <label class="col-sm-3 control-label">Retry Interval</label>
 
-            <div class="controls">
+            <div class="col-sm-1 col-sm-push-2 help-inline">
-                <input type="number" min="5" max="120" name="blacklistRetryInterval"/>
-
-            <span class="help-inline">
                 <i class="icon-nd-form-info" title="Time in minutes before a failed download for a recent release will be retried"/>
-            </span>
+            </div>
+
+            <div class="col-sm-2 col-sm-pull-1">
+                <input type="number" min="5" max="120" name="blacklistRetryInterval" class="form-control"/>
             </div>
         </div>
 
-        <div class="control-group advanced-setting">
+        <div class="form-group advanced-setting">
-            <label class="control-label">Retry Count</label>
+            <label class="col-sm-3 control-label">Retry Count</label>
 
-            <div class="controls">
+            <div class="col-sm-1 col-sm-push-2 help-inline">
-                <input type="number" min="0" max="10" name="blacklistRetryLimit"/>
-
-            <span class="help-inline">
                 <i class="icon-nd-form-info" title="Number of times to retry a release before it is blacklisted"/>
-            </span>
+            </div>
+
+            <div class="col-sm-2 col-sm-pull-1">
+                <input type="number" min="0" max="10" name="blacklistRetryLimit" class="form-control"/>
             </div>
         </div>
     </div>

src/UI/Settings/DownloadClient/Options/DownloadClientOptionsViewTemplate.html

@@ -1,26 +1,28 @@
-<fieldset">
+<fieldset>
     <legend>Options</legend>
     <div class="form-group">
-        <label class="control-label">Drone Factory</label>
+        <label class="col-sm-3 control-label">Drone Factory</label>
 
-        <div class="controls">
+        <div class="col-sm-1 col-sm-push-8 help-inline">
-            <input type="text" name="downloadedEpisodesFolder" class="x-path"/>
+            <i class="icon-nd-form-info" title="The folder where your download client downloads TV shows to (Completed Download Directory)"/>
-            <span class="help-inline">
+            <i class="icon-nd-form-warning" title="Do not use the folder that contains some or all of your sorted and named TV shows - doing so could cause data loss"></i>
-                <i class="icon-nd-form-info" title="The folder where your download client downloads TV shows to (Completed Download Directory)"/>
+        </div>
-                <i class="icon-nd-form-warning" title="Do not use the folder that contains some or all of your sorted and named TV shows - doing so could cause data loss"></i>
+
-            </span>
+        <div class="col-sm-8 col-sm-pull-1">
+            <input type="text" name="downloadedEpisodesFolder" class="form-control x-path" />
         </div>
     </div>
 
     <div class="form-group advanced-setting">
-        <label class="control-label">Drone Factory Interval</label>
+        <label class="col-sm-3 control-label">Drone Factory Interval</label>
 
-        <div class="controls">
+        <div class="col-sm-1 col-sm-push-2 help-inline">
-            <input type="number" name="downloadedEpisodesScanInterval"/>
+            <i class="icon-nd-form-info" title="Interval in minutes to scan the Drone Factory. Set to zero to disable."/>
-                <span class="help-inline">
+            <i class="icon-nd-form-warning" title="Setting a high interval or disabling scanning will prevent episodes from being imported."></i>
-                    <i class="icon-nd-form-info" title="Interval in minutes to scan the Drone Factory. Set to zero to disable."/>
+        </div>
-                    <i class="icon-nd-form-warning" title="Setting a high interval or disabling scanning will prevent episodes from being imported."></i>
+
-                </span>
+        <div class="col-sm-2 col-sm-pull-1">
+            <input type="number" name="downloadedEpisodesScanInterval" class="form-control" />
         </div>
     </div>
 </fieldset>

src/UI/Settings/DownloadClient/downloadclient.less

@@ -1,3 +1,5 @@
+@import "../../Shared/Styles/clickable.less";
+
 .download-client-list {
   li {
     display: inline-block;
@@ -7,17 +9,15 @@
 
 .download-client-item {
 
+  .clickable;
+
   width: 290px;
   height: 90px;
   padding: 10px 15px;
 
-  h3 {
-    width: 230px;
-  }
-
   &.add-card {
     .center {
-      margin-top: 15px;
+      margin-top: -3px;
     }
   }
 }
@@ -25,3 +25,9 @@
 .modal-overflow {
   overflow-y: visible;
 }
+
+.add-download-client {
+  li {
+    width: 33%;
+  }
+}

src/UI/Settings/General/GeneralViewTemplate.html

@@ -3,87 +3,93 @@
         <legend>Start-Up</legend>
 
         <div class="form-group">
-            <label class="control-label">Port Number</label>
+            <label class="col-sm-3 control-label">Port Number</label>
 
-            <div class="controls">
+            <div class="col-sm-1 col-sm-push-4 help-inline">
-                <input type="number" placeholder="8989" name="port"/>
+                <i class="icon-nd-form-warning" title="Requires restart to take effect"/>
-                <span>
+            </div>
-                    <i class="icon-nd-form-warning" title="Requires restart to take effect"/>
+
-                </span>
+            <div class="col-sm-4 col-sm-pull-1">
+                <input type="number" placeholder="8989" name="port" class="form-control"/>
             </div>
         </div>
 
         <div class="form-group">
-            <label class="control-label">URL Base</label>
+            <label class="col-sm-3 control-label">URL Base</label>
 
-            <div class="controls">
+            <div class="col-sm-1 col-sm-push-4 help-inline">
-                <input type="text" name="urlBase"/>
+                <i class="icon-nd-form-warning" title="Requires restart to take effect"/>
-                <span>
+                <i class="icon-nd-form-info" title="For reverse proxy support, default is empty"/>
-                    <i class="icon-nd-form-warning" title="Requires restart to take effect"/>
+            </div>
-                    <i class="icon-nd-form-info" title="For reverse proxy support, default is empty"/>
+
-                </span>
+            <div class="col-sm-4 col-sm-pull-1">
+                <input type="text" name="urlBase" class="form-control"/>
             </div>
         </div>
 
         <div class="form-group advanced-setting">
-            <label class="control-label">Enable SSL</label>
+            <label class="col-sm-3 control-label">Enable SSL</label>
 
-            <div class="controls">
+            <div class="col-sm-8">
-                <label class="checkbox toggle well">
+                <div class="input-group">
-                    <input type="checkbox" name="enableSsl" class="x-ssl"/>
+                    <label class="checkbox toggle well">
+                        <input type="checkbox" name="enableSsl" class="x-ssl"/>
 
-                    <p>
+                        <p>
-                        <span>Yes</span>
+                            <span>Yes</span>
-                        <span>No</span>
+                            <span>No</span>
-                    </p>
+                        </p>
 
-                    <div class="btn btn-primary slide-button"/>
+                        <div class="btn btn-primary slide-button"/>
-                </label>
+                    </label>
 
-                <span class="help-inline-checkbox">
+                    <span class="help-inline-checkbox">
-                    <i class="icon-nd-form-warning" title="Requires restart running as administrator to take effect"/>
+                        <i class="icon-nd-form-warning" title="Requires restart running as administrator to take effect"/>
-                </span>
+                    </span>
+                </div>
             </div>
         </div>
 
         <div class="x-ssl-options">
             <div class="form-group advanced-setting">
-                <label class="control-label">SSL Port Number</label>
+                <label class="col-sm-3 control-label">SSL Port Number</label>
 
-                <div class="controls">
+                <div class="col-sm-4">
-                    <input type="number" placeholder="8989" name="sslPort"/>
+                    <input type="number" placeholder="8989" name="sslPort" class="form-control"/>
                 </div>
             </div>
 
             {{#if_windows}}
             <div class="form-group advanced-setting">
-                <label class="control-label">SSL Cert Hash</label>
+                <label class="col-sm-3 control-label">SSL Cert Hash</label>
 
-                <div class="controls">
+                <div class="col-sm-4">
-                    <input type="text" name="sslCertHash"/>
+                    <input type="text" name="sslCertHash" class="form-control"/>
                 </div>
             </div>
             {{/if_windows}}
         </div>
 
         <div class="form-group">
-            <label class="control-label">Open browser on start</label>
+            <label class="col-sm-3 control-label">Open browser on start</label>
 
-            <div class="controls">
+            <div class="col-sm-8">
-                <label class="checkbox toggle well">
+                <div class="input-group">
-                    <input type="checkbox" name="launchBrowser"/>
+                    <label class="checkbox toggle well">
+                        <input type="checkbox" name="launchBrowser" class="form-control"/>
 
-                    <p>
+                        <p>
-                        <span>Yes</span>
+                            <span>Yes</span>
-                        <span>No</span>
+                            <span>No</span>
-                    </p>
+                        </p>
 
-                    <div class="btn btn-primary slide-button"/>
+                        <div class="btn btn-primary slide-button"/>
-                </label>
+                    </label>
 
-                <span class="help-inline-checkbox">
+                    <span class="help-inline-checkbox">
-                    <i class="icon-nd-form-info" title="Open a web browser and navigate to NzbDrone homepage on app start. Has no effect if installed as a windows service"/>
+                        <i class="icon-nd-form-info" title="Open a web browser and navigate to NzbDrone homepage on app start. Has no effect if installed as a windows service"/>
-                </span>
+                    </span>
+                </div>
             </div>
         </div>
     </fieldset>
@@ -91,49 +97,59 @@
     <fieldset>
         <legend>Security</legend>
         <div class="form-group">
-            <label class="control-label">Authentication</label>
+            <label class="col-sm-3 control-label">Authentication</label>
-            <div class="controls">
-                <label class="checkbox toggle well">
-                    <input type="checkbox" class='x-auth' name="authenticationEnabled"/>
-                    <p>
-                        <span>On</span>
-                        <span>Off</span>
-                    </p>
-                    <div class="btn btn-primary slide-button"/>
-                </label>
 
-            <span class="help-inline-checkbox">
+            <div class="col-sm-8">
-                <i class="icon-nd-form-info" title="Require Username and Password to access Nzbdrone"/>
+                <div class="input-group">
-            </span>
+                    <label class="checkbox toggle well">
-            </div>
+                        <input type="checkbox" class='x-auth' name="authenticationEnabled"/>
-        </div>
+                        <p>
-        <div class='x-auth-options'>
+                            <span>On</span>
-            <div class="form-group">
+                            <span>Off</span>
-                <label class="control-label">Username</label>
+                        </p>
-                <div class="controls">
+                        <div class="btn btn-primary slide-button"/>
-                    <input type="text" placeholder="Username" name="username"/>
+                    </label>
+
+                    <span class="help-inline-checkbox">
+                        <i class="icon-nd-form-info" title="Require Username and Password to access Nzbdrone"/>
+                    </span>
                 </div>
             </div>
+        </div>
+
+        <div class='x-auth-options'>
             <div class="form-group">
-                <label class="control-label">Password</label>
+                <label class="col-sm-3 control-label">Username</label>
-                <div class="controls">
+
-                    <input type="password" name="password"/>
+                <div class="col-sm-4">
+                    <input type="text" placeholder="Username" name="username" class="form-control"/>
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label class="col-sm-3 control-label">Password</label>
+
+                <div class="col-sm-4">
+                    <input type="password" name="password" class="form-control"/>
                 </div>
             </div>
         </div>
 
         <div class="form-group api-key">
-            <label class="control-label">API Key</label>
+            <label class="col-sm-3 control-label">API Key</label>
-            <div class="controls">
-                <div class="input-group">
-                    <input type="text" name="apiKey" readonly="readonly" class="x-api-key"/>
-                    <button class="btn btn-icon-only x-copy-api-key" title="Copy to clipboard"><i class="icon-copy"></i></button>
-                    <button class="btn btn-danger btn-icon-only x-reset-api-key" title="Reset API Key"><i class="icon-refresh"></i></button>
-                </div>
 
-                <span>
+            <div class="col-sm-1 col-sm-push-4 help-inline">
-                    <i class="icon-nd-form-warning" title="Requires restart to take effect"/>
+                <i class="icon-nd-form-warning" title="Requires restart to take effect"/>
-                </span>
+            </div>
+
+            <div class="col-sm-4 col-sm-pull-1">
+                <div class="input-group">
+                    <input type="text" name="apiKey" readonly="readonly" class="form-control x-api-key"/>
+                    <div class="input-group-btn">
+                        <button class="btn btn-icon-only x-copy-api-key hidden-xs"><i class="icon-copy"></i></button>
+                        <button class="btn btn-danger btn-icon-only x-reset-api-key" title="Reset API Key" data-container="body"><i class="icon-refresh"></i></button>
+                    </div>
+                </div>
             </div>
         </div>
     </fieldset>
@@ -142,33 +158,31 @@
         <legend>Logging</legend>
 
         <div class="form-group">
-            <label class="control-label">Log Level</label>
+            <label class="col-sm-3 control-label">Log Level</label>
 
-            <div class="controls">
+            <div class="col-sm-1 col-sm-push-2 help-inline">
-                <select name="logLevel">
+                <i class="icon-nd-form-warning" title="Trace and Debug logging should only be enabled temporarily"/>
+            </div>
+
+            <div class="col-sm-2 col-sm-pull-1">
+                <select name="logLevel" class="form-control">
                     <option value="Trace">Trace</option>
                     <option value="Debug">Debug</option>
                     <option value="Info">Info</option>
                 </select>
-
-                <span>
-                    <i class="icon-nd-form-warning" title="Trace and Debug logging should only be enabled temporarily"/>
-                </span>
             </div>
         </div>
     </fieldset>
 
+    {{#if_windows}}
     <fieldset class="advanced-setting">
         <legend>Development</legend>
-        <div class="alert">
-            <i class="icon-nd-warning"></i>
-            Don't change anything here unless you know what you are doing.
-        </div>
-        <div class="form-group">
-            <label class="control-label">Branch</label>
 
-            <div class="controls">
+        <div class="form-group">
-                <input type="text" placeholder="master" name="branch"/>
+            <label class="col-sm-3 control-label">Branch</label>
+
+            <div class="col-sm-4">
+                <input type="text" placeholder="master" name="branch" class="form-control"/>
             </div>
         </div>
 
@@ -195,4 +209,5 @@
         <!--</div>-->
         <!--{{/if_mono}}-->
     </fieldset>
+    {{/if_windows}}
 </div>

src/UI/Settings/Indexers/DeleteViewTemplate.html

@@ -1,11 +1,15 @@
-<div class="modal-header">
+<div class="modal-dialog">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <div class="modal-content">
-    <h3>Delete Indexer</h3>
+        <div class="modal-header">
-</div>
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-<div class="modal-body">
+            <h3>Delete Indexer</h3>
-    <p>Are you sure you want to delete '{{name}}'?</p>
+        </div>
-</div>
+        <div class="modal-body">
-<div class="modal-footer">
+            <p>Are you sure you want to delete '{{name}}'?</p>
-    <button class="btn" data-dismiss="modal">cancel</button>
+        </div>
-    <button class="btn btn-danger x-confirm-delete">delete</button>
+        <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>

src/UI/Settings/Indexers/EditTemplate.html

@@ -1,58 +1,64 @@
-<div class="modal-header">
+<div class="modal-dialog">
-    <button type="button" class="close x-cancel"aria-hidden="true">&times;</button>
+    <div class="modal-content">
-    {{#if id}}
+        <div class="modal-header">
-        <h3>Edit</h3>
+            <button type="button" class="close x-cancel"aria-hidden="true">&times;</button>
-    {{else}}
+            {{#if id}}
-        <h3>Add Newznab</h3>
+                <h3>Edit</h3>
-    {{/if}}
+            {{else}}
-</div>
+                <h3>Add Newznab</h3>
-<div class="modal-body">
+            {{/if}}
-    <div class="form-horizontal">
+        </div>
-        <div class="form-group">
+        <div class="modal-body">
-            <label class="control-label">Name</label>
+            <div class="form-horizontal">
+                <div class="form-group">
+                    <label class="col-sm-3 control-label">Name</label>
 
-            <div class="controls">
+                    <div class="col-sm-5">
-                <input type="text" name="name"/>
+                        <input type="text" name="name" class="form-control"/>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="col-sm-3 control-label">Enable</label>
+
+                    <div class="col-sm-5">
+                        <div class="input-group">
+                            <label class="checkbox toggle well">
+                                <input type="checkbox" name="enable"/>
+                                <p>
+                                    <span>Yes</span>
+                                    <span>No</span>
+                                </p>
+
+                                <div class="btn btn-primary slide-button"/>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
+                {{formBuilder}}
             </div>
         </div>
+        <div class="modal-footer">
+            {{#if id}}
+                <button class="btn btn-danger pull-left x-remove">delete</button>
+            {{/if}}
 
-        <div class="form-group">
+            <span class="x-activity"></span>
-            <label class="control-label">Enable</label>
 
-            <div class="controls">
+            <button class="btn x-cancel">cancel</button>
-                <label class="checkbox toggle well">
-                    <input type="checkbox" name="enable"/>
-                    <p>
-                        <span>Yes</span>
-                        <span>No</span>
-                    </p>
 
-                    <div class="btn btn-primary slide-button"/>
+            <div class="btn-group">
-                </label>
+                <button class="btn btn-primary x-save">save</button>
+                <button class="btn btn-icon-only btn-primary dropdown-toggle" data-toggle="dropdown">
+                    <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu">
+                    <li class="save-and-add x-save-and-add">
+                        save and add
+                    </li>
+                </ul>
             </div>
         </div>
-
-        {{formBuilder}}
-    </div>
-</div>
-<div class="modal-footer">
-    {{#if id}}
-        <button class="btn btn-danger pull-left x-remove">delete</button>
-    {{/if}}
-
-    <span class="x-activity"></span>
-
-    <button class="btn x-cancel">cancel</button>
-
-    <div class="btn-group">
-        <button class="btn btn-primary x-save">save</button>
-        <button class="btn btn-icon-only btn-primary dropdown-toggle" data-toggle="dropdown">
-            <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu">
-            <li class="save-and-add x-save-and-add">
-                save and add
-            </li>
-        </ul>
     </div>
 </div>

src/UI/Settings/Indexers/ItemTemplate.html

@@ -13,7 +13,7 @@
     <div class="form-group">
         <label class="control-label">Enable</label>
 
-        <div class="controls">
+        <div class="input-group">
             <label class="checkbox toggle well">
                 <input type="checkbox" name="enable"/>
                 <p>

src/UI/Settings/Indexers/Options/IndexerOptionsViewTemplate.html

@@ -2,37 +2,36 @@
     <legend>Options</legend>
 
     <div class="form-group">
-        <label class="control-label">Retention</label>
+        <label class="col-sm-3 control-label">Retention</label>
 
-        <div class="controls">
+        <div class="col-sm-2">
-            <input type="number" min="0" name="retention"/>
+            <input type="number" min="0" name="retention" class="form-control"/>
         </div>
     </div>
 
     <div class="form-group advanced-setting">
-        <label class="control-label">RSS Sync Interval</label>
+        <label class="col-sm-3 control-label">RSS Sync Interval</label>
 
-        <div class="controls">
+        <div class="col-sm-1 col-sm-push-2 help-inline">
-            <input type="number" name="rssSyncInterval"/>
+            <i class="icon-nd-form-warning" title="This will apply to all indexers, please follow the rules set forth by them"/>
+            <i class="icon-nd-form-info" title="Set to zero to disable (this will stop all automatic release grabbing)"/>
+        </div>
 
-            <span class="help-inline">
+        <div class="col-sm-2 col-sm-pull-1">
-                <i class="icon-nd-form-warning" title="This will apply to all indexers, please follow the rules set forth by them"/>
+            <input type="number" name="rssSyncInterval" class="form-control"/>
-                <i class="icon-nd-form-info" title="Set to zero to disable (this will stop all automatic release grabbing)"/>
-            </span>
         </div>
     </div>
 
     <div class="form-group advanced-setting">
-        <label class="control-label">Release Restrictions</label>
+        <label class="col-sm-3 control-label">Release Restrictions</label>
 
-        <div class="controls">
+        <div class="col-sm-1 col-sm-push-4 help-inline help-inline-text-area">
-            <textarea rows="3" name="releaseRestrictions" class="release-restrictions"></textarea>
+            <i class="icon-nd-form-info" title="Blacklist NZBs based on these words (case-insensitive)"/>
+        </div>
 
-            <span class="help-inline">
+        <div class="col-sm-4 col-sm-pull-1">
-                <i class="icon-nd-form-info" title="Blacklist NZBs based on these words (case-insensitive)"/>
+            <textarea rows="3" name="releaseRestrictions" class="form-control release-restrictions"></textarea>
-            </span>
+            <div class="text-area-help">Newline-delimited set of rules</div>
-
-            <span class="text-area-help">Newline-delimited set of rules</span>
         </div>
     </div>
 </fieldset>

src/UI/Settings/Indexers/indexers.less

@@ -1,16 +1,29 @@
 .indexer-settings-item {
 
   width: 220px;
-  height: 260px;
+  height: 295px;
   padding: 10px 15px;
 
   h3 {
-    width: 190px;
+    width: 175px;
+    overflow: visible;
   }
 
   &.add-card {
+    margin-top: 10px;
+    margin-left: 10px;
+
     .center {
-      margin-top: 100px;
+      margin-top: 90px;
     }
   }
+
+  /* Super hack to keep using form builder, this should be dead when we do proper modals for editing */
+  .col-sm-1, .col-sm-3, .col-sm-5 {
+    display : block;
+    width   : 100%;
+    padding: 0px;
+    float: none;
+    position: inherit;
+  }
 }

src/UI/Settings/MediaManagement/FileManagement/FileManagementViewTemplate.html

@@ -2,68 +2,74 @@
     <legend>File Management</legend>
 
     <div class="form-group">
-        <label class="control-label">Ignore Deleted Episodes</label>
+        <label class="col-sm-3 control-label">Ignore Deleted Episodes</label>
 
-        <div class="controls">
+        <div class="col-sm-9">
-            <label class="checkbox toggle well">
+            <div class="input-group">
-                <input type="checkbox" name="autoUnmonitorPreviouslyDownloadedEpisodes"/>
+                <label class="checkbox toggle well">
-                <p>
+                    <input type="checkbox" name="autoUnmonitorPreviouslyDownloadedEpisodes"/>
-                    <span>Yes</span>
+                    <p>
-                    <span>No</span>
+                        <span>Yes</span>
-                </p>
+                        <span>No</span>
+                    </p>
 
-                <div class="btn btn-primary slide-button"/>
+                    <div class="btn btn-primary slide-button"/>
-            </label>
+                </label>
 
-            <span class="help-inline-checkbox">
+                <span class="help-inline-checkbox">
-                <i class="icon-nd-form-info" title="Episodes deleted from disk are automatically unmonitored in NzbDrone"/>
+                    <i class="icon-nd-form-info" title="Episodes deleted from disk are automatically unmonitored in NzbDrone"/>
-            </span>
+                </span>
-        </div>
+            </div>
-    </div>
-
-    <div class="form-group">
-        <label class="control-label">Download Propers</label>
-
-        <div class="controls">
-            <label class="checkbox toggle well">
-                <input type="checkbox" name="autoDownloadPropers"/>
-                <p>
-                    <span>Yes</span>
-                    <span>No</span>
-                </p>
-
-                <div class="btn btn-primary slide-button"/>
-            </label>
-
-            <span class="help-inline-checkbox">
-                <i class="icon-nd-form-info" title="Should NzbDrone automatically upgrade to propers when available?"/>
-            </span>
-        </div>
-    </div>
-
-    <div class="form-group">
-        <label class="control-label">Recycling Bin</label>
-
-        <div class="controls">
-            <input type="text" name="recycleBin" class="x-path"/>
-            <span class="help-inline">
-                <i class="icon-nd-form-info" title="Episode files will go here when deleted instead of being permanently deleted"/>
-            </span>
         </div>
     </div>
 
     <div class="form-group advanced-setting">
-        <label class="control-label">Change File Date</label>
+        <label class="col-sm-3 control-label">Download Propers</label>
 
-        <div class="controls">
+        <div class="col-sm-9">
-            <select class="inputClass" name="fileDate">
+            <div class="input-group">
+                <label class="checkbox toggle well">
+                    <input type="checkbox" name="autoDownloadPropers"/>
+                    <p>
+                        <span>Yes</span>
+                        <span>No</span>
+                    </p>
+
+                    <div class="btn btn-primary slide-button"/>
+                </label>
+
+                <span class="help-inline-checkbox">
+                    <i class="icon-nd-form-info" title="Should NzbDrone automatically upgrade to propers when available?"/>
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-group advanced-setting">
+        <label class="col-sm-3 control-label">Change File Date</label>
+
+        <div class="col-sm-1 col-sm-push-2 help-inline">
+            <i class="icon-nd-form-info" title="Change file date on import/rescan"/>
+        </div>
+        
+        <div class="col-sm-2 col-sm-pull-1">
+            <select class="form-control" name="fileDate">
                 <option value="none">None</option>
                 <option value="localAirDate">Local Air Date</option>
                 <option value="utcAirDate">UTC Air Date</option>
             </select>
-            <span class="help-inline">
+        </div>
-                <i class="icon-nd-form-info" title="Change file date on import/rescan"/>
+    </div>
-            </span>
+
+    <div class="form-group">
+        <label class="col-sm-3 control-label">Recycling Bin</label>
+
+        <div class="col-sm-1 col-sm-push-8 help-inline">
+            <i class="icon-nd-form-info" title="Episode files will go here when deleted instead of being permanently deleted"/>
+        </div>
+
+        <div class="col-sm-8 col-sm-pull-1">
+            <input type="text" name="recycleBin" class="form-control x-path"/>
         </div>
     </div>
 </fieldset>

src/UI/Settings/MediaManagement/Naming/Basic/BasicNamingViewTemplate.html

@@ -1,76 +1,86 @@
 <div class="form-group">
-    <label class="control-label">Include Series Title</label>
+    <label class="col-sm-3 control-label">Include Series Title</label>
 
-    <div class="controls">
+    <div class="col-sm-9">
-        <label class="checkbox toggle well">
+        <div class="input-group">
-            <input type="checkbox" name="includeSeriesTitle"/>
+            <label class="checkbox toggle well">
+                <input type="checkbox" name="includeSeriesTitle"/>
 
-            <p>
+                <p>
-                <span>Yes</span>
+                    <span>Yes</span>
-                <span>No</span>
+                    <span>No</span>
-            </p>
+                </p>
 
-            <div class="btn btn-primary slide-button"/>
+                <div class="btn btn-primary slide-button"/>
-        </label>
+            </label>
+        </div>
+    </div>
+</div>
+
+
+
+<div class="form-group">
+    <label class="col-sm-3 control-label">Include Episode Title</label>
+
+    <div class="col-sm-9">
+        <div class="input-group">
+            <label class="checkbox toggle well">
+                <input type="checkbox" name="includeEpisodeTitle"/>
+
+                <p>
+                    <span>Yes</span>
+                    <span>No</span>
+                </p>
+
+                <div class="btn btn-primary slide-button"/>
+            </label>
+        </div>
     </div>
 </div>
 
 <div class="form-group">
-    <label class="control-label">Include Episode Title</label>
+    <label class="col-sm-3 control-label">Include Quality</label>
 
-    <div class="controls">
+    <div class="col-sm-9">
-        <label class="checkbox toggle well">
+        <div class="input-group">
-            <input type="checkbox" name="includeEpisodeTitle"/>
+            <label class="checkbox toggle well">
+                <input type="checkbox" name="includeQuality"/>
 
-            <p>
+                <p>
-                <span>Yes</span>
+                    <span>Yes</span>
-                <span>No</span>
+                    <span>No</span>
-            </p>
+                </p>
 
-            <div class="btn btn-primary slide-button"/>
+                <div class="btn btn-primary slide-button"/>
-        </label>
+            </label>
+        </div>
     </div>
 </div>
 
 <div class="form-group">
-    <label class="control-label">Include Quality</label>
+    <label class="col-sm-3 control-label">Replace Spaces</label>
 
-    <div class="controls">
+    <div class="col-sm-9">
-        <label class="checkbox toggle well">
+        <div class="input-group">
-            <input type="checkbox" name="includeQuality"/>
+            <label class="checkbox toggle well">
+                <input type="checkbox" name="replaceSpaces"/>
 
-            <p>
+                <p>
-                <span>Yes</span>
+                    <span>Yes</span>
-                <span>No</span>
+                    <span>No</span>
-            </p>
+                </p>
 
-            <div class="btn btn-primary slide-button"/>
+                <div class="btn btn-primary slide-button"/>
-        </label>
+            </label>
+        </div>
     </div>
 </div>
 
 <div class="form-group">
-    <label class="control-label">Replace Spaces</label>
+    <label class="col-sm-3 control-label">Separator</label>
 
-    <div class="controls">
+    <div class="col-sm-9">
-        <label class="checkbox toggle well">
+        <select class="form-control" name="separator">
-            <input type="checkbox" name="replaceSpaces"/>
-
-            <p>
-                <span>Yes</span>
-                <span>No</span>
-            </p>
-
-            <div class="btn btn-primary slide-button"/>
-        </label>
-    </div>
-</div>
-
-<div class="form-group">
-    <label class="control-label">Separator</label>
-
-    <div class="controls">
-        <select class="inputClass" name="separator">
             <option value=" - ">Dash</option>
             <option value=" ">Space</option>
             <option value=".">Period</option>
@@ -79,10 +89,10 @@
 </div>
 
 <div class="form-group">
-    <label class="control-label">Numbering Style</label>
+    <label class="col-sm-3 control-label">Numbering Style</label>
 
-    <div class="controls">
+    <div class="col-sm-9">
-        <select class="inputClass" name="numberStyle">
+        <select class="form-control" name="numberStyle">
             <option value="{season}x{episode:00}">1x05</option>
             <option value="{season:00}x{episode:00}">01x05</option>
             <option value="S{season:00}E{episode:00}">S01E05</option>

src/UI/Settings/MediaManagement/Naming/NamingViewTemplate.html

@@ -2,23 +2,25 @@
     <legend>Episode Naming</legend>
 
     <div class="form-group">
-        <label class="control-label">Rename Episodes</label>
+        <label class="col-sm-3 control-label">Rename Episodes</label>
 
-        <div class="controls">
+        <div class="col-sm-8">
-            <label class="checkbox toggle well">
+            <div class="input-group">
-                <input type="checkbox" name="renameEpisodes" class="x-rename-episodes"/>
+                <label class="checkbox toggle well">
+                    <input type="checkbox" name="renameEpisodes" class="x-rename-episodes"/>
 
-                <p>
+                    <p>
-                    <span>Yes</span>
+                        <span>Yes</span>
-                    <span>No</span>
+                        <span>No</span>
-                </p>
+                    </p>
 
-                <div class="btn btn-primary slide-button"/>
+                    <div class="btn btn-primary slide-button"/>
-            </label>
+                </label>
 
-            <span class="help-inline-checkbox">
+                <span class="help-inline-checkbox">
-                <i class="icon-nd-form-warning" title="NzbDrone will use the existing file name if set to no"/>
+                    <i class="icon-nd-form-warning" title="NzbDrone will use the existing file name if set to no"/>
-            </span>
+                </span>
+            </div>
         </div>
     </div>
 
@@ -26,12 +28,17 @@
         <div class="basic-setting x-basic-naming"></div>
 
         <div class="form-group advanced-setting">
-            <label class="control-label">Standard Episode Format</label>
+            <label class="col-sm-3 control-label">Standard Episode Format</label>
 
-            <div class="controls">
+            <div class="col-sm-1 col-sm-push-8 help-inline">
+                <i class="icon-nd-form-info" title="" data-original-title="All caps or all lower-case can also be used"></i>
+                <a href="https://github.com/NzbDrone/NzbDrone/wiki/Sorting-and-Renaming" class="help-link" title="More information"><i class="icon-nd-form-info-link"/></a>
+            </div>
+
+            <div class="col-sm-8 col-sm-pull-1">
                 <div class="input-group x-helper-input">
-                    <input type="text" class="naming-format" name="standardEpisodeFormat" data-onkeyup="true" />
+                    <input type="text" class="form-control naming-format" name="standardEpisodeFormat" data-onkeyup="true" />
-                    <div class="btn-group x-naming-token-helper">
+                    <div class="input-group-btn btn-group x-naming-token-helper">
                         <button class="btn btn-icon-only dropdown-toggle" data-toggle="dropdown">
                             <i class="icon-plus"></i>
                         </button>
@@ -47,20 +54,21 @@
                         </ul>
                     </div>
                 </div>
-                <span class="help-inline">
-                    <i class="icon-nd-form-info" title="" data-original-title="All caps or all lower-case can also be used"></i>
-                    <a href="https://github.com/NzbDrone/NzbDrone/wiki/Sorting-and-Renaming" class="help-link" title="More information"><i class="icon-nd-form-info-link"/></a>
-                </span>
             </div>
         </div>
 
         <div class="form-group advanced-setting">
-            <label class="control-label">Daily Episode Format</label>
+            <label class="col-sm-3 control-label">Daily Episode Format</label>
 
-            <div class="controls">
+            <div class="col-sm-1 col-sm-push-8 help-inline">
+                <i class="icon-nd-form-info" title="" data-original-title="All caps or all lower-case can also be used"></i>
+                <a href="https://github.com/NzbDrone/NzbDrone/wiki/Sorting-and-Renaming" class="help-link" title="More information"><i class="icon-nd-form-info-link"/></a>
+            </div>
+
+            <div class="col-sm-8 col-sm-pull-1">
                 <div class="input-group x-helper-input">
-                    <input type="text" class="naming-format" name="dailyEpisodeFormat" data-onkeyup="true" />
+                    <input type="text" class="form-control naming-format" name="dailyEpisodeFormat" data-onkeyup="true" />
-                    <div class="btn-group x-naming-token-helper">
+                    <div class="input-group-btn btn-group x-naming-token-helper">
                         <button class="btn btn-icon-only dropdown-toggle" data-toggle="dropdown">
                             <i class="icon-plus"></i>
                         </button>
@@ -77,34 +85,21 @@
                         </ul>
                     </div>
                 </div>
-                <span class="help-inline">
-                    <i class="icon-nd-form-info" title="" data-original-title="All caps or all lower-case can also be used"></i>
-                    <a href="https://github.com/NzbDrone/NzbDrone/wiki/Sorting-and-Renaming" class="help-link" title="More information"><i class="icon-nd-form-info-link"/></a>
-                </span>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <label class="control-label">Multi-Episode Style</label>
-
-            <div class="controls">
-                <select class="inputClass x-multi-episode-style" name="multiEpisodeStyle">
-                    <option value="0">Extend</option>
-                    <option value="1">Duplicate</option>
-                    <option value="2">Repeat</option>
-                    <option value="3">Scene</option>
-                </select>
             </div>
         </div>
     </div>
 
     <div class="form-group advanced-setting">
-        <label class="control-label">Series Folder Format</label>
+        <label class="col-sm-3 control-label">Series Folder Format</label>
 
-        <div class="controls">
+        <div class="col-sm-1 col-sm-push-8 help-inline">
+            <i class="icon-nd-form-info" title="" data-original-title="All caps or all lower-case can also be used. Only used when adding a new series."></i>
+        </div>
+
+        <div class="col-sm-8 col-sm-pull-1">
             <div class="input-group x-helper-input">
-                <input type="text" class="naming-format" name="seriesFolderFormat" data-onkeyup="true"/>
+                <input type="text" class="form-control naming-format" name="seriesFolderFormat" data-onkeyup="true"/>
-                <div class="btn-group x-naming-token-helper">
+                <div class="input-group-btn btn-group x-naming-token-helper">
                     <button class="btn btn-icon-only dropdown-toggle" data-toggle="dropdown">
                         <i class="icon-plus"></i>
                     </button>
@@ -113,19 +108,16 @@
                     </ul>
                 </div>
             </div>
-            <span class="help-inline">
-                <i class="icon-nd-form-info" title="" data-original-title="All caps or all lower-case can also be used. Only used when adding a new series."></i>
-            </span>
         </div>
     </div>
 
     <div class="form-group">
-        <label class="control-label">Season Folder Format</label>
+        <label class="col-sm-3 control-label">Season Folder Format</label>
 
-        <div class="controls">
+        <div class="col-sm-8">
             <div class="input-group x-helper-input">
-                <input type="text" class="naming-format" name="seasonFolderFormat" data-onkeyup="true"/>
+                <input type="text" class="form-control naming-format" name="seasonFolderFormat" data-onkeyup="true"/>
-                <div class="btn-group x-naming-token-helper">
+                <div class="input-group-btn btn-group x-naming-token-helper">
                     <button class="btn btn-icon-only dropdown-toggle" data-toggle="dropdown">
                         <i class="icon-plus"></i>
                     </button>
@@ -139,43 +131,58 @@
         </div>
     </div>
 
-    <div class="form-group">
+    <div class="x-naming-options">
-        <label class="control-label">Single Episode Example</label>
+        <div class="form-group">
+            <label class="col-sm-3 control-label">Multi-Episode Style</label>
 
-        <div class="controls">
+            <div class="col-sm-2">
-            <span class="x-single-episode-example naming-example"></span>
+                <select class="form-control x-multi-episode-style" name="multiEpisodeStyle">
+                    <option value="0">Extend</option>
+                    <option value="1">Duplicate</option>
+                    <option value="2">Repeat</option>
+                    <option value="3">Scene</option>
+                </select>
+            </div>
         </div>
     </div>
 
     <div class="form-group">
-        <label class="control-label">Multi-Episode Example</label>
+        <label class="col-sm-3 control-label">Single Episode Example</label>
         
-        <div class="controls">
+        <div class="col-sm-8">
-            <span class="x-multi-episode-example naming-example"></span>
+            <p class="form-control-static x-single-episode-example naming-example"></p>
         </div>
     </div>
 
     <div class="form-group">
-        <label class="control-label">Daily-Episode Example</label>
+        <label class="col-sm-3 control-label">Multi-Episode Example</label>
 
-        <div class="controls">
+        <div class="col-sm-8">
-            <span class="x-daily-episode-example naming-example"></span>
+            <p class="form-control-static x-multi-episode-example naming-example"></p>
         </div>
     </div>
 
-    <div class="control-group">
+    <div class="form-group">
-        <label class="control-label">Series Folder Example</label>
+        <label class="col-sm-3 control-label">Daily-Episode Example</label>
 
-        <div class="controls">
+        <div class="col-sm-8">
-            <span class="x-series-folder-example naming-example"></span>
+            <p class="form-control-static x-daily-episode-example naming-example"></p>
         </div>
     </div>
 
-    <div class="control-group">
+    <div class="form-group">
-        <label class="control-label">Season Folder Example</label>
+        <label class="col-sm-3 control-label">Series Folder Example</label>
 
-        <div class="controls">
+        <div class="col-sm-8">
-            <span class="x-season-folder-example naming-example"></span>
+            <p class="form-control-static x-series-folder-example naming-example"></p>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <label class="col-sm-3 control-label">Season Folder Example</label>
+
+        <div class="col-sm-8">
+            <p class="form-control-static x-season-folder-example naming-example"></p>
         </div>
     </div>
 </fieldset>

src/UI/Settings/MediaManagement/Permissions/PermissionsViewTemplate.html

@@ -1,70 +1,76 @@
-{{#if_mono}}
+{{#if_mono}}
 <fieldset class="advanced-setting">
     <legend>Permissions</legend>
 
     <div class="form-group">
-        <label class="control-label">Set Permissions</label>
+        <label class="col-sm-3 control-label">Set Permissions</label>
 
-        <div class="controls">
+        <div class="col-sm-8">
-            <label class="checkbox toggle well">
+            <div class="input-group">
-                <input type="checkbox" name="setPermissionsLinux"/>
+                <label class="checkbox toggle well">
-                <p>
+                    <input type="checkbox" name="setPermissionsLinux"/>
-                    <span>Yes</span>
+                    <p>
-                    <span>No</span>
+                        <span>Yes</span>
-                </p>
+                        <span>No</span>
+                    </p>
 
-                <div class="btn btn-primary slide-button"/>
+                    <div class="btn btn-primary slide-button"/>
-            </label>
+                </label>
 
-            <span class="help-inline-checkbox">
+                <span class="help-inline-checkbox">
-                <i class="icon-nd-form-info" title="Should chmod/chown be run when files are imported/renamed?"/>
+                    <i class="icon-nd-form-info" title="Should chmod/chown be run when files are imported/renamed?"/>
-                <i class="icon-nd-form-warning" title="If you're unsure what these settings do, do not alter them."/>
+                    <i class="icon-nd-form-warning" title="If you're unsure what these settings do, do not alter them."/>
-            </span>
+                </span>
+            </div>
         </div>
     </div>
 
     <div class="form-group">
-        <label class="control-label">File chmod mask</label>
+        <label class="col-sm-3 control-label">File chmod mask</label>
 
-        <div class="controls">
+        <div class="col-sm-1 col-sm-push-4 help-inline">
-            <input type="text" name="fileChmod"/>
+            <i class="icon-nd-form-info" title="Octal, applied to media files when imported/renamed by NzbDrone"/>
-            <span class="help-inline">
+        </div>
-                <i class="icon-nd-form-info" title="Octal, applied to media files when imported/renamed by NzbDrone"/>
+
-            </span>
+        <div class="col-sm-4 col-sm-pull-1">
+            <input type="text" name="fileChmod" class="form-control"/>
         </div>
     </div>
 
     <div class="form-group">
-        <label class="control-label">Folder chmod mask</label>
+        <label class="col-sm-3 control-label">Folder chmod mask</label>
 
-        <div class="controls">
+        <div class="col-sm-1 col-sm-push-4 help-inline">
-            <input type="text" name="folderChmod"/>
+            <i class="icon-nd-form-info" title="Octal, applied to series/season folders created by NzbDrone"/>
-            <span class="help-inline">
+        </div>
-                <i class="icon-nd-form-info" title="Octal, applied to series/season folders created by NzbDrone"/>
+
-            </span>
+        <div class="col-sm-4 col-sm-pull-1">
+            <input type="text" name="folderChmod" class="form-control"/>
         </div>
     </div>
 
     <div class="form-group">
-        <label class="control-label">chown User</label>
+        <label class="col-sm-3 control-label">chown User</label>
 
-        <div class="controls">
+        <div class="col-sm-1 col-sm-push-4 help-inline">
-            <input type="text" name="chownUser"/>
+            <i class="icon-nd-form-info" title="Username or uid. Use uid for remote file systems."/>
-            <span class="help-inline">
+        </div>
-                <i class="icon-nd-form-info" title="Username or uid. Use uid for remote file systems."/>
+
-            </span>
+        <div class="col-sm-4 col-sm-pull-1">
+            <input type="text" name="chownUser" class="form-control"/>
         </div>
     </div>
 
     <div class="form-group">
-        <label class="control-label">chown Group</label>
+        <label class="col-sm-3 control-label">chown Group</label>
 
-        <div class="controls">
+        <div class="col-sm-1 col-sm-push-4 help-inline">
-            <input type="text" name="chownGroup"/>
+            <i class="icon-nd-form-info" title="Group name or gid. Use gid for remote file systems."/>
-            <span class="help-inline">
+        </div>
-                <i class="icon-nd-form-info" title="Group name or gid. Use gid for remote file systems."/>
+
-            </span>
+        <div class="col-sm-4 col-sm-pull-1">
+            <input type="text" name="chownGroup" class="form-control"/>
         </div>
     </div>
 </fieldset>
-{{/if_mono}}
+{{/if_mono}}

src/UI/Settings/MediaManagement/Sorting/SortingViewTemplate.html

@@ -2,23 +2,25 @@
     <legend>Folders</legend>
 
     <div class="form-group">
-        <label class="control-label">Create empty series folders</label>
+        <label class="col-sm-3 control-label">Create empty series folders</label>
 
-        <div class="controls">
+        <div class="col-sm-9">
-            <label class="checkbox toggle well">
+            <div class="input-group">
-                <input type="checkbox" name="createEmptySeriesFolders"/>
+                <label class="checkbox toggle well">
+                    <input type="checkbox" name="createEmptySeriesFolders"/>
 
-                <p>
+                    <p>
-                    <span>Yes</span>
+                        <span>Yes</span>
-                    <span>No</span>
+                        <span>No</span>
-                </p>
+                    </p>
 
-                <div class="btn btn-primary slide-button"/>
+                    <div class="btn btn-primary slide-button"/>
-            </label>
+                </label>
 
-            <span class="help-inline-checkbox">
+                <span class="help-inline-checkbox">
-                <i class="icon-nd-form-info" title="Create missing series folders during disk scan"/>
+                    <i class="icon-nd-form-info" title="Create missing series folders during disk scan"/>
-            </span>
+                </span>
+            </div>
         </div>
     </div>
 </fieldset>
@@ -27,24 +29,26 @@
 <fieldset class="advanced-setting">
     <legend>Importing</legend>
 
-    <div class="control-group">
+    <div class="form-group">
-        <label class="control-label">Skip Free Space Check</label>
+        <label class="col-sm-3 control-label">Skip Free Space Check</label>
 
-        <div class="controls">
+        <div class="col-sm-9">
-            <label class="checkbox toggle well">
+            <div class="input-group">
-                <input type="checkbox" name="skipFreeSpaceCheckWhenImporting"/>
+                <label class="checkbox toggle well">
+                    <input type="checkbox" name="skipFreeSpaceCheckWhenImporting"/>
 
-                <p>
+                    <p>
-                    <span>Yes</span>
+                        <span>Yes</span>
-                    <span>No</span>
+                        <span>No</span>
-                </p>
+                    </p>
 
-                <div class="btn btn-primary slide-button"/>
+                    <div class="btn btn-primary slide-button"/>
-            </label>
+                </label>
 
-            <span class="help-inline-checkbox">
+                <span class="help-inline-checkbox">
-                <i class="icon-nd-form-info" title="Use when drone is unable to detect free space from your series root folder"/>
+                    <i class="icon-nd-form-info" title="Use when drone is unable to detect free space from your series root folder"/>
-            </span>
+                </span>
+            </div>
         </div>
     </div>
 </fieldset>

src/UI/Settings/Metadata/MetadataEditViewTemplate.html

@@ -1,39 +1,45 @@
-<div class="modal-header">
+<div class="modal-dialog">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <div class="modal-content">
-    <h3>Edit</h3>
+        <div class="modal-header">
-</div>
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-<div class="modal-body">
+            <h3>Edit</h3>
-    <div class="form-horizontal">
+        </div>
-        <div class="form-group">
+        <div class="modal-body">
-            <label class="control-label">Name</label>
+            <div class="form-horizontal">
+                <div class="form-group">
+                    <label class="col-sm-3 control-label">Name</label>
 
-            <div class="controls">
+                    <div class="col-sm-5 controls">
-                <input type="text" name="name"/>
+                        <input type="text" name="name" class="form-control"/>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="col-sm-3 control-label">Enable</label>
+
+                    <div class="col-sm-5">
+                        <div class="input-group">
+                            <label class="checkbox toggle well">
+                                <input type="checkbox" name="enable"/>
+                                <p>
+                                    <span>Yes</span>
+                                    <span>No</span>
+                                </p>
+
+                                <div class="btn btn-primary slide-button"/>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
+                {{formBuilder}}
             </div>
         </div>
+        <div class="modal-footer">
+            <span class="x-activity"></span>
 
-        <div class="form-group">
+            <button class="btn" data-dismiss="modal">cancel</button>
-            <label class="control-label">Enable</label>
+            <button class="btn btn-primary x-save">save</button>
-
-            <div class="controls">
-                <label class="checkbox toggle well">
-                    <input type="checkbox" name="enable"/>
-                    <p>
-                        <span>Yes</span>
-                        <span>No</span>
-                    </p>
-
-                    <div class="btn btn-primary slide-button"/>
-                </label>
-            </div>
         </div>
-
-        {{formBuilder}}
     </div>
 </div>
-<div class="modal-footer">
-    <span class="x-activity"></span>
-
-    <button class="btn" data-dismiss="modal">cancel</button>
-    <button class="btn btn-primary x-save">save</button>
-</div>