Episode count on posters and coloured bars

UI/Cells/AirDateCell.js

@@ -0,0 +1,26 @@
+'use strict';
+define(
+    [
+        'backgrid',
+        'moment',
+        'Shared/FormatHelpers'
+    ], function (Backgrid, Moment, FormatHelpers) {
+        return Backgrid.Cell.extend({
+            className: 'air-date-cell',
+
+            render: function () {
+
+                this.$el.empty();
+                var date = this.model.get(this.column.get('name'));
+
+                if (date) {
+                    this.$el.html(FormatHelpers.DateHelper(date));
+
+                    this.$el.attr('title', Moment(date).format('LLLL'));
+                }
+
+                return this;
+
+            }
+        });
+    });

UI/Content/base.less

@@ -15,19 +15,22 @@
   width         : 125px;
   position      : relative;
   margin-bottom : 2px;
+
+  .progressbar-back-text, .progressbar-front-text {
+    font-size  : 11.844px;
+    font-weight: bold;
+    text-align : center;
+  }
+
   .progressbar-back-text {
     position   : absolute;
     width      : 100%;
     height     : 100%;
-    font-size  : 12px;
-    text-align : center;
   }
 
   .progressbar-front-text {
     display    : block;
     width      : 125px;
-    font-size  : 12px;
-    text-align : center;
   }
   .bar {
     position : absolute;

UI/Handlebars/Helpers/Series.js

@@ -35,7 +35,6 @@ define(
             return '/series/' + this.titleSlug;
         });
 
-
         Handlebars.registerHelper('percentOfEpisodes', function () {
             var episodeCount = this.episodeCount;
             var episodeFileCount = this.episodeFileCount;
@@ -49,4 +48,18 @@ define(
             return percent;
         });
 
+        Handlebars.registerHelper('seasonCountHelper', function () {
+            var seasonCount = this.seasonCount;
+            var continuing = this.status === 'continuing';
+
+            if (continuing) {
+                return new Handlebars.SafeString('<span class="label label-info">Season {0}</span>'.format(seasonCount));
+            }
+
+            if (seasonCount === 1) {
+                return new Handlebars.SafeString('<span class="label label-info">{0} Season</span>'.format(seasonCount))
+            }
+
+            return new Handlebars.SafeString('<span class="label label-info">{0} Seasons</span>'.format(seasonCount))
+        });
     });

UI/Series/Index/EpisodeProgressPartial.html

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

UI/Series/Index/List/ItemTemplate.html

@@ -33,20 +33,16 @@
                         {{#if nextAiring}}
                             <span class="label">{{NextAiring nextAiring}}</span>
                         {{/if}}
-                        <span class="label label-info">Season {{seasonCount}}</span>
                     {{else}}
                         <span class="label label-important">Ended</span>
-                        <span class="label label-info">{{seasonCount}} Seasons</span>
                     {{/if_eq}}
 
+                    {{seasonCountHelper}}
+
                     {{qualityProfile qualityProfileId}}
                 </div>
                 <div class="span2">
-                    <div class="progress">
+                    {{> EpisodeProgressPartial }}
-                        <span class="progressbar-back-text">{{episodeFileCount}} / {{episodeCount}}</span>
-
-                        <div class="bar" style="width:{{percentOfEpisodes}}%"><span class="progressbar-front-text">{{episodeFileCount}} / {{episodeCount}}</span></div>
-                    </div>
                 </div>
             </div>
         </div>

UI/Series/Index/Posters/ItemTemplate.html

@@ -24,10 +24,9 @@
                         {{#if nextAiring}}
                             <span class="label label-inverse">{{NextAiring nextAiring}}</span>
                         {{/if}}
-                        <span class="label label-info">Season {{seasonCount}}</span>
-                    {{else}}
-                        <span class="label label-info">{{seasonCount}} Seasons</span>
                     {{/if_eq}}
+                    {{seasonCountHelper}}
+                    {{> EpisodeProgressPartial }}
                 </div>
             </div>
         </div>

UI/Series/series.less

@@ -66,13 +66,23 @@
     .card;
     .clickable;
     margin-bottom : 20px;
-    height        : 295px;
+    height        : 320px;
 
     .center {
       display      : block;
       margin-left  : auto;
       margin-right : auto;
       text-align   : center;
+
+      .progress {
+        text-align: left;
+        left: 0px;
+        width: 171px;
+
+        .progressbar-front-text {
+          width: 171px;
+        }
+      }
     }
 
     .progress {
@@ -146,7 +156,6 @@
       width : 168px;
     }
   }
-
 }
 
 .series-detail-overview {