1. Rearrange pedigree map html to simplify on click management

2. No 1. provides opportunity to simplify CSS by using display: flex

1 files changed, 5 insertions, 37 deletions

diff --git a/modules_v3/googlemap/css/wt_v3_googlemap.css b/modules_v3/googlemap/css/wt_v3_googlemap.css
index 14c1993ce7..a812cec64f 100644
--- a/modules_v3/googlemap/css/wt_v3_googlemap.css
+++ b/modules_v3/googlemap/css/wt_v3_googlemap.css
@@ -59,7 +59,7 @@
 }
 
 .gm-pedigree-map .gm-info-window {
-	width: 300px;
+	display: flex;
 }
 
 .gm-info-window-header {
@@ -90,10 +90,10 @@
 	margin: 0;
 	padding: 0;
 	height: 19px;
+	display: flex;
 }
 
 .gm-tab {
-	float: left;
 	list-style-type: none;
 	margin: 0 2px;
 	background-color: #eee;
@@ -105,10 +105,6 @@
 	padding: 0 10px;
 }
 
-[dir=rtl] .gm-tab {
-	float: right;
-}
-
 .gm-tab-active,
 .gm-tab:hover {
 	background-color: #fff;
@@ -123,7 +119,8 @@
 	min-height: 50px;
 	margin: 5px;
 	padding: 0!important;
-	border: 1px solid transparent;
+	border: 1px dotted #aaa;
+	display: flex;
 }
 
 .gm-ancestor-visited {
@@ -141,60 +138,31 @@
 /* We have a link inside something that behaves like a link, and therefore must look like a link. */
 .gm-ancestor-link {
 	cursor: pointer;
+	width: 100%;
 }
 
 .gm-wrapper .gallery {
-	float: left;
 	width: 50px;
 }
 
-[dir=rtl] .gm-wrapper .gallery {
-	float: right;
-}
-
 .gm-ancestors .gallery img,
 .gm-style-iw .gallery img {
-	float: right;
 	height: auto;
-	margin: 0 4px;
 	max-height: 50px;
 	max-width: 36px;
 	width: auto;
 }
 
-[dir=rtl] .gm-ancestors .gallery img,
-[dir=rtl] .gm-style-iw .gallery img {
-	float: left;
-}
-
 .gm-ancestors .icon-silhouette-M,
 .gm-ancestors .icon-silhouette-F,
 .gm-ancestors .icon-silhouette-U,
 .gm-style-iw .icon-silhouette-M,
 .gm-style-iw .icon-silhouette-F,
 .gm-style-iw .icon-silhouette-U {
-	float: left;
 	max-height: 50px;
 	width: 50px;
 }
 
-[dir=rtl] .gm-ancestors .icon-silhouette-M,
-[dir=rtl] .gm-ancestors .icon-silhouette-F,
-[dir=rtl] .gm-ancestors .icon-silhouette-U,
-[dir=rtl] .gm-style-iw .icon-silhouette-M,
-[dir=rtl] .gm-style-iw .icon-silhouette-F,
-[dir=rtl] .gm-style-iw .icon-silhouette-U {
-	float: right;
-}
-
-.gm-ancestors img {
-	padding-right: 5px;
-}
-
-[dir=rtl] .gm-ancestors img {
-	padding-left: 5px;
-}
-
 .gm-streetview-frame {
 	overflow: hidden;
 	width: 530px;