Change overhaul more on the displayShow page.

Fix disabling IMDb broke page. Fix counting of files. Add some tooltips to bottom show details for clarity. Change glyph to right side of "Show/Hide episodes" button text to improve visual when toggling button. Change red text on blue tag to white text on red tag to improve readability of invalid locations. Change some label tags to fit with edit show page. Fix handle when a show in db has all episodes removed from indexer. Add the name of show that will be displayed to the hover of the Prev/Next show buttons. Add hover tooltips for nfo and tbn columns for browsers that use the title attr. Change Special link moved from "Season" line to "Specials" line on displayShow. Change code re-factored in readiness for live option switching, clean up and add closures of html tables.
10 years ago · 059f617d29
9 changed files with 521 additions and 371 deletions
--- a/CHANGES.md
+++ b/CHANGES.md
@ -80,6 +80,12 @@
 * Add option to collapse seasons and leave current season open on displayShow (disabled)
 * Add filesize to episode location qtip on displayShow
 * Change selected options from editShow will only show when enabled now on displayShow
+* Change some label tags to fit with edit show page on displayShow
+* Fix handle when a show in db has all episodes removed from indexer on displayShow
+* Add the name of show that will be displayed to the hover of the Prev/Next show buttons on displayShow
+* Add hover tooltips for nfo and tbn columns for browsers that use the title attr on displayShow
+* Change Special link moved from "Season" line to "Specials" line on displayShow
+* Change code re-factored in readiness for live option switching, clean up and add closures of html tables
 * Add show overview from indexers to the database

 [develop changelog]
@ -94,6 +100,11 @@
 * Fix to correctly use wanted_begin and wanted_latest when adding shows
 * Change Log/Error Log Menu icons to correct ones
 * Fix issue with missing QueueItemForceUpdate object has no attribute 'force_web'
+* Fix disabling IMDb broke page
+* Fix counting of files on displayShow
+* Add some tooltips to bottom show details for clarity on displayShow
+* Change red text on blue tag to white text on red tag to improve readability of invalid locations on displayShow
+* Change glyph to right side of "Show/Hide episodes" button text to improve visual when toggling button on displayShow

 ### 0.7.2 (2015-03-10 17:05:00 UTC)

--- a/gui/slick/css/dark.css
+++ b/gui/slick/css/dark.css
@ -347,6 +347,11 @@ home_postprocess.tmpl
 displayShow.tmpl
 ========================================================================== */

+tr.seasonheader{
+	text-align:left;
+	border:none
+}
+
 #prevShow,
 #nextShow,
 #topcontrol{
@ -358,40 +363,26 @@ displayShow.tmpl
 	border:1px solid #111
 }

-.sickbeardTable tr.header td,
-.sickbeardTable th{
-	color:#fff;
-	background-color:#15528F
-}
-
-th.row-seasonheader{
-	border:none;
-	background-color:transparent;
-	color:#fff
-}
-
-tr.seasonheader{
-	text-align:left;
-	border:none
-}
-
 .display-details{
 	background-color:#3d3d3d;
 	border:1px solid #111
 }

-.display-details-transparent{
-	background:rgba(0,0,0,0.5);
-	border:1px solid rgba(0,0,0,0.5)
+.pro .details-title{
+	color:#999
+}
+
+.back-art.pro .details-title{
+	color:#bbb
 }

-.info-tag-bg,
-.genre-tag-bg{
+.back-art #details-top .label,
+.back-art #details-bottom .label{
 	background-color:#15528F
 }

-.info-tag-nobg,
-.genre-tag-nobg{
+#details-top .label,
+#details-bottom .label{
 	background-color:#15528F
 }

@ -399,6 +390,19 @@ tr.seasonheader{
 	color:#09A2FF
 }

+.sickbeardTable th{
+	background-color:#15528f
+}
+
+.displayshow-wrapper .sickbeardTable th.row-seasonheader{
+	color:#fff
+}
+
+.back-art.pro .sickbeardTable .seasoncols th,
+.translucent.pro .sickbeardTable .seasoncols th{
+	background-color:rgba(21, 82, 143, 0.5)
+}
+
 /* =======================================================================
 episodeView.tmpl
 ========================================================================== */
--- a/gui/slick/css/light.css
+++ b/gui/slick/css/light.css
@ -187,6 +187,19 @@ inc_bottom.tmpl
 	color:#428BCA
 }

+body#display-show.back-art .displayshow-wrapper a,
+body#display-show.back-art .footerhighlight a,
+body#display-show.back-art .footerhighlight{
+	color:#c7db40
+}
+
+body#display-show.back-art .displayshow-wrapper a:hover,
+body#display-show.back-art .displayshow-wrapper a:focus,
+body#display-show.back-art .footerhighlight a:hover,
+body#display-show.back-art .footerhighlight a:focus{
+	color:#9faf33
+}
+
 /* =======================================================================
 home.tmpl
 ========================================================================== */
@ -335,6 +348,11 @@ home_postprocess.tmpl
 displayShow.tmpl 
 ========================================================================== */

+tr.seasonheader{
+	border:none;
+	color:#000
+}
+
 #prevShow,
 #nextShow,
 #topcontrol{
@ -348,39 +366,26 @@ displayShow.tmpl
 	border:1px solid #ccc
 }

-.sickbeardTable th{
-	color:#fff;
-	background-color:#333
-}
-
-th.row-seasonheader{
-	border:none;
-	background-color:transparent;
-	color:#000
-}
-
-tr.seasonheader{
-	border:none;
-	color:#000
-}
-
 .display-details{
 	background-color:#efefef;
 	border:1px solid #dfdede
 }

-.display-details-transparent{
-	background:rgba(0,0,0,0.5);
-	border:1px solid rgba(0,0,0,0.5)
+.pro .details-title{
+	color:#666
+}
+
+.back-art.pro .details-title{
+	color:#bbb
 }

-.info-tag-bg,
-.genre-tag-bg{
+.back-art #details-top .label,
+.back-art #details-bottom .label{
 	background-color:#215f2f
 }

-.info-tag-nobg,
-.genre-tag-nobg{
+#details-top .label,
+#details-bottom .label{
 	background-color:#555
 }

@ -388,6 +393,18 @@ tr.seasonheader{
 	color:#C7DB40
 }

+.sickbeardTable th{
+	background-color:#333
+}
+
+.displayshow-wrapper .sickbeardTable th.row-seasonheader{
+	color:#000
+}
+
+.translucent.pro .sickbeardTable th{
+	background-color:rgba(51, 51, 51, 0.5)
+}
+
 /* =======================================================================
 episodeView.tmpl
 ========================================================================== */
--- a/gui/slick/css/style.css
+++ b/gui/slick/css/style.css
@ -1069,17 +1069,46 @@ home_postprocess.tmpl
 /* =======================================================================
 displayShow.tmpl 
 ========================================================================== */
+body#display-show.back-art {
+	color:#fff
+}
+
+body#display-show .pro #details-bottom .label-paused,
+body#display-show .pro .season-status .archived-count{
+	display:inline
+}
+
+body#display-show .season-status,
+body#display-show #details-bottom .label-paused,
+body#display-show .season-status .archived-count,
+.displayshow-wrapper .background-container,
+.all .sickbeardTable .row-seasonheader button,
+.reg .sickbeardTable .row-seasonheader button.latest-season,
+.pro .sickbeardTable .row-seasonheader button.display-season{
+	display:none
+}
+
+.all .sickbeardTable tbody.collapse,
+.reg .sickbeardTable tbody.collapse.latest-season,
+.pro .sickbeardTable tbody.collapse.display-season{
+	display:table-row-group
+}
+
+body#display-show .pro #details-bottom .label-paused{
+	background-color:#8f1515
+}

