Pedigree chart - styling for root arrow childbox

9 files changed, 64 insertions, 315 deletions

diff --git a/app/Controller/PedigreeController.php b/app/Controller/PedigreeController.php
index fba730dee1..9e01401783 100644
--- a/app/Controller/PedigreeController.php
+++ b/app/Controller/PedigreeController.php
@@ -257,7 +257,7 @@ class PedigreeController extends ChartController {
 		$families = $this->root->getSpouseFamilies();
 		$html     = '';
 		if (!empty($families)) {
-			$html = sprintf('<div id="childarrow"><a href="#" class="menuselect %s"></a><div id="childbox">', $this->arrows->menu);
+			$html = sprintf('<div id="childarrow"><a href="#" class="menuselect %s"></a><div id="childbox-pedigree">', $this->arrows->menu);
 
 			foreach ($families as $family) {
 				$html .= '<span class="name1">' . I18N::translate('Family') . '</span>';
@@ -285,7 +285,7 @@ class PedigreeController extends ChartController {
 				}
 			}
 			$html .=
-				'</div>' . // #childbox
+				'</div>' . // #childbox-pedigree
 				'</div>'; // #childarrow
 		}
 
diff --git a/pedigree.php b/pedigree.php
index e370605847..bd48d85fc0 100644
--- a/pedigree.php
+++ b/pedigree.php
@@ -72,7 +72,7 @@ if (Filter::getBool('ajax') && Session::has('initiated')) {
 		(function() {
 			$("#childarrow").on("click", ".menuselect", function(e) {
 				e.preventDefault();
-				$("#childbox").slideToggle("fast");
+				$("#childbox-pedigree").slideToggle("fast");
 			});
 	
 			$("#pedigree_chart")
diff --git a/themes/_common/css-2.0.0/style.css b/themes/_common/css-2.0.0/style.css
index 88e5fa23f1..59fec90ec1 100755
--- a/themes/_common/css-2.0.0/style.css
+++ b/themes/_common/css-2.0.0/style.css
@@ -373,9 +373,69 @@
  *
  * wt-chart, wt-pedigree-chart
  */
+
+.pedigree_form {
+	width: 45px;
+}
+
+#pedigree_chart {
+	position: relative;
+	margin: 20px auto;
+}
+
+#pedigree_canvas {
+	z-index: -1000;
+}
+ 
 .wt-pedigree-chart .person_box_template {
 	line-height: 1.0;
 }
+
+#childbox-pedigree {
+	border: 1px solid;
+	background-color: #fff;
+}
+
+#pedigree-page #childbox-pedigree {
+	border: 1px solid;
+	background-color: #fff;
+}
+
+#childbox-pedigree {
+	padding: 5px;
+	position: absolute;
+	display: none;
+	text-align: start;
+	white-space: nowrap;
+	left: 0;
+	z-index: 9999;
+}
+wt-pedigree-chart .spacer {
+	background-image: url(images/spacer.png);
+	height:           20px;
+	width:            1px;
+}
+
+#childarrow,
+.ancestorarrow {
+	text-align: center;
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.layout3 #childbox-pedigree {
+	top: auto;
+}
+
+#childbox-pedigree a.name1 {
+	display: block;
+	margin-left: 5px;
+}
+
+[dir=rtl] #childbox-pedigree a.name1 {
+	left: auto;
+	margin-right: 5px;
+}
 /*
  * Pedigree map
  *
diff --git a/themes/clouds/css-2.0.0/style.css b/themes/clouds/css-2.0.0/style.css
index ff75aafa67..f7b5b8fc22 100755
--- a/themes/clouds/css-2.0.0/style.css
+++ b/themes/clouds/css-2.0.0/style.css
@@ -3511,66 +3511,8 @@ color: #ldlelf;
 }
 
 /*-- Pedigree ---- */
-#pedigree_chart {
-	position: relative;
-	margin: 20px auto;
-}
-
 #pedigree_canvas {
 	color:   #81a9cb;
