diff --git a/client/public/stylesheets/layout.css b/client/public/stylesheets/layout.css index 8fe09ada..c8e31a4d 100644 --- a/client/public/stylesheets/layout.css +++ b/client/public/stylesheets/layout.css @@ -58,34 +58,6 @@ body.feature-forceShowUnitControlPanel #unit-control-panel { display:block !important; } -#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 { align-items: center; display:flex; @@ -155,6 +127,7 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after color: var( --accent-light-blue ); } + #unit-info-panel { bottom: 20px; font-size:12px; @@ -164,6 +137,59 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after z-index: 1000; } + +#unit-info-panel #unit-name { + line-height: 18px; + margin-bottom:10px; +} + +#unit-info-panel #current-task { + border-radius: var( --border-radius-lg ); + margin-top:15px; +} + +#unit-info-panel #current-task::after { + content: attr( data-current-task ); + display:block; +} + + +#unit-info-panel #loadout-data { + max-width: 250px; +} + +#unit-info-panel #loadout-data .data-grid { + margin: 6px 0; +} + +#unit-info-panel #loadout-data .data-grid dt:first-child { + text-indent: 5px; +} + +#unit-info-panel #loadout-data .data-grid dt:first-child::before { + content: url( /images/icons/fuel.svg ); + display:inline-block; + filter:invert(100%); + height:16px; + text-indent:5px; + translate:-10px 5%; + width:16px; +} + +#unit-info-panel #loadout-fuel-level::after { + content: attr( data-fuel-level ) "%"; +} + +#unit-info-panel #loadout-container .loadout-item { + background-color: black; +} + +#unit-info-panel #loadout-container .loadout-item::before { + content: attr( data-loadout-item ) ' \d7 ' attr( data-loadout-qty ); +} + + + #connection-status-panel { bottom: 20px; font-size:12px; diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index fd79a10c..33296617 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -66,18 +66,11 @@ button[disabled="disabled"] { .pill { background-color: var( --background-darksteel ); border-radius: var(--border-radius-sm); - padding: 2px 6px; + padding: 4px 8px; width: fit-content; } - -.loadout-item::after { - content: attr( data-qty ) 'x ' attr( data-item ); -} - - - .ol-panel { background-color: var(--background-steel); border-radius: 15px; @@ -267,25 +260,24 @@ button[disabled="disabled"] { justify-content: space-evenly; } -.ol-panel-board>.panel-section { +.ol-panel-board > .panel-section { border-right: 1px solid #555; - padding: 10px; + margin:10px 0; + padding:0 30px; } -.ol-panel-board>.panel-section:last-of-type { +.ol-panel-board > .panel-section:first-child { + padding-left:20px; +} + +.ol-panel-board > .panel-section:last-child { + padding-right:20px; +} + +.ol-panel-board > .panel-section:last-of-type { border-right-width: 0; } -.ol-panel-board h1, -.ol-panel-board h2 { - font-weight: var(--font-weight-bolder); - margin: 0; - padding: 0 0 5px 0; -} - -.ol-panel-board h2 { - font-size: 14px; -} h1, h2, @@ -335,16 +327,19 @@ nav.ol-panel> :last-child { .ol-panel .ol-group { + border-radius: var(--border-radius-sm); column-gap: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; + row-gap: 4px; } -.ol-panel .ol-group { - border-radius: var(--border-radius-sm); +.ol-panel .ol-group.wrap { + flex-wrap: wrap; } + .ol-panel .ol-group-button-toggle { align-items: center; column-gap: 15px; @@ -385,20 +380,20 @@ nav.ol-panel> :last-child { background-color: var(--secondary-light-grey); } -.highlight-bluefor { - background-color: var(--primary-blue); - color: var(--background-steel) -} - -.highlight-redfor { - background-color: var(--primary-red); -} - -.highlight-neutral { +.highlight-coalition, .highlight-neutral { background-color: var(--primary-grey); color: var(--secondary-gunmetal-grey) } +.highlight-coalition[data-coalition="blue"], .highlight-bluefor { + background-color: var(--primary-blue); + color: white; +} + +.highlight-coalition[data-coalition="red"], .highlight-redfor { + background-color: var(--primary-red); +} + .accent-green { color: var(--accent-green); diff --git a/client/src/panels/unitinfopanel.ts b/client/src/panels/unitinfopanel.ts index 0505ea7e..1b95e60b 100644 --- a/client/src/panels/unitinfopanel.ts +++ b/client/src/panels/unitinfopanel.ts @@ -44,9 +44,9 @@ export class UnitInfoPanel extends Panel { this.#unitName.innerText = unit.getBaseData().unitName; this.#groupName.innerText = unit.getBaseData().groupName; this.#name.innerText = unit.getBaseData().name; - this.#heading.innerText = String(Math.floor(rad2deg(unit.getFlightData().heading)) + " °"); - this.#altitude.innerText = String(Math.floor(unit.getFlightData().altitude / 0.3048) + " ft"); - this.#groundSpeed.innerText = String(Math.floor(unit.getFlightData().speed * 1.94384) + " kts"); + //this.#heading.innerText = String(Math.floor(rad2deg(unit.getFlightData().heading)) + " °"); + //this.#altitude.innerText = String(Math.floor(unit.getFlightData().altitude / 0.3048) + " ft"); + //this.#groundSpeed.innerText = String(Math.floor(unit.getFlightData().speed * 1.94384) + " kts"); //this.#fuel.innerText = String(unit.getMissionData().fuel + "%"); //this.#latitude.innerText = ConvertDDToDMS(unit.getFlightData().latitude, false); //this.#longitude.innerText = ConvertDDToDMS(unit.getFlightData().longitude, true); diff --git a/client/views/unitinfopanel.ejs b/client/views/unitinfopanel.ejs index 1f0bb900..73c37155 100644 --- a/client/views/unitinfopanel.ejs +++ b/client/views/unitinfopanel.ejs @@ -1,25 +1,35 @@
+
+
-

Olympus 1-1

-
Name
-
Group
-
Task
-
-
-
-
Heading
-
123°
-
Speed
-
323kts
-
Altitude
-
27,414ft
-
-
-
-

Loadout

-
+

Olympus 1-1

+
+
Name
+
Group
+
Task
+
+ +
+ +

Loadout

+ +
+
Fuel
+
+
+ +
+
+
+
+
+
+ +
+
+
\ No newline at end of file