From 4f5e1f01ad3d62611ac86c45beb47e6b38eaa62e Mon Sep 17 00:00:00 2001
From: JackDandy <JackDandy@users.noreply.github.com>
Date: Fri, 21 Nov 2014 09:50:12 +0000
Subject: [PATCH] Fix glitch above rating stars on Display Show page.

And the alignment of items on that line.

Conflicts:
	CHANGES.md
---
 CHANGES.md                                    |  1 +
 gui/slick/css/dark.css                        | 22 -------------
 gui/slick/css/light.css                       | 22 -------------
 gui/slick/css/style.css                       | 32 ++++++++++++-------
 gui/slick/interfaces/default/displayShow.tmpl | 10 +++---
 5 files changed, 27 insertions(+), 60 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index e7cccf31..2e972c8a 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -36,6 +36,7 @@
 * Fix a handler when EpisodeData is not available in TVDB and TVRage APIs
 * Add TVRage "Canceled/Ended" as "Ended" status to sort on Simple Layout of Show List page
 * Fix qtips on Display Show and Config Post Processing
+* Fix glitch above rating stars on Display Show page
 
 [develop changelog]
 * Fix typo for commit "ShowData handler" i.e. SHA-1:3eec217
diff --git a/gui/slick/css/dark.css b/gui/slick/css/dark.css
index d60712dd..40ffbc0e 100644
--- a/gui/slick/css/dark.css
+++ b/gui/slick/css/dark.css
@@ -960,12 +960,6 @@ home_postprocess.tmpl
 displayShow.tmpl 
 ========================================================================== */
 
-#posterCol {
-	float: left;
-	margin-right: 10px;
-	margin-bottom: 20px;
-}
-
 #showCol {
 	overflow: hidden;
 	margin-bottom: 20px;
@@ -1007,24 +1001,8 @@ h1.title {
 	top: -3px;
 }
 
-span.imdbstars {
-	display: inline-block; 
-	vertical-align: top;
-	cursor: help;
-	margin-top: 4px;
-}
-
 span.imdbstars, span.imdbstars > * {
-	height: 12px;
 	background: url(../images/rating.png) 0 -12px repeat-x;
-	width: 120px;
-	display: inline-block;
-	vertical-align: top;
-}
-
-span.imdbstars > * {
-	background-position: 0 0;
-	max-width:120px;
 }
 
 ul.tags {
diff --git a/gui/slick/css/light.css b/gui/slick/css/light.css
index 288c80cc..1bcefbb2 100644
--- a/gui/slick/css/light.css
+++ b/gui/slick/css/light.css
@@ -947,12 +947,6 @@ home_postprocess.tmpl
 displayShow.tmpl 
 ========================================================================== */
 
-#posterCol {
-	float: left;
-	margin-right: 10px;
-	margin-bottom: 20px;
-}
-
 #showCol {
 	overflow: hidden;
 	margin-bottom: 20px;
@@ -996,24 +990,8 @@ h1.title {
 	top: -3px;
 }
 
-span.imdbstars {
-	display: inline-block; 
-	vertical-align: top;
-	cursor: help;
-	margin-top: 4px;
-}
-
 span.imdbstars, span.imdbstars > * {
-	height: 12px;
 	background: url(../images/rating.png) 0 -12px repeat-x;
-	width: 120px;
-	display: inline-block;
-	vertical-align: top;
-}
-
-span.imdbstars > * {
-	background-position: 0 0;
-	max-width:120px;
 }
 
 ul.tags {
diff --git a/gui/slick/css/style.css b/gui/slick/css/style.css
index f15cf1d0..28283201 100644
--- a/gui/slick/css/style.css
+++ b/gui/slick/css/style.css
@@ -971,8 +971,7 @@ displayShow.tmpl
 
 #posterCol {
 	float: left;
-	margin-right: 10px;
-	margin-bottom: 20px;
+	margin: 3px 10px 20px 0;
 }
 
 #showCol {
@@ -1019,23 +1018,34 @@ h1.title {
 }
 
 span.imdbstars {
-	display: inline-block; 
-	vertical-align: top;
+	display: inline-block;
+	margin: 0 3px 0 0;
+	vertical-align: baseline;
 	cursor: help;
-	margin-top: 4px;
 }
