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

feat(map): selected unit coordinates panel moved to top; coords are now copy-able

Browse Source
This commit is contained in:
MarcoJayUsai
2024-11-16 18:33:59 +01:00
parent 5e5ee30b8f
commit e273203629
3 changed files with 145 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/server/public/stylesheets/panels/mouseinfo.css
View File

@@ -124,6 +124,53 @@
display:flex;
}
#unit-coordinates-title {
#unit-coordinates-container {
box-sizing: border-box;
background-color: var(--background-steel);
border-radius: var(--border-radius-sm);
box-shadow: 0px 2px 5px #000A;
padding: 10px;
position: absolute;
top: -48px;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0px;
transition: all 200ms ease-in-out;
}
#unit-coordinates-container[data-open="true"] {
gap: 4px;
top: -140px;
}
#unit-coordinates-container > #unit-coordinates {
width: 170px;
height: 0;
padding: 0 6px;
overflow: hidden;
flex-grow: 1;
transition: all 200ms ease-in-out;
}
#unit-coordinates-container[data-open="true"] > #unit-coordinates {
height: 90px;
padding: 6px;
}
#unit-coordinates-container > #unit-coordinates-toggle {
font-size: 10px;
flex-shrink: 1;
cursor: pointer;
}
#unit-coordinates-container > #unit-coordinates-toggle> #unit-coordinates-toggle-icon::after {
margin-top: 8px;
font-size: 12px;
content: "↑";
}
#unit-coordinates-container[data-open="true"] > #unit-coordinates-toggle > #unit-coordinates-toggle-icon::after {
content: "↓";
}

70
frontend/server/views/panels/mouseinfo.ejs
View File

@@ -60,40 +60,44 @@
</div>
</div>
<span id="unit-coordinates-title" class="hide">Selected Unit Coordinates:</span>
<div id="unit-coordinates" class="mouse-tool" data-location-system="LatLng">
<div class="mouse-tool-item" data-location-system="MGRS">
<div id="ref-unit-position-mgrs"></div>
<div id="unit-position-mgrs" class="coordinates"></div>
</div>
<div class="mouse-tool-item" data-location-system="LatLng">
<div id="ref-unit-position-latitude" data-location-system="LatLng"></div>
<div id="unit-position-latitude" class="coordinates" data-location-system="LatLng"></div>
</div>
<div class="mouse-tool-item" data-location-system="LatLng">
<div id="ref-unit-position-longitude" data-location-system="LatLng"></div>
<div id="unit-position-longitude" class="coordinates" data-location-system="LatLng"></div>
</div>
<div class="mouse-tool-item" data-location-system="UTM">
<div id="ref-unit-position-utm-northing" data-location-system="UTM"></div>
<div id="unit-position-utm-northing" class="coordinates" data-location-system="UTM"></div>
</div>
<div class="mouse-tool-item" data-location-system="UTM">
<div id="ref-unit-position-utm-easting" data-location-system="UTM"></div>
<div id="unit-position-utm-easting" class="coordinates" data-location-system="UTM"></div>
</div>
<div>
<div class="mouse-tool-item">
<div id="ref-unit-position-elevation" data-label="H"></div>
<div id="unit-position-elevation" class="elevation" data-value="---"></div>
<div id="unit-coordinates-container">
<div id="unit-coordinates" class="mouse-tool" data-location-system="LatLng">
<div class="mouse-tool-item" data-location-system="MGRS">
<div id="ref-unit-position-mgrs"></div>
<div id="unit-position-mgrs" class="coordinates copyable"></div>
</div>
<div class="mouse-tool-item" data-location-system="LatLng">
<div id="ref-unit-position-latitude" data-location-system="LatLng"></div>
<div id="unit-position-latitude" class="coordinates copyable" data-location-system="LatLng"></div>
</div>
<div class="mouse-tool-item" data-location-system="LatLng">
<div id="ref-unit-position-longitude" data-location-system="LatLng"></div>
<div id="unit-position-longitude" class="coordinates copyable" data-location-system="LatLng"></div>
</div>
<div class="mouse-tool-item" data-location-system="UTM">
<div id="ref-unit-position-utm-northing" data-location-system="UTM"></div>
<div id="unit-position-utm-northing" class="coordinates copyable" data-location-system="UTM"></div>
</div>
<div class="mouse-tool-item" data-location-system="UTM">
<div id="ref-unit-position-utm-easting" data-location-system="UTM"></div>
<div id="unit-position-utm-easting" class="coordinates copyable" data-location-system="UTM"></div>
</div>
<div>
<div class="mouse-tool-item">
<div id="ref-unit-position-elevation" data-label="H"></div>
<div id="unit-position-elevation" class="elevation copyable" data-value="---"></div>
</div>
</div>
</div>
<div id="unit-coordinates-toggle" data-open="false">
Unit Coordinates <span id="unit-coordinates-toggle-icon"></span>
</div>
</div>