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

Aligned numbers within pills.
This commit is contained in:
Pax1601 2023-04-08 15:04:51 +02:00 committed by GitHub
commit 9c834e4072
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 6 deletions

View File

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

View File

@ -1027,7 +1027,7 @@
<div class="content-body">
<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>
<dl id="airbase-properties" class="ol-data-grid">
<dt>Runway 1</dt>
@ -1084,6 +1084,46 @@
</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-display">
<div id="fuel-bar" class="highlight-coalition" data-coalition="blue" style="width:0%;"></div>