Merge branch 'v0.1.0' of https://github.com/Pax1601/DCSOlympus into v0.1.0

client/public/stylesheets/olympus.css

@@ -117,7 +117,7 @@ button[disabled="disabled"] {
 }
 
 
-.ol-select:hover .ol-select-options {
+.ol-select.is-open .ol-select-options {
     max-height: fit-content;
     padding:8px 0;
 }
@@ -234,12 +234,8 @@ nav.ol-panel {
     height:58px;
 }
 
-nav.ol-panel > :first-child {
-    margin-left:20px;
-}
-
 nav.ol-panel > :last-child {
-    margin-right:20px;
+    margin-right:5px;
 }
 
 

client/public/stylesheets/uikit.css

@@ -65,9 +65,9 @@ section {
 }
 
 #tabs > div {
-    background:rgb(199, 174, 120);
+    background:#660066;
     border-radius: 5px;
-    color:#333;
+    color:white;
     cursor: pointer;
     padding:6px 10px;
 }

client/public/stylesheets/units.css

@@ -85,33 +85,6 @@ div.unit[data-is-selected="true"] .unit-marker-border {
     Marker
 ******************************/
 
-/*
-div.unit svg {
-    border-radius: var( --border-radius-sm );
-    height: var( --unit-height );
-    width: var( --unit-width );
-    z-index:1;
-}
-
-
-div.unit-ground-vehicle svg {
-    transform: rotate( -45deg );
-}
-
-div.unit svg rect.unit-marker {
-    fill: var( --primary-grey );
-    height: calc( var( --unit-air-height ) - var( --unit-stroke-width ) );
-    rx: var( --unit-stroke-width );
-    ry: var( --unit-stroke-width );
-    stroke: var( --secondary-neutral );
-    stroke-linejoin: round;
-    stroke-width: var( --unit-stroke-width );
-    width: calc( var( --unit-air-width ) - var( --unit-stroke-width ) );
-    x: var(--unit-air-label-x);
-    y: var(--unit-air-label-y);
-}
-//*/
-
 div.unit .unit-marker {
     background-color: transparent;
     background-repeat: no-repeat;

client/src/index.ts

@@ -60,13 +60,32 @@ function setup() {
 
     /* Generic clicks */
     document.addEventListener( "click", ( ev ) => {
+
         if ( ev instanceof PointerEvent && ev.target instanceof HTMLElement ) {
             if ( ev.target.classList.contains( "olympus-dialog-close" ) ) {
                 ev.target.closest( "div.olympus-dialog" )?.classList.add( "hide" );
             }
         }
+        
     });
 
+
+    /**  Olympus UI ***/
+    document.querySelectorAll( ".ol-select" ).forEach( select => {
+
+        //  Do open/close toggle
+        select.addEventListener( "click", ev => {
+            select.classList.toggle( "is-open" );
+        });
+
+        //  Autoclose on mouseleave
+        select.addEventListener( "mouseleave", ev => {
+            select.classList.remove( "is-open" );
+        });
+
+    });
+
+
     /* ATC */
     let atcFeatureSwitch = featureSwitches.getSwitch( "atc" );
     if ( atcFeatureSwitch?.isEnabled() ) {

client/views/navbar.ejs

@@ -1,7 +1,10 @@
 <nav id="primary-toolbar" class="ol-panel">
-    <nav id="app-icon">
-        <div id="options" class="ol-select-value icon"><img src="images/icon.png" class="main-logo"></img></div>  
-    </nav>
+
+    <div id="app-icon">
+        <div id="options" class="ol-select-value icon">
+            <img src="images/icon.png" class="main-logo" />
+        </div>  
+    </div>
 
     <div id="map-type" class="ol-select">
         <div class="ol-select-value">ArcGIS Satellite</div>

client/views/uikit.ejs

@@ -1588,6 +1588,17 @@
                 });
             });
 
+
+            document.querySelectorAll( ".ol-select" ).forEach( select => {
+                select.addEventListener( "click", ev => {
+                    select.classList.toggle( "is-open" );
+                });
+
+                select.addEventListener( "mouseleave", ev => {
+                    select.classList.remove( "is-open" );
+                });
+            });
+
         </script>
 
     </body>