From 56370f5bafe32de0b604cadde1fbc0c6dc284675 Mon Sep 17 00:00:00 2001
From: PeekabooSteam <matthew.lindley001+github@gmail.com>
Date: Thu, 9 Mar 2023 18:32:28 +0000
Subject: [PATCH] More mouse info work.

---
 client/public/stylesheets/layout.css | 75 ++++++++++++++++++++++++----
 client/views/mouseinfopanel.ejs      | 36 +++++++++----
 2 files changed, 90 insertions(+), 21 deletions(-)

diff --git a/client/public/stylesheets/layout.css b/client/public/stylesheets/layout.css
index ea0754c7..42b88349 100644
--- a/client/public/stylesheets/layout.css
+++ b/client/public/stylesheets/layout.css
@@ -174,16 +174,27 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
 
 #mouse-info-panel {
 	bottom: 60px;
+	display:flex;
+	flex-direction: column;
 	height: fit-content;
 	position: absolute;
 	right: 10px;
+	row-gap: 10px;
 	width: 160px;
 	z-index: 1000;
 }
 
 
+#mouse-info-panel > * {
+	background-color: var( --background-grey );
+	border-radius: var( --border-radius-sm );
+	padding:6px;
+}
+
+
 #mouse-info-panel dl {
-	row-gap: 14px;
+	margin-bottom:4px;
+	row-gap: 8px;
 }
 
 #mouse-info-panel dt {
@@ -191,16 +202,46 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
 	width:40%;
 }
 
-
-#mouse-info-panel dt {
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-	background-size:24px 24px;
-	display:inline-block;
+#mouse-info-panel dt::before {
+	align-items: center;
+	background-color: white;
+	border-radius: var( --border-radius-sm );
+	color: var( --background-steel );
+	display:flex;
+	font-size:15.6px;
+	font-weight: bolder;
+	height:16px;
+	justify-content: center;
+	line-height: 16px;
+	padding:4px;
+	text-transform: uppercase;
+	width:16px;
 }
 
+#mouse-info-panel dt#ref-measure-position::before {
+	background-image: url( "/images/unit.png" );
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	background-size:16px 16px;
+	content: " ";
+}
+
+
+#mouse-info-panel dt[data-label]::before {
+	content: attr( data-label );
+}
+
+#mouse-info-panel dt[data-coalition="blue"]::before {
+	background-color: var( --primary-blue );
+}
+
+#mouse-info-panel dt[data-coalition="red"]::before {
+	background-color: var( --primary-red );
+}
+
+
 #mouse-info-panel dt[data-tooltip]:hover::before {
-	background-color: var( --background-steel );
+	background-color: var( --background-grey );
 	border-radius: 5px;
 	content: attr( data-tooltip );
 	display:flex;
@@ -211,6 +252,21 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
 	white-space: nowrap;
 }
 
+#mouse-info-panel dd {
+	width:60%;
+}
+
+/*
+
+
+#mouse-info-panel dt {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	background-size:24px 24px;
+	display:inline-block;
+}
+
+
 #ref-measure-position {
 	background-image: url( "/images/pin.png" );
 }
@@ -231,9 +287,6 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
 	background-image: url( "/images/bullseye2.png" );
 }
 
-#mouse-info-panel dd {
-	width:60%;
-}
 
 
 #log-panel {
diff --git a/client/views/mouseinfopanel.ejs b/client/views/mouseinfopanel.ejs
index 2527054a..b1271de6 100644
--- a/client/views/mouseinfopanel.ejs
+++ b/client/views/mouseinfopanel.ejs
@@ -1,12 +1,28 @@
 <div id="mouse-info-panel" class="ol-panel">
-    <dl class="data-grid">
-        <dt id="ref-measure-position" data-tooltip="CTRL-click on the map to activate the measuring tool."></dt>
-        <dd id="measure-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
-        <dt id="ref-unit-position"></dt>
-        <dd id="unit-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
-        <dt id="ref-bullseye-1"></dt>
-        <dd id="bullseye-1" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
-        <dt id="ref-bullseye-2"></dt>
-        <dd id="bullseye-2" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
-    </dl>
+
+    <div>
+        <dl class="data-grid">
+            <dt id="ref-measure-position" data-tooltip="CTRL-click on the map to activate the measuring tool."></dt>
+            <dd id="measure-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
+        </dl>
+    </div>
+
+    <div>
+        <dl class="data-grid">
+            <dt id="ref-bullseye-1" data-label="BE" data-coalition="blue"></dt>
+            <dd id="bullseye-1" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
+            <dt id="ref-bullseye-2" data-label="BE" data-coalition="red"></dt>
+            <dd id="bullseye-2" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
+        </dl>
+    </div>
+
+    <div>
+        <dl class="data-grid">
+            <dt id="ref-mouse-position-latitude" data-label="N"></dt>
+            <dd id="mouse-position-latitude" class="coordinates" data-dd="---" data-mm="---" data-ss="--" data-sss="--"></dd>
+            <dt id="ref-mouse-position-longitude" data-label="E"></dt>
+            <dd id="mouse-position-longitude" class="coordinates" data-dd="---" data-mm="---" data-ss="--" data-sss="--"></dd>
+        </dl>
+    </div>
+
 </div>
\ No newline at end of file