Change altitude based on units. Increase width of altitude legend and use an SVG
This commit is contained in:
parent
c34b1c38fb
commit
908d794238
1
public_html/images/alt_legend_feet.svg
Normal file
1
public_html/images/alt_legend_feet.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 13 KiB |
1
public_html/images/alt_legend_meters.svg
Normal file
1
public_html/images/alt_legend_meters.svg
Normal file
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 |
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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 */
|
||||
|
|
Loading…
Reference in a new issue