-	z-index: -1000;
-}
-
-#pedigree-page .layout0 .shadow > div,
-#pedigree-page .layout1 .shadow > div {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree-page .spacer {
-	background-image: url(images/spacer.png);
-	height:           20px;
-	width:            1px;
-}
-
-#childarrow,
-.ancestorarrow {
-	text-align: center;
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree_chart .person_box_template {
-	display: inline-block;
-}
-
-#pedigree_chart .shadow {
-	white-space: nowrap;
-}
-
-#pedigree-page #childarrow {
-	position: relative;
-}
-
-#pedigree-page #childbox {
-	border:           1px solid;
-	background-color: #fff;
-}
-
-.pedigree_form {
-	width: 45px;
-}
-
-#pedigree-page table.list_table {
-	margin: 0 auto;
-	width:  500px;
-}
-
-.pedigree_chart_table {
-	border:          0;
-	border-collapse: collapse;
-	padding:         0;
-	width:           100%;
 }
 
 /*-- timeline  --*/
diff --git a/themes/colors/css-2.0.0/style.css b/themes/colors/css-2.0.0/style.css
index cfeb65cd03..4ae9c4439d 100755
--- a/themes/colors/css-2.0.0/style.css
+++ b/themes/colors/css-2.0.0/style.css
@@ -3329,66 +3329,9 @@ div.faq_body {
 }
 
 /*-- Pedigree ---- */
-#pedigree_chart {
-	position: relative;
-	margin: 20px auto;
-}
 
 #pedigree_canvas {
 	color:   #81a9cb;
-	z-index: -1000;
-}
-
-#pedigree-page .layout0 .shadow > div,
-#pedigree-page .layout1 .shadow > div {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree-page .spacer {
-	background-image: url(images/spacer.png);
-	height:           20px;
-	width:            1px;
-}
-
-#childarrow,
-.ancestorarrow {
-	text-align: center;
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree_chart .person_box_template {
-	display: inline-block;
-}
-
-#pedigree_chart .shadow {
-	white-space: nowrap;
-}
-
-#pedigree-page #childarrow {
-	position: relative;
-}
-
-#pedigree-page #childbox {
-	border:           1px solid;
-	background-color: #fff;
-}
-
-.pedigree_form {
-	width: 45px;
-}
-
-#pedigree-page table.list_table {
-	margin: 0 auto;
-	width:  500px;
-}
-
-.pedigree_chart_table {
-	border:          0;
-	border-collapse: collapse;
-	padding:         0;
-	width:           100%;
 }
 
 /*-- timeline  --*/
diff --git a/themes/fab/css-2.0.0/style.css b/themes/fab/css-2.0.0/style.css
index 1287f07f10..b398a37488 100755
--- a/themes/fab/css-2.0.0/style.css
+++ b/themes/fab/css-2.0.0/style.css
@@ -2948,68 +2948,15 @@ div.faq_body {
 }
 
 /*-- Pedigree ---- */
-#pedigree_chart {
-	position: relative;
-	margin: 20px auto;
-}
-
 #pedigree_canvas {
 	color:   #aaa;
-	z-index: -1000;
-}
-
-#pedigree-page .layout0 .shadow > div,
-#pedigree-page .layout1 .shadow > div {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree-page .spacer {
-	background-image: url(images/spacer.png);
-	height:           20px;
-	width:            1px;
-}
-
-#childarrow,
-.ancestorarrow {
-	text-align: center;
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree_chart .person_box_template {
-	display: inline-block;
-}
-
-#pedigree_chart .shadow {
-	white-space: nowrap;
-}
-
-#pedigree-page #childarrow {
-	position: relative;
 }
 
 #pedigree-page #childbox {
-	border:           1px solid;
+	border: 1px solid;
 	background-color: #fff;
 }
 
-.pedigree_form {
-	width: 45px;
-}
-
-#pedigree-page table.list_table {
-	margin: 0 auto;
-	width:  500px;
-}
-
-.pedigree_chart_table {
-	border:          0;
-	border-collapse: collapse;
-	padding:         0;
-	width:           100%;
-}
-
 /*-- timeline  --*/
 #timeline_chart {
 	position: relative;
