Added sample content to loadout.

client/public/stylesheets/layout.css

@@ -58,8 +58,32 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 	display:block !important;
 }
 
-.content #unit-control-panel {
-	position: static;
+#unit-control-panel #loadout-container {
+	display:flex;
+	flex-wrap: wrap;
+	row-gap: 4px;
+}
+
+#unit-control-panel #loadout-label span {
+	display:block;
+	float:right;
+}
+
+#unit-control-panel #loadout-label span::before {
+	content: url( /images/icons/fuel.svg );
+	display:inline-block;
+	filter:invert(100%);
+	height:16px;
+	translate:-25% 5%;
+	width:16px;
+}
+
+#unit-control-panel #loadout-label span::after {
+	content: attr( data-fuel-level ) "%";
+}
+
+#unit-control-panel #loadout-container .loadout-item {
+	background-color: black;
 }
 
 dl.data-grid {
@@ -219,7 +243,7 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
 }
 
 #mouse-info-panel dt#ref-measure-position::after {
-	background-image: url( "/images/unit.png" );
+	background-image: url( "/images/icons/ruler.svg" );
 	background-position: 50% 50%;
 	background-repeat: no-repeat;
 	background-size:16px 16px;

client/public/stylesheets/olympus.css

@@ -64,6 +64,7 @@ button[disabled="disabled"] {
 
 
 .pill {
+    background-color: var( --background-darksteel );
     border-radius: var(--border-radius-sm);
     padding: 2px 6px;
     width: fit-content;
@@ -71,6 +72,12 @@ button[disabled="disabled"] {
 
 
 
+.loadout-item::after {
+    content: attr( data-qty ) 'x ' attr( data-item );
+}
+
+
+
 .ol-panel {
     background-color: var(--background-steel);
     border-radius: 15px;
@@ -194,7 +201,7 @@ button[disabled="disabled"] {
     padding: 6px 2px;
     text-align: left;
     white-space: nowrap;
-    width: fit-content;
+    width: 100%;
 }
 
 .ol-select>.ol-select-options>div button:hover {
@@ -655,5 +662,10 @@ body[data-hide-naval] #unit-visibility-control-naval {
     transform: translateX(var(--height));
 }
 
-[data-coalition=blue], [data-active-coalition=blue] {background-color: var(--primary-blue)}
-[data-coalition=red], [data-active-coalition=red] {background-color:var(--primary-red)}
+[data-active-coalition="blue"] {
+    background-color: var(--primary-blue)
+}
+
+[data-active-coalition="red"] {
+    background-color:var(--primary-red)
+}

client/public/stylesheets/units.css

@@ -24,14 +24,14 @@ div.unit:not( .no-function ) {
     cursor:pointer;
 }
 
-[data-hide-aircraft] div.unit-air,
-[data-hide-ground] div.unit-ground,
-[data-hide-sam] div.unit-sam,
-[data-hide-threat] div.unit-threat,
-[data-hide-naval] div.unit-naval,
-[data-hide-blue] div.unit[data-coalition="blue"],
-[data-hide-red] div.unit[data-coalition="red"],
-[data-hide-neutral] div.unit[data-coalition="neutral"] {
+[data-hide-aircraft] #map-container div.unit-air,
+[data-hide-ground] #map-container div.unit-ground,
+[data-hide-sam] #map-container div.unit-sam,
+[data-hide-threat] #map-container div.unit-threat,
+[data-hide-naval] #map-container div.unit-naval,
+[data-hide-blue] #map-container div.unit[data-coalition="blue"],
+[data-hide-red] #map-container div.unit[data-coalition="red"],
+[data-hide-neutral] #map-container div.unit[data-coalition="neutral"] {
     display:none;
 }
 

client/views/unitcontrolpanel.ejs

@@ -56,8 +56,12 @@
         </div>
 
         <div id="loadout-data" class="panel-section">
-            <h4 id="loadout-label">Loadout</h4>
-            <div id="loadout-container" class="ol-scroll"></div>
+            <h4 id="loadout-label">Loadout<span id="loadout-fuel-level" data-fuel-level="69"></span></h4>
+            <div id="loadout-container" class="ol-group">
+                <div class="pill loadout-item" data-qty="2" data-item="AIM-120B"></div>
+                <div class="pill loadout-item" data-qty="2" data-item="AIM-9P"></div>
+                <div class="pill loadout-item" data-qty="100" data-item="AIM-120B"></div>
+            </div>
         </div>
     </div>