-.background-container{
+.back-art .background-container{
 	position:fixed;
 	top:0;
 	right:0;
 	bottom:0;
 	left:0;
-	z-index:-1
+	z-index:-1;
+	display:block
 }

-.background{
+.back-art .background{
 	position:absolute;
 	top:0;
 	right:0;
@ -1089,7 +1118,7 @@ displayShow.tmpl
 	background-size:cover
 }

-.background-transparent:after{
+.back-art.translucent .background:after{
 	position:absolute;
 	content:"";
 	top:0;
@ -1113,23 +1142,27 @@ displayShow.tmpl
 	margin-top:10px
 }

-.display-show{
+body#display-show .sickbeardTable{
 	margin:30px 0
 }

-.display-season{
+body#display-show .back-art .sickbeardTable{
 	background:rgba(0,0,0,0.5);
 	border-radius:3px;
 	padding:10px
 }

-.display-details,
-.display-details-transparent{
+.display-details{
 	border-radius:3px;
 	padding:8px 10px;
 	margin-bottom:20px
 }

+.back-art .display-details{
+	background:rgba(0,0,0,0.5);
+	border:1px solid rgba(0,0,0,0.5)
+}
+
 #details-wrapper{
 	float:left;
 	width:100%;
@ -1137,6 +1170,10 @@ displayShow.tmpl
 	cursor:default
 }

+.no-labels #details-top{
+	height:43px
+}
+
 #details-top{
 	height:70px
 }
@ -1157,13 +1194,40 @@ displayShow.tmpl
 	margin-left:15px
 }

-#details-right .flag{
-	margin-right:4px;
+.details-title{
+	display:inline-block;
+	float:left
+}
+
+.reg .details-title{
+	margin-right:4px
+}
+
+.reg .details-title:after{
+	content:":"
+}
+
+.pro .details-title{
+	width:80px;
+	font-size:13px;
+	line-height:20px
+}
+
+.pro .details-info{
+	display:block;
+	margin-left:85px
+}
+
+.details-info .space-right{
+	margin-right:4px
+}
+
+.details-info .flag{
 	vertical-align:baseline
 }

 .details-plot{
-	min-height:217px;
+	min-height:220px;
 	overflow:hidden
 }

@ -1180,17 +1244,14 @@ displayShow.tmpl
 	height:42px
 }

-.genre-tag-bg,
-.genre-tag-nobg{
+#details-top .label{
 	padding:3px 4px 3px 22px;
 	background:url(../images/tag.png) no-repeat scroll 4px 3px;
 	cursor:default
 }

-.genre-tag-bg a,
-.genre-tag-bg a:hover,
-.genre-tag-nobg a,
-.genre-tag-nobg a:hover{
+#details-top .label a,
+#details-top .label a:hover{
 	color:#fff;
 	text-decoration:none
 }