diff --git a/themes/minimal/css-2.0.0/style.css b/themes/minimal/css-2.0.0/style.css
index da5991def0..07e5dfb10e 100755
--- a/themes/minimal/css-2.0.0/style.css
+++ b/themes/minimal/css-2.0.0/style.css
@@ -2667,37 +2667,10 @@ div.faq_body {
 }
 
 /*-- Pedigree ---- */
-#pedigree_chart {
-	position: relative;
-	margin: 20px auto;
-}
-
 #pedigree_canvas {
 	color:   #555;
-	z-index: -1000;
-}
-
-#pedigree-page .shadow {
-	position: absolute;
-	white-space: nowrap;
 }
 
-#pedigree-page .layout0 .shadow > div,
-#pedigree-page .layout1 .shadow > div {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree-page .spacer {
-	background-image: url(images/spacer.png);
-	height:           20px;
-	width:            1px;
-}
-
-#childarrow,
-.ancestorarrow {
-	text-align: center;
-}
 
 .tdtop {
 	vertical-align: top;
diff --git a/themes/webtrees/css-2.0.0/style.css b/themes/webtrees/css-2.0.0/style.css
index a0a92aa7c5..5cceb71042 100755
--- a/themes/webtrees/css-2.0.0/style.css
+++ b/themes/webtrees/css-2.0.0/style.css
@@ -3335,66 +3335,8 @@ div.faq_body {
 }
 
 /*-- Pedigree ---- */
-#pedigree_chart {
-	position: relative;
-	margin: 20px auto;
-}
-
 #pedigree_canvas {
 	color:   #81a9cb;
-	z-index: -1000;
-}
-
-#pedigree-page .layout0 .shadow > div,
-#pedigree-page .layout1 .shadow > div {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree-page .spacer {
-	background-image: url(images/spacer.png);
-	height:           20px;
-	width:            1px;
-}
-
-#childarrow,
-.ancestorarrow {
-	text-align: center;
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree_chart .person_box_template {
-	display: inline-block;
-}
-
-#pedigree_chart .shadow {
-	white-space: nowrap;
-}
-
-#pedigree-page #childarrow {
-	position: relative;
-}
-
-#pedigree-page #childbox {
-	border:           1px solid;
-	background-color: #fff;
-}
-
-.pedigree_form {
-	width: 45px;
-}
-
-#pedigree-page table.list_table {
-	margin: 0 auto;
-	width:  500px;
-}
-
-.pedigree_chart_table {
-	border:          0;
-	border-collapse: collapse;
-	padding:         0;
-	width:           100%;
 }
 
 /*-- timeline  --*/
diff --git a/themes/xenea/css-2.0.0/style.css b/themes/xenea/css-2.0.0/style.css
index 155e89761b..43506d57ba 100755
--- a/themes/xenea/css-2.0.0/style.css
+++ b/themes/xenea/css-2.0.0/style.css
@@ -3237,66 +3237,8 @@ div.faq_body {
 }
 
 /*-- Pedigree ---- */
-#pedigree_chart {
-	position: relative;
-	margin: 20px auto;
-}
-
 #pedigree_canvas {
 	color:   #81a9cb;
-	z-index: -1000;
-}
-
-#pedigree-page .layout0 .shadow > div,
-#pedigree-page .layout1 .shadow > div {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree-page .spacer {
-	background-image: url(images/spacer.png);
-	height:           20px;
-	width:            1px;
-}
-
-#childarrow,
-.ancestorarrow {
-	text-align: center;
-	display: inline-block;
-	vertical-align: middle;
-}
-
-#pedigree_chart .person_box_template {
-	display: inline-block;
-}
-
-#pedigree_chart .shadow {
-	white-space: nowrap;
-}
-
-#pedigree-page #childarrow {
-	position: relative;
-}
-
-#pedigree-page #childbox {
-	border:           1px solid;
-	background-color: #fff;
-}
-
-.pedigree_form {
-	width: 45px;
-}
-
-#pedigree-page table.list_table {
-	margin: 0 auto;
-	width:  500px;
-}
-
-.pedigree_chart_table {
-	border:          0;
-	border-collapse: collapse;
-	padding:         0;
-	width:           100%;
 }
 
 /*-- timeline  --*/