Fix for http://webtrees.net/en/forums/3-help-for-beta-and-svn-versions/12905-clipped-thumb-on-indi-page-requires-large-window#12932

7 files changed, 109 insertions, 63 deletions

diff --git a/individual.php b/individual.php
index b867691c2d..585da71a40 100644
--- a/individual.php
+++ b/individual.php
@@ -140,6 +140,19 @@ jQuery(document).ready(function() {
 		objSeparator.css('height', objBar.outerHeight() + 'px');
 	}
 	
+	// calculate header accordion width from its outer container and thubnail image sizes
+	    var indi_header_div = document.getElementById('indi_header').offsetWidth - 20;
+		var indi_mainimage_div = document.getElementById('indi_mainimage').offsetWidth +20;
+		var header_accordion_div = document.getElementById('header_accordion1');
+		header_accordion_div.style.width = indi_header_div - indi_mainimage_div +'px';
+
+                jQuery(window).bind("resize", function(){
+					var indi_header_div = document.getElementById('indi_header').offsetWidth - 20;
+					var indi_mainimage_div = document.getElementById('indi_mainimage').offsetWidth +20;
+					var header_accordion_div = document.getElementById('header_accordion1');
+					header_accordion_div.style.width = indi_header_div - indi_mainimage_div +'px';
+                 });
+		
 });
 <?php
 echo WT_JS_END;
