From 31f5b3ea2360cca099ecbaa87233ad450bdd01ff Mon Sep 17 00:00:00 2001
From: JackDandy <jackdandy@users.noreply.github.com>
Date: Sun, 16 Jun 2024 22:27:15 +0100
Subject: [PATCH] Move the dynamic list of roles from the fix height cards into
 the flexible height popup.

Tweaks to order of stuff and fix issue where images to the right flowed badly on different height images on the left on the person view
Change darker popup title for improve visual contrast
Start of fix scale image
---
 gui/slick/interfaces/default/cast_person.tmpl | 11 ++++---
 .../interfaces/default/home_browseShows.tmpl  | 31 +++++++++++++------
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/gui/slick/interfaces/default/cast_person.tmpl b/gui/slick/interfaces/default/cast_person.tmpl
index 1c5eddae..30bf5b0c 100644
--- a/gui/slick/interfaces/default/cast_person.tmpl
+++ b/gui/slick/interfaces/default/cast_person.tmpl
@@ -45,6 +45,7 @@
 #person-content .thumb{display:block}
 #person-content > .main-image{margin-bottom:19px}
 #person-content > .cast .cast-bg{height:300px; margin:0 auto; background:url(/images/poster-person.jpg) center center no-repeat}
+#character-content{margin-left:235px}
 </style>
 <%
 def param(visible=True, rid=None, cache_person=None, cache_char=None, person=None, role=None, tvid_prodid=None, thumb=None, oid=None, pid=None):
@@ -64,10 +65,6 @@ def param(visible=True, rid=None, cache_person=None, cache_char=None, person=Non
 %>
 	<div id="person">
 		<div id="person-content">
-			<div class="main-image cast">
-				<a class="thumb" href="$sbRoot/$param(rid=$person.ref_id(), cache_person=True, thumb=0, oid=$person.id)" rel="dialog"><img src="$sbRoot/$param(False, rid=$person.id, cache_person=True)" class="cast-bg"></a>
-			</div>
-
 			<div class="intro">#slurp
 #set $gender = ''
 #if $PersonGenders.female == $person.gender#
@@ -78,6 +75,10 @@ def param(visible=True, rid=None, cache_person=None, cache_char=None, person=Non
 				<h2><span class="name">$person.name</span>#if $age #<span class="age">($age)</span>#end if##if $gender #<span class="gender" title="Biological gender">$gender</span>#end if##if $person.deathday # &dagger;#end if#</h2>
 			</div>
 
+			<div class="main-image cast">
+				<a class="thumb" href="$sbRoot/$param(rid=$person.ref_id(), cache_person=True, thumb=0, oid=$person.id)" rel="dialog"><img src="$sbRoot/$param(False, rid=$person.id, cache_person=True)" class="cast-bg"></a>
+			</div>
+
 <style>
 #character-content .cast-bg{display:block; background-color:#181818; border:1px solid #181818; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px}
 #character-content .cast .cast-bg{height:200px; background:url(/images/poster-person.jpg) center center no-repeat}
@@ -98,7 +99,7 @@ def param(visible=True, rid=None, cache_person=None, cache_char=None, person=Non
         #if not $section_header
             #set $section_header = True
 			<div id="character-content">
-				<div style="margin:40px 0 7px">is known in your show list as,</div>
+				<div style="margin:0 0 7px">is known in your show list as,</div>
 		#end if
 
 				<div class="role-panel">
diff --git a/gui/slick/interfaces/default/home_browseShows.tmpl b/gui/slick/interfaces/default/home_browseShows.tmpl
index b2cd281a..8781973b 100644
--- a/gui/slick/interfaces/default/home_browseShows.tmpl
+++ b/gui/slick/interfaces/default/home_browseShows.tmpl
@@ -24,7 +24,10 @@
 #set sg_root = $getVar('sbRoot', WEB_ROOT)
 ##
 #import os.path
+#set global $inc_ofi = True
 #include $os.path.join($sg_str('PROG_DIR'), 'gui/slick/interfaces/default/inc_top.tmpl')
+<script type="text/javascript" src="$sbRoot/js/cast.js?v=$sbPID"></script>
+
 <script>
 	var config = {
 		homeSearchFocus: #echo ['!1','!0'][$sg_var('HOME_SEARCH_FOCUS', True)]#,
@@ -63,7 +66,7 @@
 		});
 	});
 
