First commit for unit info panel.

This commit is contained in:
PeekabooSteam
2023-03-22 23:45:17 +00:00
parent 1f2887c75a
commit 49ded7f039
4 changed files with 199 additions and 60 deletions

View File

@@ -1019,6 +1019,50 @@
</div>
</div>
<div class="content">
<div class="content-header">Airfield menu</div>
<div class="content-body">
<div class="example">
<div id="unit-info-panel" class="ol-panel" style="position:relative;">
<div class="ol-panel-board">
<div id="general" class="panel-section">
<h3 class="unit-name">Olympus 1-1</h3>
<div class="ol-group">
<div class="unit-label">Name</div>
<div class="unit-control">AI Controlled</div>
</div>
<div id="current-task" class="pill highlight-coalition" data-coalition="blue" data-current-task="Awaiting tasking"></div>
</div>
<div id="loadout-container" class="panel-section">
<div id="loadout">
<div id="loadout-silhouette" style="--loadout-background-image:url('/images/units/f-15.png');"></div>
<div id="loadout-items" data-empty-message="Empty loadout">
Empty loadout
</div>
</div>
<div id="fuel-percentage" data-percentage="45"></div>
<div id="fuel-display">
<div id="fuel-bar" class="highlight-coalition" data-coalition="blue" style="width:0%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>

View File

@@ -3,25 +3,25 @@
<div class="ol-panel-board">
<div id="general" class="panel-section">
<h3 id="unit-name">Olympus 1-1</h3>
<h3 id="unit-name"></h3>
<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="unit-label"></div>
<div id="unit-control"></div>
</div>
<div id="current-task" class="pill highlight-coalition" data-coalition="blue" data-current-task=""></div>
</div>
<div id="loadout-data" class="panel-section">
<div id="loadout-container" class="panel-section">
<div id="loadout">
<div id="loadout-silhouette"></div>
<div id="loadout-items">
</div>
</div>
<h4 id="loadout-label">Loadout</h4>
<dl class="ol-data-grid">
<dt>Fuel</dt>
<dd id="loadout-fuel-level" data-fuel-level="69"></dd>
</dl>
<div id="loadout-container" class="ol-group wrap">
<!-- Here the loadout elements will be shown -->
<div id="fuel-percentage" data-percentage=""></div>
<div id="fuel-display">
<div id="fuel-bar" class="highlight-coalition" data-coalition="blue" style="width:30%;"></div>
</div>
</div>