@@ -150,7 +163,12 @@ echo
 	'<div id="indi_left">',
 	'<div id="indi_header">';
 if ($controller->indi->canDisplayDetails()) {
-$globalfacts=$controller->getGlobalFacts();
+	echo '<div id="indi_mainimage">'; // Display highlight image
+	if ($MULTI_MEDIA && $controller->canShowHighlightedObject()) {
+		echo $controller->getHighlightedObject();
+	}
+	echo '</div>'; // close #indi_mainimage
+	$globalfacts=$controller->getGlobalFacts();
 	echo '<div id="header_accordion1">', // contain accordions for names
 		'<h3 class="name_one ', $controller->getPersonStyle($controller->indi), '"><span>', $controller->indi->getFullName(), '</span>'; // First name accordion element
 			if (WT_USER_IS_ADMIN) {
@@ -212,11 +230,6 @@ $globalfacts=$controller->getGlobalFacts();
 		' collapsible: true',
 		'});',
 		WT_JS_END; //accordion details
-		echo '<div id="indi_mainimage">'; // Display highlight image
-	if ($MULTI_MEDIA && $controller->canShowHighlightedObject()) {
-		echo $controller->getHighlightedObject();
-	}
-	echo '</div>'; // close #indi_mainimage
 }
 echo '</div>';// close #indi_header
 // ===================================== main content tabs
diff --git a/themes/clouds/style.css b/themes/clouds/style.css
index df90ce35e0..4ac22da293 100644
--- a/themes/clouds/style.css
+++ b/themes/clouds/style.css
@@ -1742,7 +1742,7 @@ html[dir='rtl'] .editlink, html[dir='rtl'] .copylink, html[dir='rtl'] .deletelin
 /* =========== Indi header ================== */ 
 
 #dates {color: #333333; float:right;}
-#header_accordion1 {clear:both; float:right; width:84%;}
+#header_accordion1 {float:right;}
 
 #indi_header {float:left; width:98%; border-radius: 3px; border: margin:5px 0; padding:10px;}
 #indi_header a {color:#333377; font-size:0.75em; font-weight:normal;}
@@ -1756,7 +1756,7 @@ html[dir='rtl'] .editlink, html[dir='rtl'] .copylink, html[dir='rtl'] .deletelin
 #indi_header h3.name_one {overflow:hidden; position:relative; font-size:1.5em;}
 #indi_header h3.person_box, #indi_header h3.person_boxF , #indi_header h3.person_boxNN  {border:1px solid #8FBCFF;}
 
-#indi_mainimage {float:left; width:15%}
+#indi_mainimage {float:left;}
 #indi_mainimage a img {float:left; padding:0;}
 
 #indi_name_details { margin:0; padding: 5px;}
diff --git a/themes/colors/css/colors.css b/themes/colors/css/colors.css
index 59b705d155..101cfd120f 100644
--- a/themes/colors/css/colors.css
+++ b/themes/colors/css/colors.css
@@ -1711,7 +1711,7 @@ html[dir='rtl'].field  .editlink, html[dir='rtl'].field  .deletelink  {float:lef
 /* =========== Indi header ================== */ 
 
 #dates {color: #333333; float:right;}
-#header_accordion1 {clear:both; float:right; width:84%;}
+#header_accordion1 {float:right;}
 
 #indi_header {float:left; width:98%; border-radius: 3px; border: margin:5px 0; padding:10px;}
 #indi_header a {color:#333377; font-size:0.75em; font-weight:normal;}
@@ -1723,7 +1723,7 @@ html[dir='rtl'].field  .editlink, html[dir='rtl'].field  .deletelink  {float:lef
 #indi_header h3.name_one {overflow:hidden; position:relative; font-size:1.5em;}
 #indi_header h3.person_box, #indi_header h3.person_boxF , #indi_header h3.person_boxNN  {border:1px solid #999;}
 
-#indi_mainimage {float:left; width:15%}
+#indi_mainimage {float:left;}
 #indi_mainimage a img {float:left; padding:0;}
 
 #indi_name_details { margin:0; padding: 5px;}
diff --git a/themes/fab/style.css b/themes/fab/style.css
index 0ece4525c0..c160104bf1 100644
--- a/themes/fab/style.css
+++ b/themes/fab/style.css
@@ -1070,41 +1070,49 @@ html[dir='rtl'].field  .editlink, html[dir='rtl'].field  .deletelink  {float:lef
 /* =========== end edit, copy, delete links ==================== */
 
 /* =========== Indi header ================== */ 
+
 #indi_header {float:left; width:98%; border-radius: 3px; margin:5px 0; padding:0 10px;}
-html[dir='rtl'] #indi_header { float:right;}
 #indi_header h3 {color: #000666; font-size: 90%; font-weight:bold; margin: 0; padding: 0 10px 0 30px; text-align:left;}
-html[dir='rtl'] #indi_header h3 { padding: 0 30px 0 10px; text-align:right;}
 #indi_header h3.name_one {overflow:hidden; position:relative; font-size:1.5em;}
 #indi_header h3.person_box, #indi_header h3.person_boxF , #indi_header h3.person_boxNN  {border:1px solid darkGray;}
 #indi_header h3 .fact_AGE {padding:5px 0 5px 5px; float:right; font-weight:normal; font-size:65%;}
-html[dir='rtl']  #indi_header h3 .fact_AGE {padding:5px 5px 5px 0; float:left;}
 #indi_header h3 a {display:inline;}
 #indi_header a {color:#333377; font-size:0.75em; font-weight:normal;}
 #indi_header a:hover {color:red;}
+
 #main_name {color:#000666; float:left; font-size:2em; margin:10px; font-weight:bold;}
-html[dir='rtl'] #main_name {float:right;}
-#indi_mainimage {float:right; width:15%}
-html[dir='rtl'] #indi_mainimage {float:left;}
+
+#indi_mainimage {float:right;}
 #indi_mainimage a img {float:right; padding:0;}
-html[dir='rtl'] #indi_mainimage a img {float:left;}
+
 #indi_name_details {	margin:0; padding: 5px;}
 #indi_name_details a {color:#333377;}
 #indi_name_details dt:after { content:":"; }
 #name1 {}
+
 #indi_note {margin:	0 0 5px 0;}
 #indi_note .fact_NOTE {float:left; margin:0 10px 0 0;}
-html[dir='rtl'] #indi_note .fact_NOTE {float:right; margin:0 0 0 10px;}
 #indi_note .note_details {font-size:100%;}
 #indi_note .fact_SOUR a {font-size:100%;}
-#header_accordion1 {clear:both; float:left; width:84%;}
-html[dir='rtl'] #header_accordion1 {float:right;}
+
+#header_accordion1 {float:left;}
+
 .indi_table {clear:left;}
-html[dir='rtl'] .indi_table {clear:right;}
 #sex {float:right;}
-html[dir='rtl']  #sex {float:left;}	
 #dates {color: #000666; float:right;}
-html[dir='rtl']  #dates {	float:left;}
 dd .editlink, dd .deletelink  {float:right;}
+
+html[dir='rtl'] #indi_header {float:right;}
+html[dir='rtl'] #indi_header h3 {padding: 0 30px 0 10px; text-align:right;}
+html[dir='rtl']  #indi_header h3 .fact_AGE {padding:5px 5px 5px 0; float:left;}
+html[dir='rtl'] #main_name {float:right;}
+html[dir='rtl'] #indi_mainimage {float:left;}
+html[dir='rtl'] #indi_mainimage a img {float:left;}
+html[dir='rtl'] #indi_note .fact_NOTE {float:right; margin:0 0 0 10px;}
+html[dir='rtl'] #header_accordion1 {float:right;}
+html[dir='rtl'] .indi_table {clear:right;}
+html[dir='rtl']  #sex {float:left;}	
+html[dir='rtl']  #dates {	float:left;}
 html[dir='rtl']  dd .editlink, html[dir='rtl']  dd .deletelink  {float:left;}
 
 /* INDI IMAGE SPRITE */
diff --git a/themes/minimal/style.css b/themes/minimal/style.css
index 60ecfe3ba5..3433266a6d 100644
--- a/themes/minimal/style.css
+++ b/themes/minimal/style.css
@@ -1430,45 +1430,53 @@ html[dir='rtl'].field  .editlink, html[dir='rtl'].field  .deletelink  {float:lef
 /* =========== end edit, copy, delete links ==================== */
 
 /* =========== Indi header ================== */ 
+
 #indi_header {float:left; width:98%; margin:5px 0; padding:0 10px 0 0;}
-html[dir='rtl'] #indi_header { float:right; padding:00 0 10px ;}
 #indi_header h3 {font-weight:bold; margin: 0; padding: 0 10px 0 30px; text-align:left;}
-html[dir='rtl'] #indi_header h3 { padding: 0 30px 0 10px; text-align:right;}
 #indi_header h3.name_one {overflow:hidden; position:relative; font-size:1.5em;}
 #indi_header h3.name_two {background: #DDD; border: 1px solid #888}
 #indi_header h3.person_box, #indi_header h3.person_boxF , #indi_header h3.person_boxNN  {background: #DDD; border: 1px solid #888;}
 #indi_header h3 .fact_AGE {padding:7px 0 5px 5px; float:right; font-weight:normal; font-size:65%;}
-html[dir='rtl']  #indi_header h3 .fact_AGE {padding:5px 5px 5px 0; float:left;}
 #indi_header h3 span.details1 {font-size:1em;}
 #indi_header h3 a {display:inline;}
 #indi_header a {font-size:0.75em; font-weight:normal;}
 #indi_header a:hover {color:red;}
+
 #main_name {float:left; font-size:2em; margin:10px; font-weight:bold;}
-html[dir='rtl'] #main_name {float:right;}
-#indi_mainimage {float:right; width:15%}
-html[dir='rtl'] #indi_mainimage {float:left;}
+
+#indi_mainimage {float:right;}
 #indi_mainimage a img {float:right; padding:0;}
-html[dir='rtl'] #indi_mainimage a img {float:left;}
+
 #indi_name_details {background: none #FFF; border: none; font-size:10px; margin:0; padding: 5px;}
 #indi_name_details a {}
 #indi_name_details dt:after { content:":";}
 #indi_name_details dt.label, #indi_name_details dd.field {font-size:12px;}
 #name1 {}
+
 #indi_note {margin:	0 0 5px 0;}
 #indi_note .fact_NOTE .label {float:left; margin:0 10px 0 0;}
-html[dir='rtl'] #indi_note .fact_NOTE {float:right; margin:0 0 0 10px;}
 #indi_note , #indi_note .fact_NOTE .label{font-size:12px;}
 #indi_note .note_details {font-size:12px;}
 #indi_note .fact_SOUR a {font-size:12px;}
-#header_accordion1 {border:1px solid #DDD; border-radius: 3px 3px 3px 3px; clear:both; float:left; width:84%;}
-html[dir='rtl'] #header_accordion1 {float:right;}
+
+#header_accordion1 {border:1px solid #DDD; border-radius: 3px 3px 3px 3px; float:left;}
+
 .indi_table {clear:left;}
-html[dir='rtl'] .indi_table {clear:right;}
 #sex {float:right;}
 html[dir='rtl']  #sex {float:left;}	
 #dates {float:right; margin-top:5px;}
-html[dir='rtl']  #dates {	float:left;}
 dd .editlink, dd .deletelink  {float:right;}
+
+html[dir='rtl'] #indi_header { float:right; padding:00 0 10px ;}
+html[dir='rtl'] #indi_header h3 { padding: 0 30px 0 10px; text-align:right;}
+html[dir='rtl']  #indi_header h3 .fact_AGE {padding:5px 5px 5px 0; float:left;}
+html[dir='rtl'] #main_name {float:right;}
+html[dir='rtl'] #indi_mainimage {float:left;}
+html[dir='rtl'] #indi_mainimage a img {float:left;}
+html[dir='rtl'] #indi_note .fact_NOTE {float:right; margin:0 0 0 10px;}
+html[dir='rtl'] #header_accordion1 {float:right;}
+html[dir='rtl'] .indi_table {clear:right;}
+html[dir='rtl']  #dates {	float:left;}
 html[dir='rtl']  dd .editlink, html[dir='rtl']  dd .deletelink  {float:left;}
 
 /* INDI IMAGE SPRITE */
@@ -1503,7 +1511,7 @@ html[dir='rtl'] .ui-accordion .ui-accordion-header .ui-icon {right:.5em;}
 .ui-accordion .ui-accordion-content {padding: 1em .05em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: visible; display: none; }
 .ui-accordion .ui-accordion-content-active {display: block; }
 .ui-accordion .ui-accordion-header a {padding:.5em}
-.ui-helper-reset {line-height: 1.6;}
+.ui-helper-reset {line-height: 1.2;}
 
 /* ========= Sidebar ============== */
 #main {min-width:600px; width:100%}
diff --git a/themes/webtrees/style.css b/themes/webtrees/style.css
index f0fd7c6236..bf8e16b59c 100644
--- a/themes/webtrees/style.css
+++ b/themes/webtrees/style.css
@@ -1606,45 +1606,54 @@ html[dir='rtl'].field  .editlink, html[dir='rtl'].field  .deletelink  {float:lef
 /* =========== end edit, copy, delete links ==================== */
 
 /* =========== Indi header ================== */ 
+
 #indi_header {float:left; width:98%; border-radius: 3px; border: 1px solid #B2C7D7; margin:5px 0; padding:10px;}
-html[dir='rtl'] #indi_header {float:right;}
 #indi_header h3 {color: #555555; font-size: 90%; font-weight:bold; margin: 0; padding: 0 10px 0 30px; text-align:left;}
-html[dir='rtl'] #indi_header h3 {padding: 0 30px 0 10px; text-align:right;}
 #indi_header h3.name_one {overflow:hidden; position:relative; font-size:1.5em;}
 #indi_header h3 .details1 {font-size:1.0em;}
 #indi_header h3.person_box, #indi_header h3.person_boxF , #indi_header h3.person_boxNN  {border:1px solid #2694E8;}
 #indi_header h3 .fact_AGE {padding:5px 0 5px 5px; float:right; font-weight:normal; font-size:65%;}
-html[dir='rtl']  #indi_header h3 .fact_AGE {padding:5px 5px 5px 0; float:left;}
 #indi_header h3 a {display:inline;}
 #indi_header a {color:#333377; font-size:0.75em; font-weight:normal;}
 #indi_header a:hover {color:red;}
+
 #main_name {color:#555555; float:left; font-size:2em; margin:10px; font-weight:bold;}
-html[dir='rtl'] #main_name {float:right;}
-#indi_mainimage {float:left; width:15%}
-html[dir='rtl'] #indi_mainimage {float:right;}
+
+#indi_mainimage {float:left;}
 #indi_mainimage a img {float:left; padding:0;}
-html[dir='rtl'] #indi_mainimage a img {float:right;}
+
 #indi_name_details {	margin:0; padding: 5px;}
 #indi_name_details a {color:#333377;}
 #indi_name_details dt:after {content:":";}
+
 #name1 {}
 #indi_note {margin:	0 0 5px 0;}
-html[dir='rtl'] #indi_note .fact_NOTE {float:right; margin:00 0 10px;}
-#header_accordion1 {clear:both; float:right; width:84%;}
-html[dir='rtl'] #header_accordion1 {float:left;}
+
+#header_accordion1 {float:right;}
+
 .indi_table {clear:left;}
-html[dir='rtl'] .indi_table {clear:right;}
 #sex {float:right;}
-html[dir='rtl']  #sex {float:left;}	
 #dates {color: #555555; float:right;}
-html[dir='rtl']  #dates {	float:left;}
+
 dd .editlink, dd .deletelink  {float:right;}
-html[dir='rtl']  dd .editlink, html[dir='rtl']  dd .deletelink  {float:left;}
 .fact_NOTE {float:left; margin:0 5px 0 0;}
 #indi_note .note_details {font-size:100%;}
 .fact_SOUR {margin: 3px 0}
 #indi_note .fact_SOUR a {font-size:100%; margin: 3px 0}
 
+html[dir='rtl'] #indi_header {float:right;}
+html[dir='rtl'] #indi_header h3 {padding: 0 30px 0 10px; text-align:right;}
+html[dir='rtl']  #indi_header h3 .fact_AGE {padding:5px 5px 5px 0; float:left;}
+html[dir='rtl'] #main_name {float:right;}
+html[dir='rtl'] #indi_mainimage {float:right;}
+html[dir='rtl'] #indi_mainimage a img {float:right;}
+html[dir='rtl'] #indi_note .fact_NOTE {float:right; margin:0 0 0 10px;}
+html[dir='rtl'] #header_accordion1 {float:left;}
+html[dir='rtl'] .indi_table {clear:right;}
+html[dir='rtl']  #sex {float:left;}	
+html[dir='rtl']  #dates {	float:left;}
+html[dir='rtl']  dd .editlink, html[dir='rtl']  dd .deletelink  {float:left;}
+
 /* General sprite */
 .male_gender, .female_gender, .unknown_gender, .editicon, .copyicon, .deleteicon {display: block; background: url('images/general_sprite.png') no-repeat left 0;}
 
diff --git a/themes/xenea/style.css b/themes/xenea/style.css
index 2c8d1d92ce..140014718e 100644
--- a/themes/xenea/style.css
+++ b/themes/xenea/style.css
@@ -1581,44 +1581,52 @@ html[dir='rtl'].field  .editlink, html[dir='rtl'].field  .deletelink  {float:lef
 /* =========== end edit, copy, delete links ==================== */
 
 /* =========== Indi header ================== */
+
 #indi_header {float:left; width:98%; border-radius: 3px; background: url("../../../js/jquery/css/images/ui-bg_highlight-soft_100_e7eef3_1x100.png") repeat-x scroll 50% 50% #fff; border: 1px solid #B2C7D7; margin:5px 0; padding:10px;}
-html[dir='rtl'] #indi_header { float:right;}
 #indi_header h3 {color: #555555; font-weight:bold; margin: 0; padding: 0 10px 0 30px; text-align:left;}
-html[dir='rtl'] #indi_header h3 { padding: 0 30px 0 10px; text-align:right;}
 #indi_header h3.name_one {overflow:hidden; position:relative; font-size:1.5em;}
 #indi_header h3 span.details1 {font-size:1em;}
 #indi_header h3.person_box {background-color: #F0F9FF; border: 1px solid #84BEFF;}
 #indi_header h3.person_boxF {background-color: #FFF0F0; border: 1px solid #FF2080;}
 #indi_header h3.person_boxNN  { background-color: white; border: 1px dashed #008080;}
 #indi_header h3 .fact_AGE {padding:5px 0 5px 15px; float:right; font-weight:normal; font-size:65%;}
-html[dir='rtl']  #indi_header h3 .fact_AGE {padding:5px 15px 5px 0; float:left;}
 #indi_header h3 a {display:inline;}
 #indi_header a {color:#333377; font-size:0.75em; font-weight:normal;}
 #indi_header a:hover {color:red;}
+
 #main_name {color:#555555; float:left; font-size:2em; margin:10px; font-weight:bold;}
-html[dir='rtl'] #main_name {float:right;}
-#indi_mainimage {float:left; width:15%}
-html[dir='rtl'] #indi_mainimage {float:right;}
+
+#indi_mainimage {float:left;}
 #indi_mainimage a img {float:left; padding:0;}
-html[dir='rtl'] #indi_mainimage a img {float:right;}
+
 #indi_name_details {	margin:0; padding: 5px;}
 #indi_name_details a {color:#333377;}
 #indi_name_details dt:after { content:":"; }
 #name1 {}
+
 #indi_note {margin:	0 0 5px 0;}
 #indi_note .fact_NOTE {float:left; margin:0 10px 0 0;}
-html[dir='rtl'] #indi_note .fact_NOTE {float:right; margin:00 0 10px;}
 #indi_note .note_details {font-size:100%;}
 #indi_note .fact_SOUR a {font-size:100%;}
-#header_accordion1 {clear:both; float:right; width:84%;}
-html[dir='rtl'] #header_accordion1 {float:left;}
+
+#header_accordion1 {float:right;}
+
 .indi_table {clear:left;}
-html[dir='rtl'] .indi_table {clear:right;}
 #sex {float:right;}
-html[dir='rtl']  #sex {float:left;}	
 #dates {color: #555555; float:right;}
-html[dir='rtl']  #dates {	float:left;}
 dd .editlink, dd .deletelink  {float:right;}
+
+html[dir='rtl'] #indi_header { float:right;}
+html[dir='rtl'] #indi_header h3 { padding: 0 30px 0 10px; text-align:right;}
+html[dir='rtl']  #indi_header h3 .fact_AGE {padding:5px 15px 5px 0; float:left;}
+html[dir='rtl'] #main_name {float:right;}
+html[dir='rtl'] #indi_mainimage {float:right;}
+html[dir='rtl'] #indi_mainimage a img {float:right;}
+html[dir='rtl'] #indi_note .fact_NOTE {float:right; margin:00 0 10px;}
+html[dir='rtl'] #header_accordion1 {float:left;}
+html[dir='rtl'] .indi_table {clear:right;}
+html[dir='rtl']  #sex {float:left;}	
+html[dir='rtl']  #dates {	float:left;}
 html[dir='rtl']  dd .editlink, html[dir='rtl']  dd .deletelink  {float:left;}
 
 /* INDI IMAGE SPRITE */