Moved altitude to its own line and added labels

This commit is contained in:
tuffnerdstuff 2021-04-02 00:40:20 +02:00
parent b5dad6ebe2
commit 082da40d57
2 changed files with 28 additions and 10 deletions

View file

@ -712,19 +712,20 @@ function processUpdate(data, init) {
'<p class="' + shares[user].state + '" id="label-' + shares[user].id + '">' +
'<span id="nickname-' + shares[user].id + '"></span>' +
'<span class="metric">' +
'<span id="velocity-' + shares[user].id + '">0.0</span> ' +
VELOCITY_UNIT.unit +
' | </span>' +
'<span class="metric">' +
'<span id="altitude-' + shares[user].id + '">0.0</span> ' +
ALTITUDE_UNIT.unit +
'<span class="metric-label">vel:</span>' +
'<span class="metric-value"><span id="velocity-' + shares[user].id + '">0.0</span> ' +
VELOCITY_UNIT.unit + '</span>' +
'<br>' +
'<span class="metric-label">alt:</span>' +
'<span class="metric-value"><span id="altitude-' + shares[user].id + '">0.0</span> ' +
ALTITUDE_UNIT.unit + '</span>' +
'</span>' +
'<span class="offline" id="last-seen-' + shares[user].id + '">' +
'</span>' +
'</p>' +
'</div>',
// FIXME: hard-coded and dependend on style.css .marker
iconAnchor: [60, 18]
iconAnchor: [48, 18]
});
shares[user].marker = L.marker([lat, lon], {icon: shares[user].icon}).on("click", function() {
follow(this.haukUser);

View file

@ -254,7 +254,7 @@ a:last-child > .store-icon {
/* The outer marker div. */
.marker {
width: 120px;
width: 96px;
height: 62px;
}
@ -302,8 +302,8 @@ a:last-child > .store-icon {
width: 100%;
border-radius: 15px;
text-align: center;
padding: 2px 0;
line-height: 100%;
padding: 5px 0 5px;
line-height: 125%;
font-family: sans-serif;
overflow: hidden;
white-space: nowrap;
@ -333,3 +333,20 @@ a:last-child > .store-icon {
background: none;
border: none;
}
.metric-label {
display:inline-block;
width: 30%;
text-align:right;
vertical-align: bottom;
padding-right: 0.5em;
}
.metric-value {
display:inline-block;
width: 70%;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}