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
commit f4ddbbd1af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 9 deletions
Show Stats 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 {
display:flex;
overflow: visible;
}
#loadout-silhouette {
align-items: center;
display:flex;
justify-content: center;
width:55%;
width:100px;
}
#loadout-silhouette::before {
@ -58,7 +55,6 @@
display:flex;
flex-flow: column nowrap;
row-gap: 8px;
width:45%;
}
@ -82,11 +78,13 @@
#loadout-items > *::after {
content: attr( data-item );
width:52px;
overflow: hidden;
position:relative;
text-overflow: ellipsis;
width:80px;
}
#fuel-percentage {
align-items: center;
display:flex;
@ -112,7 +110,6 @@
height:6px;
margin-top:4px;
overflow: hidden;
width:90%;
}
#fuel-display #fuel-bar {

31
client/views/uikit.ejs
View File

@ -1124,6 +1124,37 @@
</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-display">
<div id="fuel-bar" class="highlight-coalition" data-coalition="blue" style="width:0%;"></div>