Change altitude based on units. Increase width of altitude legend and use an SVG

This commit is contained in:
James Wilson 2017-01-30 11:58:29 -06:00
parent c34b1c38fb
commit 908d794238
8 changed files with 29 additions and 8 deletions

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 13 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

View file

@ -248,7 +248,7 @@
<div id="expand_sidebar_control" class="ol-unselectable ol-control">
<button id="expand_sidebar_button" title="Expand Sidebar"></button>
</div>
<div id="altitude_chart" class="ol-unselectable ol-control">
<div id="altitude_chart" class="ol-unselectable ol-control altitudeFeet">
<button id="altitude_chart_button"></button>
</div>
</div>

View file

@ -1417,6 +1417,8 @@ function initializeUnitsSelector() {
var displayUnits = localStorage['displayUnits'];
DisplayUnits = displayUnits;
setAltitudeLegend(displayUnits);
// Initialize drop-down
var unitsSelector = $("#units_selector");
unitsSelector.val(displayUnits);
@ -1429,6 +1431,8 @@ function onDisplayUnitsChanged(e) {
localStorage['displayUnits'] = displayUnits;
DisplayUnits = displayUnits;
setAltitudeLegend(displayUnits);
// Update filters
updatePlaneFilter();
@ -1450,6 +1454,14 @@ function onDisplayUnitsChanged(e) {
});
}
function setAltitudeLegend(units) {
if (units === 'metric') {
$('#altitude_chart_button').addClass('altitudeMeters');
} else {
$('#altitude_chart_button').removeClass('altitudeMeters');
}
}
function onFilterByAltitude(e) {
e.preventDefault();
updatePlaneFilter();

View file

@ -609,18 +609,25 @@ select.error, textarea.error, input.error {
#altitude_chart {
float: right;
width: 502px;
height: 18px;
right: 40px;
bottom: 10px;
width: calc(100% - 5px);
max-width: 800px;
right: 5px;
bottom: 35px;
background-color: transparent !important;
}
#altitude_chart_button {
background-image: url('images/altitude_legend.png');
background-image: url('images/alt_legend_feet.svg');
background-size: cover;
background-color: transparent;
width: 502px;
height: 18px;
width: 100%;
height: 0;
padding: 0;
padding-bottom: calc(100% * 18 / 502);
}
.altitudeMeters {
background-image: url('images/alt_legend_meters.svg') !important;
}
/* Retina 2x images */