diff --git a/public_html/images/alt_legend_feet.svg b/public_html/images/alt_legend_feet.svg new file mode 100644 index 0000000..1bf22ad --- /dev/null +++ b/public_html/images/alt_legend_feet.svg @@ -0,0 +1 @@ +alt_legend_feet \ No newline at end of file diff --git a/public_html/images/alt_legend_meters.svg b/public_html/images/alt_legend_meters.svg new file mode 100644 index 0000000..b383d48 --- /dev/null +++ b/public_html/images/alt_legend_meters.svg @@ -0,0 +1 @@ +alt_legend_meters \ No newline at end of file diff --git a/public_html/images/altitude_legend.png b/public_html/images/altitude_legend.png deleted file mode 100644 index 2562dad..0000000 Binary files a/public_html/images/altitude_legend.png and /dev/null differ diff --git a/public_html/images/altitude_legend@2x.png b/public_html/images/altitude_legend@2x.png deleted file mode 100644 index e0b7fdf..0000000 Binary files a/public_html/images/altitude_legend@2x.png and /dev/null differ diff --git a/public_html/images/altitude_legend@3x.png b/public_html/images/altitude_legend@3x.png deleted file mode 100644 index 5f6d192..0000000 Binary files a/public_html/images/altitude_legend@3x.png and /dev/null differ diff --git a/public_html/index.html b/public_html/index.html index 92d09d9..f882ab9 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -248,7 +248,7 @@
-
+
diff --git a/public_html/script.js b/public_html/script.js index 0dd8a53..524adf6 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -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(); diff --git a/public_html/style.css b/public_html/style.css index 3b2eb15..2c4a8f8 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -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 */