weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #170 from Pax1601/149-loadout-numbers-overflowing

Browse Source 
Aligned numbers within pills.
This commit is contained in:
Pax1601
2023-04-08 15:04:51 +02:00
committed by GitHub
parent b10522498b b9f32a5b82
commit 9c834e4072
2 changed files with 45 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/public/stylesheets/unitinfopanel.css
View File

@@ -58,7 +58,6 @@
display:flex; display:flex;
flex-flow: column nowrap; flex-flow: column nowrap;
row-gap: 8px; row-gap: 8px;
text-align: center;
width:45%; width:45%;
} }
@@ -67,23 +66,23 @@
align-items: center; align-items: center;
column-gap: 8px; column-gap: 8px;
display:flex; display:flex;
justify-content: flex-end;
white-space: nowrap; white-space: nowrap;
} }
#loadout-items > *::before { #loadout-items > *::before {
align-items: center; align-items: center;
background-color: var( --secondary-light-grey ); background-color: var( --secondary-light-grey );
border-radius: 50%; border-radius: var( --border-radius-sm );
content: attr( data-qty ); content: attr( data-qty );
display:flex; display:flex;
font-weight: var( --font-weight-bolder ); font-weight: var( --font-weight-bolder );
justify-content: center; padding:1px 4px;
height:20px;
width:20px;
} }
#loadout-items > *::after { #loadout-items > *::after {
content: attr( data-item ); content: attr( data-item );
width:52px;
} }

42
client/views/uikit.ejs
View File

@@ -1027,7 +1027,7 @@
<div class="content-body"> <div class="content-body">
<div class="example"> <div class="example">
<div id="airbase-contextmenu" class="ol-panel"> <div id="airbase-contextmenu" class="ol-panel" style="position:relative;">
<h3 id="airbase-name">Al Alhambra</h3> <h3 id="airbase-name">Al Alhambra</h3>
<dl id="airbase-properties" class="ol-data-grid"> <dl id="airbase-properties" class="ol-data-grid">
<dt>Runway 1</dt> <dt>Runway 1</dt>
@@ -1084,6 +1084,46 @@
</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 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">
<div data-qty="1150" data-item="30mm AP"></div>
<div data-qty="2" data-item="AIM-9M"></div>
<div data-qty="6" data-item="Mk-82"></div>
</div>
</div>
<div id="fuel-percentage" data-percentage="45"></div> <div id="fuel-percentage" data-percentage="45"></div>
<div id="fuel-display"> <div id="fuel-display">
<div id="fuel-bar" class="highlight-coalition" data-coalition="blue" style="width:0%;"></div> <div id="fuel-bar" class="highlight-coalition" data-coalition="blue" style="width:0%;"></div>