mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Tarted up the unit control panel a bit more.
This commit is contained in:
PeekabooSteam
parent
ef960eb2ee
commit
7c4f11591e
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -102,6 +102,7 @@ function setup() {
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
const unitName = document.getElementById( "unit-name" );
|
||||
|
||||
if ( unitName instanceof HTMLInputElement ) {
|
||||
@ -124,6 +125,7 @@ function setup() {
|
||||
});
|
||||
|
||||
}
|
||||
//*/
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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°</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user