From 7c4f11591eaecaa90134d2cc3c43a8ed6a2c2c2b Mon Sep 17 00:00:00 2001
From: PeekabooSteam <matthew.lindley001+github@gmail.com>
Date: Wed, 8 Mar 2023 21:42:14 +0000
Subject: [PATCH] Tarted up the unit control panel a bit more.

---
 client/public/stylesheets/layout.css  | 53 ++++++++++++++++++
 client/public/stylesheets/olympus.css | 32 +++++++++--
 client/src/index.ts                   |  2 +
 client/views/unitcontrolpanel.ejs     | 79 ++++++++++++++++-----------
 4 files changed, 129 insertions(+), 37 deletions(-)

diff --git a/client/public/stylesheets/layout.css b/client/public/stylesheets/layout.css
index 1bcc28fa..faf6ebcf 100644
--- a/client/public/stylesheets/layout.css
+++ b/client/public/stylesheets/layout.css
@@ -49,6 +49,11 @@ body {
 	z-index: 1000;
 }
 
+#unit-control-panel h4 {
+	margin-bottom:8px;
+	margin-top:20px;
+}
+
 body.feature-forceShowUnitControlPanel #unit-control-panel {
 	display:block !important;
 }
@@ -57,6 +62,54 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 	position: static;
 }
 
