Fixed: Show title on posters view when poster is unavailable

src/UI/.idea/jsLinters/jshint.xml

@@ -8,24 +8,22 @@
     <option es3="false" />
     <option forin="true" />
     <option immed="true" />
-    <option latedef="true" />
     <option newcap="true" />
     <option noarg="true" />
     <option noempty="false" />
     <option nonew="true" />
     <option plusplus="false" />
-    <option regexp="false" />
     <option undef="true" />
-    <option unused="true" />
     <option strict="true" />
     <option trailing="false" />
+    <option latedef="true" />
+    <option unused="true" />
     <option quotmark="single" />
     <option maxdepth="3" />
     <option asi="false" />
     <option boss="false" />
     <option debug="false" />
     <option eqnull="false" />
-    <option es5="false" />
     <option esnext="false" />
     <option evil="false" />
     <option expr="false" />
@@ -38,8 +36,6 @@
     <option loopfunc="false" />
     <option multistr="false" />
     <option proto="false" />
-    <option onecase="false" />
-    <option regexdash="false" />
     <option scripturl="false" />
     <option smarttabs="false" />
     <option shadow="false" />

src/UI/Handlebars/Helpers/Html.js

@@ -2,15 +2,17 @@
 
 define(
     [
+        'jquery',
         'handlebars',
         'System/StatusModel'
-    ], function (Handlebars, StatusModel) {
+    ], function ($, Handlebars, StatusModel) {
 
-        var placeHolder = StatusModel.get('urlBase') + '/Content/Images/poster-dark.jpg';
+        var placeholder = StatusModel.get('urlBase') + '/Content/Images/poster-dark.jpg';
 
         window.NzbDrone.imageError = function (img) {
-            if (!img.src.contains(placeHolder)) {
+            if (!img.src.contains(placeholder)) {
-                img.src = placeHolder;
+                img.src = placeholder;
+                $(img).addClass('placeholder-image');
             }
             img.onerror = null;
         };

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

@@ -11,15 +11,12 @@
                         <div class="ended-banner">Ended</div>
                     {{/unless_eq}}
                     <a href="{{route}}">
-                        <img class="series-poster" src="{{poster}}" alt="{{title}}">
+                        <img class="series-poster" src="{{poster}}" {{defaultImg}}>
+                        <div class="center title">{{title}}</div>
                     </a>
                 </div>
             </div>
 
-            <div class="title-container">
-                <div class="center title">{{title}}</div>
-            </div>
-
             <div class="center">
                 <div class="labels">
                     {{#if_eq status compare="continuing"}}

src/UI/Series/series.less

@@ -95,16 +95,6 @@
       }
     }
 
-    .title-container {
-      position : relative;
-
-      .title {
-        position : absolute;
-        top      : -100px;
-        opacity  : 0.0;
-      }
-    }
-
     .labels {
       display : inline-block;
       .opacity(0.75);
@@ -130,6 +120,21 @@
     overflow : hidden;
     display  : inline-block;
 
+    .placeholder-image ~ .title {
+      opacity: 1.0;
+    }
+
+    .title {
+      position   : absolute;
+      top        : 25px;
+      color      : #f5f5f5;
+      width      : 100%;
+      font-size  : 22px;
+      line-height: 24px;
+      opacity    : 0.0;
+      font-weight: 100;
+    }
+
     .ended-banner {
       color                    : #eeeeee;
       background-color         : #b94a48;
@@ -137,8 +142,8 @@
       -moz-transform-origin    : 50% 50%;
       -webkit-transform-origin : 50% 50%;
       position                 : absolute;
-      width                    : 300px;
+      width                    : 320px;
-      top                      : 175px;
+      top                      : 200px;
       left                     : -122px;
       text-align               : center;
       .opacity(0.9);