AFG/dump1090
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public_html/images/alt_legend_feet.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

1
public_html/images/alt_legend_meters.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public_html/images/altitude_legend.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
public_html/images/altitude_legend@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.6 KiB

BIN
public_html/images/altitude_legend@3x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.6 KiB

2
public_html/index.html
View file

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

12
public_html/script.js
View file

@ -1417,6 +1417,8 @@ function initializeUnitsSelector() {
var displayUnits = localStorage['displayUnits']; var displayUnits = localStorage['displayUnits'];
DisplayUnits = displayUnits; DisplayUnits = displayUnits;
setAltitudeLegend(displayUnits);
// Initialize drop-down // Initialize drop-down
var unitsSelector = $("#units_selector"); var unitsSelector = $("#units_selector");
unitsSelector.val(displayUnits); unitsSelector.val(displayUnits);
@ -1429,6 +1431,8 @@ function onDisplayUnitsChanged(e) {
localStorage['displayUnits'] = displayUnits; localStorage['displayUnits'] = displayUnits;
DisplayUnits = displayUnits; DisplayUnits = displayUnits;
setAltitudeLegend(displayUnits);
// Update filters // Update filters
updatePlaneFilter(); 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) { function onFilterByAltitude(e) {
e.preventDefault(); e.preventDefault();
updatePlaneFilter(); updatePlaneFilter();

21
public_html/style.css
View file

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