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 #184 from Pax1601/180-unit-loadout-overflows-unitinfopanel

Browse Source 
String management for loadout items.
This commit is contained in:
Pax1601
2023-04-11 15:22:04 +02:00
committed by GitHub
parent c3233ad999 8d951410e5
commit f4ddbbd1af
2 changed files with 37 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,19 +26,16 @@
} }
#loadout-container {
width:250px;
}
#loadout { #loadout {
display:flex; display:flex;
overflow: visible;
} }
#loadout-silhouette { #loadout-silhouette {
align-items: center; align-items: center;
display:flex; display:flex;
justify-content: center; justify-content: center;
width:55%; width:100px;
} }
#loadout-silhouette::before { #loadout-silhouette::before {
@@ -58,7 +55,6 @@
display:flex; display:flex;
flex-flow: column nowrap; flex-flow: column nowrap;
row-gap: 8px; row-gap: 8px;
width:45%;
} }
@@ -82,11 +78,13 @@
#loadout-items > *::after { #loadout-items > *::after {
content: attr( data-item ); content: attr( data-item );
width:52px; overflow: hidden;
position:relative;
text-overflow: ellipsis;
width:80px;
} }
#fuel-percentage { #fuel-percentage {
align-items: center; align-items: center;
display:flex; display:flex;
@@ -112,7 +110,6 @@
height:6px; height:6px;
margin-top:4px; margin-top:4px;
overflow: hidden; overflow: hidden;
width:90%;
} }
#fuel-display #fuel-bar { #fuel-display #fuel-bar {

31
client/views/uikit.ejs
View File

@@ -1124,6 +1124,37 @@
</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="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 with a really long name for no reason"></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>