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 @@
+
\ 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 @@
+
\ 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 */