Series episode count legend added

UI/Calendar/CalendarLayoutTemplate.html

@@ -5,13 +5,13 @@
     </div>
     <div class=span9>
         <div id="x-calendar" class="calendar"/>
-        <div class="legend">
+        <div class="legend calendar">
             <ul class='legend-labels'>
                 <li><span class="primary" title="Episode hasn't aired yet"></span>Unaired</li>
                 <li><span class="warning" title="Episode is currently airing"></span>On Air</li>
-                <li><span class="danger" title="Epsiode file has not been found"></span>Missing</li>
+                <li><span class="danger" title="Episode file has not been found"></span>Missing</li>
                 <li><span class="success" title="Episode was downloaded and sorted"></span>Downloaded</li>
             </ul>
-        </div>
+         </div>
     </div>
 </div>

UI/Calendar/calendar.less

@@ -111,37 +111,7 @@
   }
 }
 
-.legend {
-  margin: 5px;
-
-  ul {
-    margin: 0;
-    margin-bottom: 5px;
-    padding: 0;
-    float: left;
-    list-style: none;
-
-    li {
-      font-size: 80%;
-      list-style: none;
-      margin-left: 0;
-      line-height: 18px;
-      margin-bottom: 2px;
-
-      span {
-        display: block;
-        float: left;
-        height: 16px;
-        width: 30px;
-        margin-right: 5px;
-        margin-left: 0;
-        border: none;
-      }
-    }
-  }
-}
-
-.calendar, .legend {
+.calendar, {
   .primary {
     border-color     : @btnPrimaryBackground;
     background-color : @btnPrimaryBackground;

UI/Content/base.less

@@ -10,6 +10,7 @@
 @import "prefixer";
 @import "icons";
 @import "spinner";
+@import "legend";
 
 .progress {
   width         : 125px;

UI/Content/legend.less

@@ -0,0 +1,45 @@
+@import "./Bootstrap/mixins";
+
+.legend {
+  margin: 5px;
+
+  ul {
+    margin: 0;
+    margin-bottom: 5px;
+    padding: 0;
+    float: left;
+    list-style: none;
+
+    li {
+      font-size: 80%;
+      list-style: none;
+      margin-left: 0;
+      line-height: 18px;
+      margin-bottom: 2px;
+
+      span {
+        display: block;
+        float: left;
+        height: 16px;
+        width: 30px;
+        margin-right: 5px;
+        margin-left: 0;
+        border: none;
+        border-radius: 3px;
+      }
+    }
+  }
+
+  .progress-primary {
+    #gradient > .vertical(#149bdf, #0480be);
+    .transition(width .6s ease);
+  }
+
+  .progress-success {
+    #gradient > .vertical(#62c462, #57a957);
+  }
+
+  .progress-danger {
+    #gradient > .vertical(#ee5f5b, #c43c35);
+  }
+}

UI/Series/Index/LegendView.js

@@ -0,0 +1,9 @@
+'use strict';
+define(
+    [
+        'marionette'
+    ], function (Marionette) {
+        return Marionette.CompositeView.extend({
+            template: 'Series/Index/LegendViewTemplate'
+        });
+    });

UI/Series/Index/LegendViewTemplate.html

@@ -0,0 +1,7 @@
+<div class="legend">
+    <ul class='legend-labels'>
+        <li><span class="progress-primary"></span>Continuing (All Episodes downloaded)</li>
+        <li><span class="progress-success"></span>Ended (All Episodes downloaded)</li>
+        <li><span class="progress-danger"></span>Missing Episodes</li>
+    </ul>
+</div>

UI/Series/Index/SeriesIndexLayout.js

@@ -12,6 +12,7 @@ define(
         'Cells/QualityProfileCell',
         'Series/Index/Table/SeriesStatusCell',
         'Series/Index/Table/Row',
+        'Series/Index/LegendView',
         'Shared/Toolbar/ToolbarLayout',
         'Shared/LoadingView'
     ], function (Marionette,
@@ -25,6 +26,7 @@ define(
                  QualityProfileCell,
                  SeriesStatusCell,
                  SeriesIndexRow,
+                 LegendView,
                  ToolbarLayout,
                  LoadingView) {
         return Marionette.Layout.extend({
@@ -32,7 +34,8 @@ define(
 
             regions: {
                 seriesRegion: '#x-series',
-                toolbar     : '#x-toolbar'
+                toolbar     : '#x-toolbar',
+                legend : '#x-legend'
             },
 
             columns:
@@ -152,6 +155,7 @@ define(
                 else {
                     this.currentView.collection = SeriesCollection;
                     this.seriesRegion.show(this.currentView);
+                    this.legend.show(new LegendView());
 
                     this._showToolbar();
                 }

UI/Series/Index/SeriesIndexLayoutTemplate.html

@@ -4,3 +4,8 @@
         <div id="x-series"></div>
     </div>
 </div>
+<div class="row">
+    <div class="span12">
+        <div id="x-legend"></div>
+    </div>
+</div>