-$(document).ready(function(){
+$(function() {
 	// initialise combos for dirty page refreshes
 	$('#showsort').val('#end raw#$saved_showsort_view#raw#');
 
@@ -288,6 +291,16 @@ $(document).ready(function(){
 				input.focus();
 		}
 	});
+
+	objectFitImages();
+
+	$('#content').find('img.browse-image').each(function(i, oImage){
+		removeImageBackground(oImage);
+	});
+
+	$('#content').find('img.browse-image').each(function (i, oImage){
+		scaleImage(oImage);
+	});
 });
 
 #end raw
@@ -505,7 +518,7 @@ $(document).ready(function(){
 		<div class="show-card-inner">
 			<div class="browse-image">
 				<a class="browse-image" href="<%= anon_url(this_show['url_src_db']) %>" target="_blank"
-					title="<span style='color: rgb(66, 139, 202)'>$re.sub(r'(?m)\s+\((?:19|20)\d\d\)\s*$', '', $title_html)</span>
+					title="<span style='color: #226baa'>$re.sub(r'(?m)\s+\((?:19|20)\d\d\)\s*$', '', $title_html)</span>
 
 					#if $this_show['genres']#<br><div style='font-weight:bold'>(<em>$this_show['genres']</em>)</div>#end if#
 					#if $kwargs and $use_returning#<span style='display:block;clear:both;font-weight:bold;font-size:0.9em;color:#888'><em>Season $this_show['episode_season'] return#echo ('s', 'ed')[$this_show['return_past']]# $this_show['str_returning']</em></span>#end if#
@@ -518,6 +531,13 @@ $(document).ready(function(){
 						<span style='font-size:0.9em;color:#888#if $this_show.get('country')#;padding-left:6px#end if#'><em>Language:#if not $this_show.get('language_img')#&nbsp;$this_show.get('language')#else#<img style='margin:0 0 2px 4px;width:16px;height:11px;vertical-align:middle' title='${this_show['language']}' src='$sbRoot/images/flags/${$this_show['language'].lower()}.png' width='16' height='11'>#end if#</em></span>
             #end if
 					</p>
+        #end if
+        #if $this_show.get('p_chars')
+					<p>
+            #for $char in $this_show['p_chars']
+						<span style='display:block;clear:both;font-weight:bold;font-size:0.9em;color:#393'>as $char[0]#if $RoleTypes.ActorMain != $char[1]# ($char[2]/$char[3] eps)#end if#</span>
+            #end for
+					</p>
         #end if
 					<p style='margin:0 0 2px'>#echo re.sub(r'([,\.!][^,\.!]*?)$', '...', re.sub(r'([!\?\.])(?=\w)', r'\1 ', $overview)).replace('.....', '...')#</p>
 					<p>#if $this_show['str_premiered']#<span style='font-weight:bold;font-size:0.9em;color:#888'><em>#if 'Trakt' == $browse_type and $kwargs and 'returning' == $mode#Air#else#First air#end if##echo ('s', 'ed')[$this_show['started_past']]#: $this_show['str_premiered']</em></span>#end if#
@@ -538,13 +558,6 @@ $(document).ready(function(){
 			<div class="show-title">
 				#echo ((re.sub(r'^((?:A(?!\s+to)n?)|The)\s(\w)', r'<span class="article">\1</span> \2', $this_show['title']), $this_show['title'])[$sg_var('SORT_ARTICLE')], '<span>&nbsp;</span>')['' == $this_show['title']]#
 			</div>
-			#if $this_show.get('p_chars')
-				<div class="show-title">
-					#for $char in $this_show['p_chars']
-						<div>as $char[0]#if $RoleTypes.ActorMain != $char[1]# ($char[2]/$char[3] eps)#end if#</div>
-					#end for
-				</div>
-			#end if
         #if 'Ani' not in $browse_type
 			<a class="show-toggle-hide" href="$sg_root/add-shows/show-toggle-hide?ids=$show_id" title="#echo ('H', 'Unh')[any($hide)]#ide"><i class="sgicon-delete"></i></a>
         #end if