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

More mouse info work.

Browse Source
This commit is contained in:
PeekabooSteam 2023-03-09 18:32:28 +00:00
parent e670b8ed19
commit 56370f5baf
2 changed files with 90 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
client/public/stylesheets/layout.css
View File

@ -174,16 +174,27 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
#mouse-info-panel {
bottom: 60px;
display:flex;
flex-direction: column;
height: fit-content;
position: absolute;
right: 10px;
row-gap: 10px;
width: 160px;
z-index: 1000;
}
#mouse-info-panel > * {
background-color: var( --background-grey );
border-radius: var( --border-radius-sm );
padding:6px;
}
#mouse-info-panel dl {
row-gap: 14px;
margin-bottom:4px;
row-gap: 8px;
}
#mouse-info-panel dt {
@ -191,16 +202,46 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
width:40%;
}
#mouse-info-panel dt {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size:24px 24px;
display:inline-block;
#mouse-info-panel dt::before {
align-items: center;
background-color: white;
border-radius: var( --border-radius-sm );
color: var( --background-steel );
display:flex;
font-size:15.6px;
font-weight: bolder;
height:16px;
justify-content: center;
line-height: 16px;
padding:4px;
text-transform: uppercase;
width:16px;
}
#mouse-info-panel dt#ref-measure-position::before {
background-image: url( "/images/unit.png" );
background-position: 50% 50%;
background-repeat: no-repeat;
background-size:16px 16px;
content: " ";
}
#mouse-info-panel dt[data-label]::before {
content: attr( data-label );
}
#mouse-info-panel dt[data-coalition="blue"]::before {
background-color: var( --primary-blue );
}
#mouse-info-panel dt[data-coalition="red"]::before {
background-color: var( --primary-red );
}
#mouse-info-panel dt[data-tooltip]:hover::before {
background-color: var( --background-steel );
background-color: var( --background-grey );
border-radius: 5px;
content: attr( data-tooltip );
display:flex;
@ -211,6 +252,21 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
white-space: nowrap;
}
#mouse-info-panel dd {
width:60%;
}
/*
#mouse-info-panel dt {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size:24px 24px;
display:inline-block;
}
#ref-measure-position {
background-image: url( "/images/pin.png" );
}
@ -231,9 +287,6 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
background-image: url( "/images/bullseye2.png" );
}
#mouse-info-panel dd {
width:60%;
}
#log-panel {

36
client/views/mouseinfopanel.ejs
View File

@ -1,12 +1,28 @@
<div id="mouse-info-panel" class="ol-panel">
<dl class="data-grid">
<dt id="ref-measure-position" data-tooltip="CTRL-click on the map to activate the measuring tool."></dt>
<dd id="measure-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
<dt id="ref-unit-position"></dt>
<dd id="unit-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
<dt id="ref-bullseye-1"></dt>
<dd id="bullseye-1" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
<dt id="ref-bullseye-2"></dt>
<dd id="bullseye-2" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
</dl>
<div>
<dl class="data-grid">
<dt id="ref-measure-position" data-tooltip="CTRL-click on the map to activate the measuring tool."></dt>
<dd id="measure-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
</dl>
</div>
<div>
<dl class="data-grid">
<dt id="ref-bullseye-1" data-label="BE" data-coalition="blue"></dt>
<dd id="bullseye-1" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
<dt id="ref-bullseye-2" data-label="BE" data-coalition="red"></dt>
<dd id="bullseye-2" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
</dl>
</div>
<div>
<dl class="data-grid">
<dt id="ref-mouse-position-latitude" data-label="N"></dt>
<dd id="mouse-position-latitude" class="coordinates" data-dd="---" data-mm="---" data-ss="--" data-sss="--"></dd>
<dt id="ref-mouse-position-longitude" data-label="E"></dt>
<dd id="mouse-position-longitude" class="coordinates" data-dd="---" data-mm="---" data-ss="--" data-sss="--"></dd>
</dl>
</div>
</div>