@ -1216,11 +1277,11 @@ span.imdbstars, span.imdbstars > *{
 }

 .moreless{
-	margin-top:-3px
+	margin-top:0
 }

 .no-plot{
-	font-style: italic
+	font-style:italic
 }

 .paused{
@ -1269,10 +1330,22 @@ a.service img{
 .tvshowImg{
 	border:1px solid #ccc;
 	border-radius:3px;
-	height:329px;
+	height:332px;
 	width:auto;
 	float:left
 }
+.no-labels #posterCol .tvshowImg{
+	height:305px
+}
+
+.back-art .tvshowImg{
+	border-color:rgba(0,0,0,0.5)
+}
+
+.back-art.translucent.pro .tvshowImg {
+	opacity: 0.85;
+	filter: alpha(opacity=85)
+}

 #checkboxControls{
 	padding-top:5px
@ -1299,35 +1372,75 @@ a.service img{
 	color:#666
 }

+.back-art.pro .airdate-never{
+	background-color:rgba(234,226,200,0.7);
+	color:#666
+}
+
 .unaired{
 	background-color:#f5f1e4
 }

+.back-art.pro .unaired{
+	background-color:rgba(245,241,228,0.7);
+	color:#584b20
+}
+
 .skipped{
 	background-color:#bedeed
 }

+.back-art.pro .skipped{
+	background-color:rgba(190,222,237,0.7);
+	color:#1d5068
+}
+
 .good{
 	background-color:#c3e3c8
 }

+.back-art.pro .good{
+	background-color:rgba(195,227,200,0.7);
+	color:#295730
+}
+
 .archived{
 	background-color:#d5e3d8;
 	color:#295730
 }

+.back-art.pro .archived{
+	background-color:rgba(213,227,216,0.7);
+	color:#295730
+}
+
 .qual{
 	background-color:#ffda8a
 }

+.back-art.pro .qual{
+	background-color:rgba(255,218,138,0.7);
+	color:#765100
+}
+
 .wanted{
 	background-color:#ffb0b0
 }

+.back-art.pro .wanted{
+	background-color:rgba(255,176,176,0.7);
+	color:#890000
+}
+
 .snatched{
 	background-color:#ebc1ea
 }

+.back-art.pro .snatched{
+	background-color:rgba(235,193,234,0.7);
+	color:#652164
+}
+
 span.unaired{
 	color:#584b20;
 	border:1px solid #584b20
@ -1389,15 +1502,10 @@ span.snatched b{
 	color:#000
 }

-.sickbeardTable.display_show{
-	clear:both
-}
-
 .sickbeardTable tr.header td,
 .sickbeardTable th{
 	color:#fff;
 	text-align:center;
-	background-color:#333;
 	white-space:nowrap
 }

@ -1411,12 +1519,17 @@ span.snatched b{
 	padding:4px 8px
 }

-th.row-seasonheader{
+.displayshow-wrapper .sickbeardTable th.row-seasonheader{
 	border:none;
-	background-color:transparent !important;
+	width:auto;
+	background-color:transparent;
 	text-align:left
 }

+.back-art th.row-seasonheader h3{
+	color:#fff
+}
+
 th.row-seasonheader h3{
 	margin:0
 }
--- a/gui/slick/interfaces/default/config_general.tmpl
+++ b/gui/slick/interfaces/default/config_general.tmpl
@ -247,42 +247,8 @@
 								</span>
 							</label>
 						</div>
-<!-- New stuff
-						<div class="field-pair">
-							<label for="display_background">
-								<span class="component-title">Display background</span>
-								<span class="component-desc">
-									<input type="checkbox" class="enabler" name="display_background" id="display_background" #if $sickbeard.DISPLAY_BACKGROUND then 'checked="checked"' else ''#>
-									<p>on the show summary page</p>
-								</span>
-							</label>
-						</div>
-						
-						<div class="field-pair" id="content_display_background">
-							<label for="display_background_transparent">
-								<span class="component-title">Background transparency</span>
-								<span class="component-desc">
-									<label for="background_transparent">
-										<input type="radio" name="display_background_transparent" id="background_transparent" value="transparent" #if $sickbeard.DISPLAY_BACKGROUND_TRANSPARENT == 'transparent' then 'checked="checked"' else ''#>transparent
-									</label>
-									<label for="background_opaque">
-										<input type="radio" name="display_background_transparent" id="background_opaque" value="opaque" #if $sickbeard.DISPLAY_BACKGROUND_TRANSPARENT == 'opaque' then 'checked="checked"' else ''#>opaque
-									</label>
-								</span>
-							</label>
-						</div>

 						<div class="field-pair">
-							<label for="display_all_seasons">
-								<span class="component-title">Show all seasons</span>
-								<span class="component-desc">
-									<input type="checkbox" name="display_all_seasons" id="display_all_seasons" #if $sickbeard.DISPLAY_ALL_SEASONS then 'checked="checked"' else ''#>
-									<p>on the show summary page</p>
-								</span>
-							</label>
-						</div>
-->
-						<div class="field-pair">
 							<label for="home_search_focus">
 								<span class="component-title">Give show list search focus</span>
 								<span class="component-desc">
--- a/gui/slick/interfaces/default/displayShow.tmpl
+++ b/gui/slick/interfaces/default/displayShow.tmpl
@ -1,4 +1,5 @@
 #import sickbeard
+#import re
 #from sickbeard import subtitles, sbdatetime, network_timezones
 #import sickbeard.helpers
 #from sickbeard.common import *
@ -10,11 +11,13 @@
 #set global $title = $show.name
 #set global $topmenu = 'home'
 #set $exceptions_string = ', '.join($show.exceptions)
+
+#set global $page_body_attr  = 'display-show'
 #include $os.path.join($sickbeard.PROG_DIR, 'gui/slick/interfaces/default/inc_top.tmpl')

 <script type="text/javascript" src="$sbRoot/js/lib/jquery.bookmarkscroll.js?$sbPID"></script>

-<input type="hidden" id="sbRoot" value="$sbRoot" />
+<input type="hidden" id="sbRoot" value="$sbRoot">

 <script type="text/javascript" src="$sbRoot/js/displayShow.js?$sbPID"></script>
 <script type="text/javascript" src="$sbRoot/js/plotTooltip.js?$sbPID"></script>
@ -59,43 +62,45 @@
 //-->
 </script>

-#if $sickbeard.DISPLAY_BACKGROUND:
-
-<style type="text/css">
-body{color:#fff}
-th.row-seasonheader h3{color:#fff}
-.tvshowImg{border-color:rgba(0,0,0,0.5)}
-#if $sickbeard.THEME_NAME == 'light':
-a,.footerhighlight{color:#C7DB40}
-a:hover,a:focus{color:#9FAF33}
-#end if
-</style>
+<div class="displayshow-wrapper reg all#echo ('', ' no-labels')[not $sickbeard.USE_IMDB_INFO]#">

 	<div class="background-container">
-		<div style="background-image: url('<!-- background here -->');" class="background #if $sickbeard.DISPLAY_BACKGROUND_TRANSPARENT == 'transparent' then 'background-transparent' else ''#"></div>
+		<div style="" class="background"></div>
 	</div>
-#end if

 	<div class="pull-left form-inline">
-		Change Show:
-		<div class="navShow"><img id="prevShow" src="$sbRoot/images/prev.png" alt="&lt;&lt;" title="Prev Show" /></div>
-		<select id="pickShow" class="form-control form-control-inline input-sm">
-#for $curShowList in $sortedShowLists:
+		Change show:
+#set $displayshowlist = []
+#set $cur_sel = 0
+#for $curShowList in $sortedShowLists
    #set $curShowType = $curShowList[0]
    #set $curShowList = $curShowList[1]
-
    #if 1 < len($sortedShowLists):
-			<optgroup label="$curShowType">
+$displayshowlist.append('\t\t\t<optgroup label="%s">' % $curShowType)
    #end if
-    #for $curShow in $curShowList:
-			<option value="$curShow.indexerid" #if $curShow == $show then 'selected="selected"' else ''#>$curShow.name</option>
+    #for $curShow in $curShowList
+        #set void = $displayshowlist.append('\t\t\t<option value="%s"%s>%s</option>' % ($curShow.indexerid, ('', ' selected="selected"')[$curShow == $show], $curShow.name))
+		#if $curShow == $show
+		    #set $cur_sel = len($displayshowlist)
+		#end if
    #end for
-    #if 1 < len($sortedShowLists):
-			</optgroup>
-    #end if
+    #if 1 < len($sortedShowLists)
+        #set void = $displayshowlist.append('\t\t\t</optgroup>')
+	#end if
 #end for
+#set $last_item = len($displayshowlist)
+#set $prev_option = $displayshowlist[($cur_sel - 2, $last_item - 1)[1 == $cur_sel]]
+#set $next_option = $displayshowlist[($cur_sel, 0)[$last_item == $cur_sel]]
+#set $next_match = re.search(r'<opt[^>]+>(.*?)</opt', $prev_option)
+#set $prev_match = re.search(r'<opt[^>]+>(.*?)</opt', $next_option)
+#set $prev_title = 'Prev show' if not $next_match else 'Prev show, ' + $next_match.group(1)
+#set $next_title = 'Next show' if not $prev_match else 'Next show, ' + $prev_match.group(1)
+#slurp
+		<div class="navShow"><img id="prevShow" src="$sbRoot/images/prev.png" alt="&lt;&lt;" title="$prev_title" class="addQTip" /></div>
+		<select id="pickShow" class="form-control form-control-inline input-sm">
+#echo '\n'.join($displayshowlist)#
 		</select>
-		<div class="navShow"><img id="nextShow" src="$sbRoot/images/next.png" alt="&gt;&gt;" title="Next Show" /></div>
+		<div class="navShow"><img id="nextShow" src="$sbRoot/images/next.png" alt="&gt;&gt;" title="$next_title" class="addQTip" /></div>
 	</div>

 	<div class="clearfix" style="margin-bottom:15px"></div>
@ -106,20 +111,15 @@ a:hover,a:focus{color:#9FAF33}
 	</div>
 #end if

-#if $sickbeard.DISPLAY_BACKGROUND:
-    #set $infotag = 'info-tag-bg'
-    #set $genretag = 'genre-tag-bg'
-#else
-    #set $infotag = 'info-tag-nobg'
-    #set $genretag = 'genre-tag-nobg'
-#end if
 	<div class="display-show-container">
 		<div id="posterCol" class="hidden-xs">
-			<a href="$sbRoot/showPoster/?show=$show.indexerid&amp;which=poster" rel="dialog" title="View Poster for $show.name"><img src="$sbRoot/showPoster/?show=$show.indexerid&amp;which=poster_thumb" class="tvshowImg" alt=""/></a>
+			<a href="$sbRoot/showPoster/?show=$show.indexerid&amp;which=poster" rel="dialog" title="View poster for $show.name">
+				<img src="$sbRoot/showPoster/?show=$show.indexerid&amp;which=poster_thumb" class="tvshowImg" alt="" />
+			</a>
 		</div>
-	
-		<div id="showCol" class="#if $sickbeard.DISPLAY_BACKGROUND then 'display-details-transparent' else 'display-details'#">
-#if int($show.paused) == 1:
+
+		<div id="showCol" class="display-details">
+#if int($show.paused):
 			<div class="paused paused-highlight">
 				<i class="sgicon-pause paused-outline"></i>
 			</div>
@ -135,49 +135,51 @@ a:hover,a:focus{color:#9FAF33}
    #end if
 					<div>
    #if $season_special:
-						<strong>Display Specials: </strong>
-        #if sickbeard.DISPLAY_SHOW_SPECIALS:
-						<a class="inner" href="$sbRoot/toggleDisplayShowSpecials/?show=$show.indexerid">Hide</a>
-        #else:
-						<a class="inner" href="$sbRoot/toggleDisplayShowSpecials/?show=$show.indexerid">Show</a>
-        #end if
+						<span class="details-title">Specials</span>
+						<span class="details-info">#if sickbeard.DISPLAY_SHOW_SPECIALS#<a href="#season-0">View</a><span style="margin:0 10px">-</span>#end if#<a class="inner" href="$sbRoot/toggleDisplayShowSpecials/?show=$show.indexerid">#echo ('Show', 'Hide')[sickbeard.DISPLAY_SHOW_SPECIALS]#</a></span>
    #end if
 					</div>
-					<div>
-						<strong>Season: </strong>
-    #if (len($seasonResults) > 11):
-						<select id="seasonJump" class="form-control form-control-inline input-sm">
-							<option value="jump">Jump to Season</option>
+
+					<div style="margin-top:3px">
+						<span class="details-title">Season</span>
+						<span class="details-info">
+    #if 12 < (len($seasonResults)):
+							<select id="seasonJump" class="form-control form-control-inline input-sm">
+								<option value="jump">Jump to season</option>
        #for $seasonNum in $seasonResults:
-							<option value="#season-$seasonNum['season']">#if 0 == int($seasonNum['season']) then 'Specials' else 'Season ' + str($seasonNum['season'])#</option>
+            #if 0 == int($seasonNum['season'])
+                #continue
+            #end if
+								<option value="#season-$seasonNum['season']">Season $seasonNum['season']</option>
        #end for
-						</select>
+							</select>
    #else:
        #for $seasonNum in $seasonResults:
-            #if 0 == int($seasonNum['season']):
-						<a href="#season-$seasonNum['season']">Specials</a>
-            #else:
-						<a href="#season-$seasonNum['season']">${str($seasonNum['season'])}</a>
+            #if 0 == int($seasonNum['season'])
+                #continue
            #end if
+							<a href="#season-$seasonNum['season']">$seasonNum['season']</a>
        #end for
    #end if
+						</span>
 					</div>
-#end if	
+#end if
 				</div>
-			
+
 				<div id="details-top">
 					<div id="showtitle" data-showname="$show.name">
 						<h2 class="title" id="scene_exception_$show.indexerid"><span>$show.name</span></h2>
-#if not $show.imdbid
-    #if $show.genre:
-        #for $genre in $show.genre[1:-1].replace('Science-Fiction','Sci-Fi').split('|')
-						<span class="label $genretag"><a href="<%= anon_url('http://www.imdb.com/search/title?at=0&genres=', genre.lower().replace('-','_'),'&amp;sort=moviemeter,asc&amp;title_type=tv_series') %>" target="_blank" title="View other popular $genre shows on imdb.com">$genre</a></span>
+#if not $sickbeard.USE_IMDB_INFO or not $show.imdbid
+## Disabling these trackt tags as they 404 on trakt2.0, remove False to re-enable
+    #if False and $show.genre:
+        #for $genre in $show.genre[1:-1].split('|')
+						<span class="label"><a href="<%= anon_url('http://trakt.tv/shows/popular/', genre.lower()) %>" target="_blank" title="View other popular $genre shows on trakt.tv">$genre</a></span>
        #end for
    #end if
 #end if
 #if $sickbeard.USE_IMDB_INFO and 'genres' in $show.imdb_info and '' != $show.imdb_info['genres']:
    #for $imdbgenre in $show.imdb_info['genres'].split('|')
-						<span class="label $genretag"><a href="<%= anon_url('http://www.imdb.com/search/title?at=0&genres=', imdbgenre.lower().replace('-','_'),'&amp;sort=moviemeter,asc&amp;title_type=tv_series') %>" target="_blank" title="View other popular $imdbgenre shows on imdb.com">$imdbgenre</a></span>
+						<span class="label"><a href="<%= anon_url('http://www.imdb.com/search/title?at=0&genres=', imdbgenre.lower().replace('-','_'),'&amp;sort=moviemeter,asc&amp;title_type=tv_series') %>" target="_blank" title="View other popular $imdbgenre shows on imdb.com">$imdbgenre.replace('Sci-Fi','Science-Fiction')</a></span>
    #end for
 #end if
 					</div> 
@ -186,132 +188,166 @@ a:hover,a:focus{color:#9FAF33}

 			<div id="details-wrapper">
 				<div id="details-right">
-					<ul class="list-unstyled">
-#if not $show.imdbid
+					<div>
+						<span class="details-title">Indexers</span>
+						<span class="details-info">
+#set $_show = $show
+#if $sickbeard.USE_IMDB_INFO and $show.imdbid
+							<a class="service" href="<%= anon_url('http://www.imdb.com/title/', _show.imdbid) %>" rel="noreferrer" onclick="window.open(this.href, '_blank'); return false;" title="Show IMDb info in new tab"><img alt="[imdb]" height="16" width="16" src="$sbRoot/images/imdb.png" /></a>
+#end if
+							<a class="service" href="<%= anon_url(sickbeard.indexerApi(_show.indexer).config['show_url'], _show.indexerid) %>" onclick="window.open(this.href, '_blank'); return false;" title="Show $sickbeard.indexerApi($show.indexer).name info in new tab"><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 class="service" href="<%= anon_url('http://thexem.de/search?q=', _show.name) %>" rel="noreferrer" onclick="window.open(this.href, '_blank'); return false;" title="Show XEM info in new tab"><img alt="[xem]" height="16" width="16" src="$sbRoot/images/xem.png" /></a>
+#end if
+						</span>
+					</div>
+
+#if not $sickbeard.USE_IMDB_INFO or not $show.imdbid
    #set $runtime = $show.runtime
    #set $startyear = $show.startyear
-#else
-    #if $sickbeard.USE_IMDB_INFO and 'countries' in $show.imdb_info:
+#elif $sickbeard.USE_IMDB_INFO
+    #if 'countries' in $show.imdb_info:
        #set $country = $show.imdb_info['countries']
    #end if
-    #if $sickbeard.USE_IMDB_INFO and 'year' in $show.imdb_info:
+    #if 'year' in $show.imdb_info:
        #set $runtime = $show.imdb_info['runtimes']
        #set $startyear = $show.imdb_info['year']
    #end if
 #end if
-
-#set $_show = $show
-						<li><strong>Indexers: </strong>
-#if $sickbeard.USE_IMDB_INFO and $show.imdbid
-							<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 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 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
-						</li>
-						<li><strong>Premiered: </strong><span>$startyear</span>
+					<div>
+						<span class="details-title">Premiered</span>
+						<span class="details-info">
+							<span class="space-right">$startyear</span>
 #if $sickbeard.USE_IMDB_INFO and 'country_codes' in $show.imdb_info and '' != $show.imdb_info['country_codes']:
    #for $country in $show.imdb_info['country_codes'].split('|')
-							<img class="flag" src="$sbRoot/images/flags/${$country}.png" width="16" height="11" />
+							<img class="flag space-right" src="$sbRoot/images/flags/${$country}.png" width="16" height="11" />
    #end for
 #end if
-						</li>
-#if $show.network and $show.airs:
-						<li><strong>Airs: </strong><span>$show.airs.replace('y','y,') #if not $network_timezones.test_timeformat($show.airs) then " <font color='#FF0000'><b>(invalid Timeformat)</b></font> " else ""#</span></li>
-						<li><strong>Network: </strong><span>$show.network</span></li>
-#else if $show.network:
-						<li><strong>Network: </strong><span>$show.network</span></li>
-#else if $show.airs:
-						<li><strong>Airs: </strong><span>$show.airs.replace('y','y,') #if not $network_timezones.test_timeformat($show.airs) then " <font color='#FF0000'><b>(invalid Timeformat)</b></font> " else ""#</span></li>
+						</span>
+					</div>
+
+#if $show.airs:
+    #set $showairs = '%s%s' % ($show.airs.replace('y', 'y,'),
+                               ('', ' <span class="red-text" style="font-weight:bold">(invalid timeformat)</span>')[not $network_timezones.test_timeformat($show.airs)])
+					<div>
+						<span class="details-title">Airs</span>
+						<span class="details-info">$showairs</span>
+					</div>
+#end if
+
+#if $show.network:
+					<div>
+						<span class="details-title">Network</span>
+						<span class="details-info">$show.network</span>
+					</div>
 #end if
-						<li><strong>Runtime: </strong><span>$runtime minutes</span></li>
+
+					<div>
+						<span class="details-title">Runtime</span>
+						<span class="details-info">$runtime minutes</span>
+					</div>
+
 #if '' != $show.status:
-						<li><strong>Status: </strong><span>$show.status</span></li>
+					<div>
+						<span class="details-title">Status</span>
+						<span class="details-info">$show.status</span>
+					</div>
 #end if
+
 #if $sickbeard.USE_IMDB_INFO and 'rating' in $show.imdb_info
+					<div>
+						<span class="details-title">IMDb rating</span>
+						<span class="details-info">
    #if '' != $show.imdb_info['votes']
        #set $rating_tip = '%s of 10 stars<br />%s votes' % (str($show.imdb_info['rating']), str($show.imdb_info['votes']))
-						<li><strong>IMDB Rating: </strong><span class="imdbstars" qtip-content="$rating_tip">$show.imdb_info['rating']</span></li>
+							<span class="imdbstars" qtip-content="$rating_tip">$show.imdb_info['rating']</span>
    #else
-						<li><strong>IMDB Rating: </strong><span>No votes available</span></li>
+							<span>No votes available</span>
    #end if
+						</span>
+					</div>
 #end if
+
 #set $anyQualities, $bestQualities = $Quality.splitQuality(int($show.quality))
 #if $show.quality in $qualityPresets:
-						<li><strong>Quality: </strong><span class="quality $qualityPresetStrings[$show.quality]">$qualityPresetStrings[$show.quality]</span></li>
+					<div>
+						<span class="details-title">Quality</span>
+						<span class="details-info">
+							<span class="quality $qualityPresetStrings[$show.quality]">$qualityPresetStrings[$show.quality]</span>
+						</span>
+					</div>
 #else:
    #if $anyQualities:
-						<li><strong>Initial: </strong><%=", ".join([Quality.qualityStrings[x] for x in sorted(anyQualities)])%></span></li>
+					<div>
+						<span class="details-title">Initial</span>
+						<span class="details-info">
+							#echo ', '.join([$Quality.qualityStrings[$x] for $x in sorted($anyQualities)])#
+						</span>
+					</div>
    #end if
    #if $bestQualities:
-						<li><strong>Replace with: </strong><%=", ".join([Quality.qualityStrings[x] for x in sorted(bestQualities)])%></span></li>
+					<div>
+						<span class="details-title">Replace with</span>
+						<span class="details-info">
+							#echo ', '.join([$Quality.qualityStrings[$x] for $x in sorted($bestQualities)])#
+						</span>
+					</div>
    #end if
 #end if
-					</ul>
 				</div>

 				<div id="details-left">
-					<div class="details-plot #if $show.overview == '' then 'no-plot' else ''#">
-#if $show.overview != '':
-    $show.overview
-#else
-						No plot overview available.
-#end if
+					<div class="details-plot#echo ('', ' no-plot')['' == $show.overview]#">
+						#echo ('No plot overview available', $show.overview)['' != $show.overview]#
 					</div>

 					<div id="details-bottom">
-						<span class="label $infotag"><img src="$sbRoot/images/flags/${show.lang}.png" width="16" height="11" alt="$show.lang" title="$show.lang" style="margin-top: -1px;" /></span>
-#if $showLoc[1]:
-						<span class="label $infotag">$showLoc[0]</span>
-#else:
-						<span class="label $infotag" style="color: red;">$showLoc[0]</span>
+						<span class="label addQTip" title="Info language, $show.lang"><img src="$sbRoot/images/flags/${show.lang}.png" width="16" height="11" alt="Info language, $show.lang" title="Info language, $show.lang" style="margin-top:-1px" /></span>
+						<span class="label addQTip" title="Location#echo (' no longer exists" style="background-color:#8f1515"', '"')[$showLoc[1]]#>$showLoc[0]</span>
+						<span class="label addQTip" title="Size">$sickbeard.helpers.human(sickbeard.helpers.get_size($showLoc[0]))</span>
+#set $filecount = sum([$c for $k, $c in $epCounts['videos'].items()])
+						<span class="label addQTip" title="Videos">$filecount file$sickbeard.helpers.maybe_plural($filecount)</span>
+#if $show.paused
+						<span class="label label-paused">Paused</span>
 #end if
-						<span class="label $infotag">$sickbeard.helpers.human(sickbeard.helpers.get_size($showLoc[0]))</span>
-#set $filecount = $epCounts[$Overview.QUAL] + $epCounts[$Overview.GOOD]
-						<span class="label $infotag">$filecount Files</span>
-#if $show.exceptions:
-						<span class="label $infotag addQTip" title="$exceptions_string.replace(', ','<br>')">Scene Names</span>
+#if ($anyQualities + $bestQualities) and int($show.archive_firstmatch)
+						<span class="label">Archive first match</span>
 #end if
-#if $sickbeard.USE_SUBTITLES
-    #if int($show.subtitles) == 1:
-						<span class="label $infotag">Subtitles</span>
-    #end if
+#if $show.exceptions:
+						<span class="label addQTip" title="$exceptions_string.replace(', ', '<br />')">Scene names</span>
 #end if
-#if $show.flatten_folders == 1 or $sickbeard.NAMING_FORCE_FOLDERS:
-						<span class="label $infotag">Flat Folders</span>
+#if $show.rls_ignore_words:
+						<span class="label addQTip" title="#echo $show.rls_ignore_words.replace(',', '<br />')#">Ignored words</span>
 #end if
-#if int($show.air_by_date) == 1:
-						<span class="label $infotag">Air-by-Date</span>
+#if $show.rls_require_words:
+						<span class="label addQTip" title="#echo $show.rls_require_words.replace(',', '<br />')#">Required words</span>
 #end if
-#if int($show.is_sports) == 1:
-						<span class="label $infotag">Sports</span>
+#if $show.flatten_folders or $sickbeard.NAMING_FORCE_FOLDERS:
+						<span class="label">Flat folders</span>
 #end if
-#if int($show.is_anime) == 1:
-						<span class="label $infotag">Anime</span>
+#if int($show.air_by_date):
+						<span class="label">Air by date</span>
 #end if
-#if int($show.dvdorder) == 1:
-						<span class="label $infotag">DVD Order</span>
+#if int($show.dvdorder):
+						<span class="label">DVD order</span>
 #end if
-#if int($show.scene) == 1:
-						<span class="label $infotag">Scene Numbering</span>
+#if int($show.scene):
+						<span class="label">Scene numbering</span>
 #end if
-#if $anyQualities + $bestQualities
-    #if int($show.archive_firstmatch) == 1
-						<span class="label $infotag">Archive First Match</span>
-    #end if
+#if $sickbeard.USE_SUBTITLES and int($show.subtitles):
+						<span class="label">Subtitles</span>
 #end if
-#if $show.rls_require_words:
-						<span class="label $infotag addQTip" title="#echo $show.rls_require_words.replace(',','<br>')#">Required Words</span> 
+#if int($show.is_sports):
+						<span class="label">Sports</span>
 #end if
-#if $show.rls_ignore_words:
-						<span class="label $infotag addQTip" title="#echo $show.rls_ignore_words.replace(',','<br>')#">Ignored Words</span>
+#if int($show.is_anime):
+						<span class="label">Anime</span>
 #end if
 #if $bwl and $bwl.whitelist:
-						<span class="label $infotag addQTip" title="#echo ', '.join($bwl.whitelist).replace(',','<br>')#">Wanted Group#if len($bwl.whitelist)>1 then "s" else ""#</span>
+						<span class="label addQTip" title="#echo ', '.join($bwl.whitelist).replace(',', '<br />')#">Wanted group$sickbeard.helpers.maybe_plural(len($bwl.whitelist))</span>
 #end if
 #if $bwl and $bwl.blacklist:
-						<span class="label $infotag addQTip" title="#echo ', '.join($bwl.blacklist).replace(',','<br>')#">Unwanted Group#if len($bwl.blacklist)>1 then "s" else ""#</span>
+						<span class="label addQTip" title="#echo ', '.join($bwl.blacklist).replace(',', '<br />')#">Unwanted group$sickbeard.helpers.maybe_plural(len($bwl.blacklist))</span>
 #end if
 					</div>
 				</div>
@ -331,108 +367,70 @@ a:hover,a:focus{color:#9FAF33}
 			<option value="$curStatus">$statusStrings[$curStatus]</option>
 #end for
 		</select>
-		<input type="hidden" id="showID" value="$show.indexerid" />
-		<input type="hidden" id="indexer" value="$show.indexer" />
-		<input class="btn btn-inline" type="button" id="changeStatus" value="Go" />
+		<input type="hidden" id="showID" value="$show.indexerid">
+		<input type="hidden" id="indexer" value="$show.indexer">
+		<input class="btn btn-inline" type="button" id="changeStatus" value="Go">
 	</div>

 	<div class="pull-right clearfix" id="checkboxControls">
-		<div style="padding-bottom: 5px;">
-			<label for="wanted"><span class="wanted"><input type="checkbox" id="wanted" checked="checked" /> Wanted: <b>$epCounts[$Overview.WANTED]</b></span></label>
-			<label for="qual"><span class="qual"><input type="checkbox" id="qual" checked="checked" /> Low Quality: <b>$epCounts[$Overview.QUAL]</b></span></label>
-			<label for="good"><span class="good"><input type="checkbox" id="good" checked="checked" /> Downloaded: <b>$epCounts[$Overview.GOOD]</b></span></label>
-			<label for="skipped"><span class="skipped"><input type="checkbox" id="skipped" checked="checked" /> Skipped: <b>$epCounts[$Overview.SKIPPED]</b></span></label>
-			<label for="snatched"><span class="snatched"><input type="checkbox" id="snatched" checked="checked" /> Snatched: <b>$epCounts[$Overview.SNATCHED]</b></span></label>
+		<div style="padding-bottom:5px">
+			<label for="wanted"><span class="wanted"><input type="checkbox" id="wanted" checked="checked"> Wanted: <b>$epCounts[$Overview.WANTED]</b></span></label>
+			<label for="qual"><span class="qual"><input type="checkbox" id="qual" checked="checked"> Low quality: <b>$epCounts[$Overview.QUAL]</b></span></label>
+			<label for="good"><span class="good"><input type="checkbox" id="good" checked="checked"> Downloaded: <b>$epCounts[$Overview.GOOD]</b></span></label>
+			<label for="skipped"><span class="skipped"><input type="checkbox" id="skipped" checked="checked"> Skipped: <b>$epCounts[$Overview.SKIPPED]</b></span></label>
+			<label for="snatched"><span class="snatched"><input type="checkbox" id="snatched" checked="checked"> Snatched: <b>$epCounts[$Overview.SNATCHED]</b></span></label>
 		</div>
-		
+
 		<div class="pull-right" >
-			<button class="btn btn-xs seriesCheck">Select Filtered Episodes</button> 
-			<button class="btn btn-xs clearAll">Clear All</button>
+			<button class="btn btn-xs seriesCheck">Select filtered episodes</button>
+			<button class="btn btn-xs clearAll">Clear all</button>
 		</div>
 	</div>

 	<div class="clearfix"></div>

 #set $curSeason = -1
-#set $seasonCount = 0
 #set $odd = 0

-#for $epResult in $sqlResults:
-    #set $epStr = str($epResult['season']) + 'x' + str($epResult['episode'])
-    #if not $epStr in $epCats:
-        #continue
-    #end if
+#set $scene, $scene_anime = (False, False)
+#if not $show.air_by_date and not $show.is_sports and not $show.is_anime and $show.is_scene:
+    #set $scene = True
+#elif not $show.air_by_date and not $show.is_sports and $show.is_anime and $show.is_scene:
+    #set $scene_anime = True
+#end if

-    #if not $sickbeard.DISPLAY_SHOW_SPECIALS and 0 == int($epResult['season']):
+#if 0 == len($sqlResults)
+    <div style="margin-top:50px"><h3>Episodes no longer exist for this show at the associated indexer</h3></div>
+#else:
+#for $epResult in $sqlResults:
+    #set $epStr = '%sx%s' % ($epResult['season'], $epResult['episode'])
+    #if not $epStr in $epCats or (0 == int($epResult['season']) and not $sickbeard.DISPLAY_SHOW_SPECIALS):
        #continue
-    #end if	
-
-    #set $scene = False
-    #set $scene_anime = False
-    #if not $show.air_by_date and not $show.is_sports and not $show.is_anime and $show.is_scene:
-        #set $scene = True
-    #elif not $show.air_by_date and not $show.is_sports and $show.is_anime and $show.is_scene:
-        #set $scene_anime = True
-    #end if
-
-    #set ($dfltSeas, $dfltEpis, $dfltAbsolute) = (0, 0, 0)
-
-    #if (epResult['season'], epResult['episode']) in $xem_numbering:
-        #set ($dfltSeas, $dfltEpis) = $xem_numbering[(epResult['season'], epResult['episode'])]
-    #end if
-
-    #if epResult['absolute_number'] in $xem_absolute_numbering:
-        #set $dfltAbsolute = $xem_absolute_numbering[epResult['absolute_number']]
    #end if
+    #slurp
+    #if $curSeason != int($epResult['season']):
+        #if 0 <= $curSeason:
+	</tbody>
+</table>

-    #if epResult['absolute_number'] in $scene_absolute_numbering:
-        #set $scAbsolute = $scene_absolute_numbering[epResult['absolute_number']]
-        #set $dfltAbsNumbering = False
-    #else
-        #set $scAbsolute = $dfltAbsolute
-        #set $dfltAbsNumbering = True
-    #end if
-
-    #if (epResult['season'], epResult['episode']) in $scene_numbering:
-        #set ($scSeas, $scEpis) = $scene_numbering[(epResult['season'], epResult['episode'])]
-        #set $dfltEpNumbering = False
-    #else
-        #set ($scSeas, $scEpis) = ($dfltSeas, $dfltEpis)
-        #set $dfltEpNumbering = True
-    #end if
-
-    #if int($epResult['season']) != $curSeason:
-
-<table class="sickbeardTable display-show #if $sickbeard.DISPLAY_BACKGROUND then 'display-season' else ''#" cellspacing="0" border="0" cellpadding="0">
-	<tr id="season-$epResult['season']">
-		<th class="row-seasonheader" colspan="13" style="width: auto;">
-
-        #if $sickbeard.DISPLAY_ALL_SEASONS == False and $seasonCount >= 1:
-			<button id="showseason-$epResult['season']" type="button" class="btn btn-default pull-right" data-toggle="collapse" data-target="#collapseSeason-$epResult['season']"><span class="sgicon-arrowdown"></span> Show Episodes</button>
-			<script type="text/javascript">
-			<!--
-				\$(function() {
-					\$('#collapseSeason-$epResult['season']').on('hide.bs.collapse', function () {
-						\$('#showseason-$epResult['season']').html('<span class="sgicon-arrowdown"></span> Show Episodes');
-					})
-					\$('#collapseSeason-$epResult['season']').on('show.bs.collapse', function () {
-						\$('#showseason-$epResult['season']').html('<span class="sgicon-arrowup"></span> Hide Episodes');
-					})
-				});
-			//-->
-			</script>
        #end if
-					<h3><a name="season-$epResult['season']"></a>#if 0 == int($epResult['season']) then 'Specials' else 'Season ' + str($epResult['season'])# <!-- Download count &nbsp;<span class="season-status"><b>[</b> <span class="footerhighlight">0</span> / <span class="footerhighlight">0</span> <b>]</b></span> --></h3>
+<table class="sickbeardTable" cellspacing="0" border="0" cellpadding="0">
+	<tr id="season-$epResult['season']">
+		<th class="row-seasonheader" colspan="13">
+
+			<button id="showseason-$epResult['season']" type="button" class="btn btn-default pull-right#echo '%s%s' % (('', ' display-season')[int($epResult['season']) in $display_seasons], ('', ' latest-season')[$latest_season == int($epResult['season'])])#" data-toggle="collapse" data-target="#collapseSeason-$epResult['season']">Show episodes<span class="sgicon-arrowdown" style="margin-left:4px"></span></button>
+        #set $videos = 'none' if $epResult['season'] not in $epCounts['videos'] else $epCounts['videos'][$epResult['season']]
+        #set $archived = False if $epResult['season'] not in $epCounts['archived'] else $epCounts['archived'][$epResult['season']]
+			<h3><a name="season-$epResult['season']"></a>#if 0 == int($epResult['season']) then 'Specials' else 'Season ' + str($epResult['season'])
+				<span class="season-status"><b>[</b> <span class="footerhighlight">$videos</span> / <span class="footerhighlight">$epCounts['totals'][$epResult['season']]</span><span class="archived-count">#echo ('', '&nbsp;with <span class="footerhighlight">%s</span> archived' % $archived)[0 < $archived]#</span> <b>]</b></span>
+			</h3>
 		</th>
 	</tr>

-        #set $seasonCount = $seasonCount + 1
-        #if $sickbeard.DISPLAY_ALL_SEASONS == False and $seasonCount >= 2:
-		<tbody class="collapse" id="collapseSeason-$epResult['season']">
-        #end if
+	<tbody id="collapseSeason-$epResult['season']" class="collapse#echo '%s%s' % (('', ' display-season')[int($epResult['season']) in $display_seasons], ('', ' latest-season')[$latest_season == int($epResult['season'])])#">

 		<tr id="season-$epResult['season']-cols" class="seasoncols">
-			<th class="col-checkbox"><input type="checkbox" class="seasonCheck" id="$epResult['season']" /></th>
+			<th class="col-checkbox"><input type="checkbox" class="seasonCheck" id="$epResult['season']"></th>
 			<th class="col-metadata">NFO</th>
 			<th class="col-metadata">TBN</th>
 			<th class="col-ep">Episode</th>
@ -443,7 +441,7 @@ a:hover,a:focus{color:#9FAF33}
 			<th class="col-ep">Scene</th>
        #end if
        #if $scene_anime:
-			<th class="col-ep">Scene Absolute</th>
+			<th class="col-ep">Scene absolute</th>
        #end if
 			<th class="col-name">Name</th>
 			<th class="col-airdate">Airdate</th>
@ -454,7 +452,7 @@ a:hover,a:focus{color:#9FAF33}
 			<th class="col-search">Search</th>
 		</tr>
        #set $curSeason = int($epResult['season'])
-    #end if    
+    #end if

    #set $epLoc = $epResult['location']
    #set never_aired = 0 < $curSeason and 1 == int($epResult['airdate'])
@ -463,13 +461,13 @@ a:hover,a:focus{color:#9FAF33}

 		<td class="col-checkbox">
    #if $UNAIRED != int($epResult['status']) and not $never_aired
-			<input type="checkbox" class="epCheck" id="<%=str(epResult['season'])+'x'+str(epResult['episode'])%>" name="<%=str(epResult['season']) +'x'+str(epResult['episode']) %>" />
+			<input type="checkbox" class="epCheck" id="#echo $epStr#" name="#echo $epStr#">
    #end if
 		</td>
-    
-		<td align="center"><img src="$sbRoot/images/#if 1 == $epResult['hasnfo'] then 'nfo.gif" alt="Y' else 'nfo-no.gif" alt="N'#" width="23" height="11" /></td>

-		<td align="center"><img src="$sbRoot/images/#if 1 == $epResult['hastbn'] then 'tbn.gif" alt="Y' else 'tbn-no.gif" alt="N'#" width="23" height="11" /></td>
+		<td align="center"><img src="$sbRoot/images/#if int($epResult['hasnfo']) then 'nfo.gif" alt="Yes" title="Yes' else 'nfo-no.gif" alt="No" title="No'#" width="23" height="11" /></td>
+
+		<td align="center"><img src="$sbRoot/images/#if int($epResult['hastbn']) then 'tbn.gif" alt="Yes" title="Yes' else 'tbn-no.gif" alt="No" title="No'#" width="23" height="11" /></td>

 		<td align="center">
    #if $epLoc and $show._location and $epLoc.lower().startswith($show._location.lower()):
@ -490,42 +488,42 @@ a:hover,a:focus{color:#9FAF33}
    #end if

    #if $scene:
+        #set $dfltSeas, $dfltEpis = (0, 0) if ($epResult['season'], $epResult['episode']) not in $xem_numbering else $xem_numbering[($epResult['season'], $epResult['episode'])]
 		<td align="center">
-			<input type="text" placeholder="<%=str(dfltSeas) + 'x' + str(dfltEpis)%>" size="6" maxlength="8"
+			<input type="text" placeholder="#echo '%sx%s' % ($dfltSeas, $dfltEpis)#" size="6" maxlength="8"
 				class="sceneSeasonXEpisode form-control input-scene" data-for-season="$epResult['season']" data-for-episode="$epResult['episode']"
-				id="sceneSeasonXEpisode_$show.indexerid<%='_'+str(epResult['season'])+'_'+str(epResult['episode'])%>"
+				id="sceneSeasonXEpisode_#echo '%s_%s_%s' % ($show.indexerid, $epResult['season'], $epResult['episode'])#"
 				title="Change the value here if scene numbering differs from the indexer episode numbering"
-        #if $dfltEpNumbering:
-				value=""
+        #if ($epResult['season'], $epResult['episode']) in $scene_numbering:
+            #set $scSeas, $scEpis = $scene_numbering[($epResult['season'], $epResult['episode'])]
+				value="#echo '%sx%s' % ($scSeas, $scEpis)#"
        #else
-				value="<%=str(scSeas) + 'x' + str(scEpis)%>"
+				value=""
        #end if
-				style="padding: 0; text-align: center; max-width: 60px;" />
+				style="padding:0; text-align:center; max-width:60px">
 		</td>
    #elif $scene_anime:
+        #set $dfltAbsolute = 0 if $epResult['absolute_number'] not in $xem_absolute_numbering else $xem_absolute_numbering[$epResult['absolute_number']]
 		<td align="center">
-			<input type="text" placeholder="<%=str(dfltAbsolute)%>" size="6" maxlength="8"
+			<input type="text" placeholder="$dfltAbsolute" size="6" maxlength="8"
 				class="sceneAbsolute form-control input-scene" data-for-absolute="$epResult['absolute_number']"
-				id="sceneAbsolute_$show.indexerid<%='_'+str(epResult['absolute_number'])%>"
+				id="sceneAbsolute_$show.indexerid_$epResult['absolute_number']"
 				title="Change the value here if scene absolute numbering differs from the indexer absolute numbering"
-        #if $dfltAbsNumbering:
-				value=""
+        #if $epResult['absolute_number'] in $scene_absolute_numbering:
+				value="$scene_absolute_numbering[$epResult['absolute_number']]"
        #else
-				value="<%=str(scAbsolute)%>"
+				value=""
        #end if
-				style="padding: 0; text-align: center; max-width: 60px;" />
+				style="padding:0; text-align:center; max-width:60px" />
 		</td>
    #end if

 		<td class="col-name">
-    #if '' != $epResult['description'] and None != $epResult['description']:
-			<img src="$sbRoot/images/info32.png" width="16" height="16" class="plotInfo" alt="" id="plot_info_$show.indexerid<%='_' + str(epResult['season']) + '_' + str(epResult['episode'])%>" />
-    #else:
-			<img src="$sbRoot/images/info32.png" width="16" height="16" class="plotInfoNone" alt="" />
-    #end if
+			<img src="$sbRoot/images/info32.png" width="16" height="16" alt="" class="plotInfo#echo '%s" />' %\
+                ('None', ('" id="plot_info_%s_%s_%s' % ($show.indexerid, $epResult['season'], $epResult['episode'])))[None is not $epResult['description'] and '' != $epResult['description']]#
 			$epResult['name']
 		</td>
-		
+
 		<td class="col-airdate">
 			<span class="${fuzzydate}">#if 1 == int($epResult['airdate']) then 'never' else $sbdatetime.sbdatetime.sbfdate($sbdatetime.sbdatetime.convert_to_setting($network_timezones.parse_date_time($epResult['airdate'], $show.airs, $show.network)))#</span>
 		</td>
@ -543,42 +541,50 @@ a:hover,a:focus{color:#9FAF33}
    #end if

    #set $curStatus, $curQuality = $Quality.splitCompositeStatus(int($epResult['status']))
-    #if Quality.NONE != $curQuality:   
+    #if Quality.NONE != $curQuality:
 		<td class="col-status">$statusStrings[$curStatus] <span class="quality $Quality.qualityStrings[$curQuality].replace('720p','HD720p').replace('1080p','HD1080p').replace('RawHD TV', 'RawHD').replace('HD TV', 'HD720p')">$Quality.qualityStrings[$curQuality]</span></td>
    #else:
 		<td class="col-status">$statusStrings[$curStatus]</td>
    #end if
-    
+
 		<td class="col-search">
    #if 0 != int($epResult['season']):
        #if (int($epResult['status']) in $Quality.SNATCHED or int($epResult['status']) in $Quality.DOWNLOADED) and $sickbeard.USE_FAILED_DOWNLOADS:
-			<a class="epRetry" id="<%=str(epResult['season'])+'x'+str(epResult['episode'])%>" name="<%=str(epResult['season']) +'x'+str(epResult['episode']) %>" href="retryEpisode?show=$show.indexerid&amp;season=$epResult['season']&amp;episode=$epResult['episode']"><img src="$sbRoot/images/search16.png" height="16" alt="retry" title="Retry Download" /></a>
+			<a class="epRetry" id="#echo $epStr#" name="#echo $epStr#" href="retryEpisode?show=$show.indexerid&amp;season=$epResult['season']&amp;episode=$epResult['episode']"><img src="$sbRoot/images/search16.png" height="16" alt="retry" title="Retry download" /></a>
        #else:
-			<a class="epSearch" id="<%=str(epResult['season'])+'x'+str(epResult['episode'])%>" name="<%=str(epResult['season']) +'x'+str(epResult['episode']) %>" href="searchEpisode?show=$show.indexerid&amp;season=$epResult['season']&amp;episode=$epResult['episode']"><img src="$sbRoot/images/search16.png" width="16" height="16" alt="search" title="Manual Search" /></a>
+			<a class="epSearch" id="#echo $epStr#" name="#echo $epStr#" href="searchEpisode?show=$show.indexerid&amp;season=$epResult['season']&amp;episode=$epResult['episode']"><img src="$sbRoot/images/search16.png" width="16" height="16" alt="search" title="Manual search" /></a>
        #end if
    #end if

    #if $sickbeard.USE_SUBTITLES and $show.subtitles and len(set(str($epResult['subtitles']).split(',')).intersection(set($subtitles.wantedLanguages()))) < len($subtitles.wantedLanguages()) and $epResult['location']
-			<a class="epSubtitlesSearch" href="searchEpisodeSubtitles?show=$show.indexerid&amp;season=$epResult['season']&amp;episode=$epResult['episode']"><img src="$sbRoot/images/closed_captioning.png" height="16" alt="search subtitles" title="Search Subtitles" /></a>
+			<a class="epSubtitlesSearch" href="searchEpisodeSubtitles?show=$show.indexerid&amp;season=$epResult['season']&amp;episode=$epResult['episode']"><img src="$sbRoot/images/closed_captioning.png" height="16" alt="search subtitles" title="Search subtitles" /></a>
    #end if
 		</td>
 	</tr>
 #end for
-#if $sickbeard.DISPLAY_ALL_SEASONS == False and $seasonCount > 1:
 	</tbody>
-#end if
 </table>
+#end if

-<script>
-\$(document).ready(function(){
-	\$('.details-plot').collapser({
+<script type="text/javascript" charset="utf-8">
+#raw
+$(document).ready(function(){
+	$('.details-plot').collapser({
 		mode: 'lines',
 		truncate: 10,
-		showText: '<span class="pull-right moreless"><i class="sgicon-arrowdown"></i> More</span>',
-		hideText: '<span class="pull-right moreless"><i class="sgicon-arrowup"></i> Less</span>',
+		showText: '<span class="pull-right moreless"><i class="sgicon-arrowdown" style="margin-right:2px"></i>more</span>',
+		hideText: '<span class="pull-right moreless"><i class="sgicon-arrowup" style="margin-right:2px"></i>less</span>',
 		showClass: 'show-class'
 	});
+
+	$('button[data-target*="collapseSeason-"]').each(function(k,v){
+		var tbl = $($(this).attr('data-target')),
+			btn = $('#' + $(this).attr('id'));
+		tbl.on('hide.bs.collapse', function () { btn.html('Show episodes<span class="sgicon-arrowdown" style="margin-left:4px"></span>'); })
+		tbl.on('show.bs.collapse', function () { btn.html('Hide episodes<span class="sgicon-arrowup" style="margin-left:4px"></span>'); })
+	});
+#end raw
 });
 </script>
-
+</div>
 #include $os.path.join($sickbeard.PROG_DIR, 'gui/slick/interfaces/default/inc_bottom.tmpl')
--- a/gui/slick/interfaces/default/inc_bottom.tmpl
+++ b/gui/slick/interfaces/default/inc_bottom.tmpl
@ -23,12 +23,12 @@
    % ($today, str($SKIPPED), str($WANTED))\
    + ' OR (status IN %s) OR (status IN %s))) AS ep_total FROM tv_episodes tv_eps LIMIT 1'\
    % ($status_quality, $status_download)
-
+#slurp
 #set $sql_result = $my_db.select($sql_statement)
-
+#slurp
 #set $shows_total = len($sickbeard.showList)
 #set $shows_active = len([show for show in $sickbeard.showList if 0 == show.paused and 'Ended' != show.status])
-
+#slurp
 #if $sql_result:
    #set $ep_snatched = $sql_result[0]['ep_snatched']
    #set $ep_downloaded = $sql_result[0]['ep_downloaded']
@ -39,7 +39,7 @@
    #set $ep_total = 0
 #end if
 #set $ep_percentage = '' if $ep_total == 0 else '(<span class="footerhighlight">%s%%</span>)' % re.sub(r'(\d+)(\.\d)\d+', r'\1\2', str((float($ep_downloaded)/float($ep_total))*100))
-
+#slurp
 #try
    #set $localRoot = $sbRoot
 #except NotFound
@ -50,7 +50,7 @@
 #except NotFound
    #set $localheader = ''
 #end try
-
+#slurp
 		<span class="footerhighlight">$shows_total</span> shows (<span class="footerhighlight">$shows_active</span> active)
 		| <span class="footerhighlight">$ep_downloaded</span><%=
 (
@ -62,9 +62,8 @@
 %>&nbsp;/&nbsp;<span class="footerhighlight">$ep_total</span> episodes downloaded $ep_percentage
 		| recent search: <span class="footerhighlight"><%= str(sickbeard.recentSearchScheduler.timeLeft()).split('.')[0] %></span>
 		| backlog search: <span class="footerhighlight"><%= str(sickbeard.backlogSearchScheduler.timeLeft()).split('.')[0] %></span>
-
+#slurp
 	</div>
-
 </footer>

 </body>
--- a/gui/slick/interfaces/default/inc_top.tmpl
+++ b/gui/slick/interfaces/default/inc_top.tmpl
@ -60,8 +60,6 @@
 		<script type="text/javascript" src="$sbRoot/js/lib/imagesloaded.pkgd.min.js?$sbPID"></script>
 		<script type="text/javascript" src="$sbRoot/js/lib/jquery.confirm.js?$sbPID"></script>
 		<script type="text/javascript" src="$sbRoot/js/script.js?$sbPID"></script>
-
-		
 #if $sickbeard.FUZZY_DATING:
 		<script type="text/javascript" src="$sbRoot/js/moment/moment.min.js?$sbPID"></script>
 		<script type="text/javascript" src="$sbRoot/js/fuzzyMoment.js?$sbPID"></script>
@ -128,7 +126,13 @@
 		<script type="text/javascript" src="$sbRoot/js/confirmations.js?$sbPID"></script>
 	</head>
 #set $tab = 4
-	<body>
+#set $body_attr = ''
+#try
+    #set $body_attr += ' id="%s"' % $page_body_attr
+#except
+    #pass
+#end try
+	<body$body_attr>
 		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
 			<div class="container-fluid">
 				<div class="navbar-header">
--- a/sickbeard/webserve.py
+++ b/sickbeard/webserve.py
@ -1068,12 +1068,40 @@ class Home(MainHandler):
        epCounts[Overview.GOOD] = 0
        epCounts[Overview.UNAIRED] = 0
        epCounts[Overview.SNATCHED] = 0
+        epCounts['videos'] = {}
+        epCounts['archived'] = {}
+        epCounts['totals'] = {}
+        highest_season = 0
+        latest_season = 0

        for curResult in sqlResults:
            curEpCat = showObj.getOverview(int(curResult['status']))
            if curEpCat:
                epCats[str(curResult['season']) + 'x' + str(curResult['episode'])] = curEpCat
                epCounts[curEpCat] += 1
+            if '' != curResult['location']:
+                if curResult['season'] not in epCounts['videos']:
+                    epCounts['videos'][curResult['season']] = 1
+                else:
+                    epCounts['videos'][curResult['season']] += 1
+            if curResult['season'] not in epCounts['totals']:
+                epCounts['totals'][curResult['season']] = 1
+            else:
+                epCounts['totals'][curResult['season']] += 1
+            if ARCHIVED == curResult['status']:
+                if curResult['season'] not in epCounts['archived']:
+                    epCounts['archived'][curResult['season']] = 1
+                else:
+                    epCounts['archived'][curResult['season']] += 1
+            if highest_season < curResult['season'] and 1000 < curResult['airdate'] and UNAIRED < curResult['status']:
+                highest_season = curResult['season']
+
+        latest_season = int(sorted(epCounts['totals'])[-1::][0])
+
+        display_seasons = []
+        if 1 < highest_season:
+            display_seasons += [1]
+        display_seasons += [highest_season]

        def titler(x):
            return (remove_article(x), x)[not x or sickbeard.SORT_ARTICLE]
@ -1105,6 +1133,8 @@ class Home(MainHandler):

        t.epCounts = epCounts
        t.epCats = epCats
+        t.display_seasons = display_seasons
+        t.latest_season = latest_season

        showObj.exceptions = scene_exceptions.get_scene_exceptions(showObj.indexerid)