+dl.data-grid {
+	display:flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin:0;
+	row-gap: 4px;
+}
+
+dl.data-grid dt {
+	width:40%;
+}
+
+dl.data-grid dd {
+	width:60%;
+}
+
+
+dl.data-grid dt.icon {
+	text-indent: 10px;
+}
+
+dl.data-grid dt.icon::before {
+	content: url( /images/icons/speed.svg );
+	display:inline-block;
+	filter:invert(100%);
+	width: 20px;
+	translate:-20px 2px;
+}
+
+
+dl.data-grid dt.icon-speed::before {
+	content: url( /images/icons/speed.svg );
+}
+
+
+dl.data-grid dt.icon-altitude::before {
+	content: url( /images/icons/altitude.svg );
+}
+
+
+dl.data-grid dd {
+	display: flex;
+	justify-content: flex-end;
+	margin-left: auto;
+}
+
+
+
 
 .ol-button-box {
 	column-gap: 6px;
diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index f9259b27..39ebdb41 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -65,8 +65,8 @@ button[disabled="disabled"] {
 
 .pill {
     border-radius: var( --border-radius-sm );
-    display:inline-block;
-    padding:6px;
+    padding:2px 6px;
+    width:fit-content;
 }
 
 
@@ -82,6 +82,14 @@ button[disabled="disabled"] {
     width:fit-content;
 }
 
+.ol-panel hr {
+    background-color: var( --secondary-light-grey );
+    border:none;
+    height:1px;
+    margin:20px 0;
+    width:100%;
+}
+
 .ol-panel-padding-lg {
     padding:24px 30px;
 }
@@ -265,6 +273,11 @@ h4 {
     font-weight: normal;
 }
 
+button.ol-button-warning {
+    border: 1px solid var( --primary-red );
+    color: var( --primary-red );
+}
+
 
 nav.ol-panel {
     column-gap: 20px;
@@ -329,6 +342,15 @@ nav.ol-panel > :last-child {
 }
 
 
+.accent-green {
+    color: var(--accent-green);
+    font-weight: var( --font-weight-bolder );
+}
+.accent-light-blue {
+    color: var(--accent-light-blue);
+    font-weight: var( --font-weight-bolder );
+}
+
 .accent-bluefor {
     color: var(--primary-blue);
     font-weight: var( --font-weight-bolder );
@@ -467,7 +489,7 @@ nav.ol-panel > :last-child {
 
 #unit-info-panel #unit-identification .unit {
     height:28px;
-    margin-right:10px;
+    margin-right:6px;
     width:28px;
 }
 
@@ -485,12 +507,12 @@ nav.ol-panel > :last-child {
     background-color:transparent;
     border:none;
     color:white;
-    font-size:18px;
+    font-size:16px;
     font-weight: var( --font-weight-bolder );
     outline:none;
     overflow: hidden;
     white-space: nowrap;
-    width: 130px;
+    width: 150px;
 }
 
 #edit-unit-name {
diff --git a/client/src/index.ts b/client/src/index.ts
index bf28c498..d58ad7a5 100644
--- a/client/src/index.ts
+++ b/client/src/index.ts
@@ -102,6 +102,7 @@ function setup() {
     });
 
     
+    /*
     const unitName = document.getElementById( "unit-name" );
 
     if ( unitName instanceof HTMLInputElement ) {
@@ -124,6 +125,7 @@ function setup() {
         });
 
     }
+    //*/
 
 
 
diff --git a/client/views/unitcontrolpanel.ejs b/client/views/unitcontrolpanel.ejs
index 2e6e9bb7..c9b06d7f 100644
--- a/client/views/unitcontrolpanel.ejs
+++ b/client/views/unitcontrolpanel.ejs
@@ -1,19 +1,19 @@
 <div id="unit-control-panel" class="ol-panel ol-panel-padding-lg"> 
 
     <div id="unit-info-panel">
-        <div id="general" class="panel-section">
 
-            <div id="unit-identification">
-                <div class="unit unit-air no-function">
-                    <div class="unit-marker"></div>
-                    <div class="unit-short-label">18</div>
-                </div>
-                
-                <input id="unit-name" value="Olympus 1-1" readonly disabled />
-
-                <button id="edit-unit-name" data-on-click="editUnitName"></button>
+        <div id="unit-identification">
+            <div class="unit unit-air no-function">
+                <div class="unit-marker"></div>
+                <div class="unit-short-label">18</div>
             </div>
+            
+            <input id="unit-name" value="Olympus 1-1" readonly disabled />
 
+            <!-- <button id="edit-unit-name" data-on-click="editUnitName"></button> -->
+        </div>
+
+        <div class="ol-group">
             <div id="name" class="pill highlight-primary">Name</div>
             <div id="group-name" class="pill highlight-primary">Group</div>
             <div id="task" class="pill highlight-primary">Task</div>
@@ -23,16 +23,38 @@
             <!-- This is where all the unit selection buttons will be shown-->
         </div>
 
-        <div id="flight-data" class="panel-section">
-            <h4 id="flight-data-label">Flight data</h4>
-            <div id="latitude"></div>
-            <div id="longitude"></div>
-            <div class="data-grid">
-                <div class="data-row"><img class="icon-small" src="images/icons/speed.svg"><h5>Ground Speed</h5><h4 id="ground-speed">12</h4></div>
-                <div class="data-row"><img class="icon-small" src="images/icons/altitude.svg"><h5>Altitude</h5><h4 id="altitude"></h4></div>
-                <div class="data-row"><img class="icon-small" src="images/icons/heading.svg"><h5>Heading</h5><h4 id="heading"></h4></div>
+        <div id="flight-data">
+
+            <h4 id="loadout-label">Flight data</h4>
+            
+            <dl class="data-grid">
+                <dt>Heading</dt>
+                <dd id="heading">123&deg;</dd>
+                <dt>Speed</dt>
+                <dd id="ground-speed">323kts</dd>
+                <dt>Altitude</dt>
+                <dd id="altitude">27,414ft</dd>
+            </dl>
+
+            <h4>Flight controls</h4>
+            <div class="slider-container flight-control-slider" id="airspeed-slider">
+                <dl class="data-grid">
+                    <dt>Speed</dt>
+                    <dd class="flight-control-value" id="value">451kts</dd>
+                </dl>
+                <input type="range" min="1" max="600" value="451" class="slider">
             </div>
+
+            <div class="slider-container flight-control-slider" id="altitude-slider">
+                <dl class="data-grid">
+                    <dt>Altitude</dt>
+                    <dd class="flight-control-value" id="value">21,594ft</dd>
+                </dl>
+                <input type="range" min="1" max="50000" value="21594" class="slider">
+            </div>
+            
         </div>
+
         <div id="loadout-data" class="panel-section">
             <h4 id="loadout-label">Loadout</h4>
             <div class="data-grid">
@@ -43,20 +65,6 @@
         </div>
     </div>
 
-    <h3>Controls</h3>
-    <div id="flight-controls-buttons-container">
-        <div class="slider-container flight-control-slider" id="altitude-slider">
-            <div class="flight-control-title">Altitude</div>
-            <div class="flight-control-value" id="value"></div>
-            <input type="range" min="1" max="100" value="50" class="slider">
-        </div>
-        <div class="slider-container flight-control-slider" id="airspeed-slider">
-            <div class="flight-control-title">Speed</div>
-            <div class="flight-control-value" id="value"></div>
-            <input type="range" min="1" max="100" value="50" class="slider">
-        </div>
-    </div>
-
     <!-- <h3>Formation</h3> -->
     <!-- <div id="formation-buttons-container"> -->
          <!-- This is where all the formation control buttons will be shown -->
@@ -73,4 +81,11 @@
     <div id="reaction-to-threat-buttons-container" class="ol-group ol-button-box">
          <!-- This is where the reaction to threat buttons will be shown -->
     </div>
+
+    <hr />
+
+    <div class="ol-button-group">
+        <button class="ol-button-warning">Delete unit</button>
+    </div>
+
 </div>