-
+span.imdbstars > * {
+	background-position: 0 0 !important;
+	max-width:120px;
+}
 span.imdbstars, span.imdbstars > * {
 	height: 12px;
-	background: url(../images/rating.png) 0 -12px repeat-x;
 	width: 120px;
 	display: inline-block;
-	vertical-align: top;
+	font-size:10px
 }
 
-span.imdbstars > * {
-	background-position: 0 0;
-	max-width:120px;
+#showinfo .flag {
+	margin: 0 3px 0 0;
+	vertical-align: baseline;
+}
+
+#showinfo .imdb-info {
+	margin: 0 3px 0 0;
+}
+
+#showinfo a.service {
+	margin: 0 3px 0 0;
+	font-size: 16px;
 }
 
 ul.tags {
diff --git a/gui/slick/interfaces/default/displayShow.tmpl b/gui/slick/interfaces/default/displayShow.tmpl
index 022966e4..44e70645 100644
--- a/gui/slick/interfaces/default/displayShow.tmpl
+++ b/gui/slick/interfaces/default/displayShow.tmpl
@@ -163,17 +163,17 @@
 #else
     #if 'country_codes' in $show.imdb_info:
         #for $country in $show.imdb_info['country_codes'].split('|')
-				<img src="$sbRoot/images/flags/${$country}.png" width="16" height="11" style="margin-left: 3px; vertical-align:middle;" />
+				<img class="flag" src="$sbRoot/images/flags/${$country}.png" width="16" height="11" />
         #end for
     #end if
     #if 'year' in $show.imdb_info:
-				<span>($show.imdb_info['year']) - $show.imdb_info['runtimes'] minutes - </span>
+				<span class="imdb-info">($show.imdb_info['year']) - $show.imdb_info['runtimes'] minutes</span>
     #end if
-				<a href="<%= anon_url('http://www.imdb.com/title/', _show.imdbid) %>" rel="noreferrer" onclick="window.open(this.href, '_blank'); return false;" title="http://www.imdb.com/title/$show.imdbid"><img alt="[imdb]" height="16" width="16" src="$sbRoot/images/imdb.png" style="margin-top: -1px; vertical-align:middle;"/></a>
+				<a class="service" href="<%= anon_url('http://www.imdb.com/title/', _show.imdbid) %>" rel="noreferrer" onclick="window.open(this.href, '_blank'); return false;" title="http://www.imdb.com/title/$show.imdbid"><img alt="[imdb]" height="16" width="16" src="$sbRoot/images/imdb.png" /></a>
 #end if
-				<a href="<%= anon_url(sickbeard.indexerApi(_show.indexer).config['show_url'], _show.indexerid) %>" onclick="window.open(this.href, '_blank'); return false;" title="$sickbeard.indexerApi($show.indexer).config["show_url"]$show.indexerid"><img alt="$sickbeard.indexerApi($show.indexer).name" height="16" width="16" src="$sbRoot/images/$sickbeard.indexerApi($show.indexer).config["icon"] "style="margin-top: -1px; vertical-align:middle;"/></a>
+				<a class="service" href="<%= anon_url(sickbeard.indexerApi(_show.indexer).config['show_url'], _show.indexerid) %>" onclick="window.open(this.href, '_blank'); return false;" title="$sickbeard.indexerApi($show.indexer).config['show_url']$show.indexerid"><img alt="$sickbeard.indexerApi($show.indexer).name" height="16" width="16" src="$sbRoot/images/$sickbeard.indexerApi($show.indexer).config['icon']" /></a>
 #if $xem_numbering or $xem_absolute_numbering:
-				<a href="<%= anon_url('http://thexem.de/search?q=', _show.name) %>" rel="noreferrer" onclick="window.open(this.href, '_blank'); return false;" title="http://thexem.de/search?q-$show.name"><img alt="[xem]" height="16" width="16" src="$sbRoot/images/xem.png" style="margin-top: -1px; vertical-align:middle;"/></a>
+				<a class="service" href="<%= anon_url('http://thexem.de/search?q=', _show.name) %>" rel="noreferrer" onclick="window.open(this.href, '_blank'); return false;" title="http://thexem.de/search?q-$show.name"><img alt="[xem]" height="16" width="16" src="$sbRoot/images/xem.png" /></a>
 #end if
 			</div>