From fcd05cda6091f26004243df2e51d85377ef4b330 Mon Sep 17 00:00:00 2001
From: Mark McDowall <markus.mcd5@gmail.com>
Date: Fri, 7 Feb 2014 21:05:52 -0800
Subject: [PATCH] Fixed: Show title on posters view when poster is unavailable

---
 src/UI/.idea/jsLinters/jshint.xml             |  8 ++---
 src/UI/Handlebars/Helpers/Html.js             | 10 ++++---
 .../SeriesPostersItemViewTemplate.html        |  7 ++---
 src/UI/Series/series.less                     | 29 +++++++++++--------
 4 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/UI/.idea/jsLinters/jshint.xml b/src/UI/.idea/jsLinters/jshint.xml
index 96fa6c67a..e85398a55 100644
--- a/src/UI/.idea/jsLinters/jshint.xml
+++ b/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" />
diff --git a/src/UI/Handlebars/Helpers/Html.js b/src/UI/Handlebars/Helpers/Html.js
index 8f4b2b19a..78f81a4bd 100644
--- a/src/UI/Handlebars/Helpers/Html.js
+++ b/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)) {
-                img.src = placeHolder;
+            if (!img.src.contains(placeholder)) {
+                img.src = placeholder;
+                $(img).addClass('placeholder-image');
             }
             img.onerror = null;
         };
diff --git a/src/UI/Series/Index/Posters/SeriesPostersItemViewTemplate.html b/src/UI/Series/Index/Posters/SeriesPostersItemViewTemplate.html
index 36bb4ff0f..7ef1c9c4e 100644
--- a/src/UI/Series/Index/Posters/SeriesPostersItemViewTemplate.html
+++ b/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"}}
diff --git a/src/UI/Series/series.less b/src/UI/Series/series.less
index 474c61d99..2e23c92a5 100644
--- a/src/UI/Series/series.less
+++ b/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;
-      top                      : 175px;
+      width                    : 320px;
+      top                      : 200px;
       left                     : -122px;
       text-align               : center;
       .opacity(0.9);