More posters

UI/Mixins/spoon.js

@@ -21,5 +21,9 @@ function bestDateString(sourceDate) {
         return date.format('{Weekday}');
     }
 
+    if (date.isAfter(Date.create().addDays(6))) {
+        return date.relative().replace(' from now', '');
+    }
+
     return date.format('{MM}/{dd}/{yyyy}');
 }

UI/Series/Index/Posters/ItemTemplate.html

@@ -1,29 +1,33 @@
 <div class="series-posters-item">
     <div class="row">
         <div class="span2">
-            <a href="/series/details/{{titleSlug}}" target="_blank" class="center">
-                <img class="series-poster img-polaroid" src="{{poster}}">
-            </a>
-
-            <div class="center">{{title}}</div>
-
             <div class="center">
-                {{#if isContinuing}}
-                    {{#if bestDateString}}
-                        <span class="label">{{bestDateString}}</span>
-                    {{else}}
-                        <span class="label label-inverse">{{statusText}}</span>
-                    {{/if}}
-                    <span class="label label-info">Season {{seasonCount}}</span>
-                {{else}}
-                    <span class="label label-info">{{seasonCount}} Seasons</span>
-                {{/if}}
+                <div class="series-poster-container">
+                    {{#unless isContinuing}}
+                        <div class="ended-banner">Ended</div>
+                    {{/unless}}
+                    <a href="/series/details/{{titleSlug}}" target="_blank">
+                        <img class="series-poster img-polaroid" src="{{poster}}">
+                    </a>
+                </div>
             </div>
 
-            <!--<div class="progress">-->
-                <!--<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 class="center title">{{title}}</div>
+
+            <div class="center">
+                <div class="labels">
+                    {{#if isContinuing}}
+                        {{#if bestDateString}}
+                            <span class="label label-inverse">{{bestDateString}}</span>
+                        {{else}}
+                            <span class="label label-inverse">{{statusText}}</span>
+                        {{/if}}
+                        <span class="label label-info">Season {{seasonCount}}</span>
+                    {{else}}
+                        <span class="label label-info">{{seasonCount}} Seasons</span>
+                    {{/if}}
+                </div>
+            </div>
         </div>
     </div>
 </div>

UI/Series/series.less

@@ -29,4 +29,41 @@
     left: 22px;
     margin-top: 5px;
   }
+
+  .title {
+    font-size: 17px;
+    text-rendering: optimizelegibility;
+  }
+
+  .labels {
+    display: inline-block;
+    opacity: 0.75;
+    width: 138px;
+
+    .label {
+      margin-top: 3px;
+      display: block;
+    }
+  }
+}
+
+.series-poster-container {
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+
+  .ended-banner {
+    color: #EEEEEE;
+    background-color: #B94A48;
+    -moz-box-shadow: 2px 2px 20px #888;
+    -moz-transform: rotate(45deg);
+    -moz-transform-origin: 50% 50%;
+    -webkit-transform: rotate(45deg);
+    -webkit-transform-origin: 50% 50%;
+    position: absolute;
+    width: 300px;
+    top: 180px;
+    left: -120px;
+    text-align: center;
+  }
 }