From 1bb52e3cb6da18a4777c8314088c5cb5c48a484a Mon Sep 17 00:00:00 2001 From: J Guthrie Date: Thu, 29 Mar 2018 20:50:29 +0100 Subject: [PATCH 1/3] Unlocateable place now highlighted in red and specified in error message The textbox containing the unlocateable place gets highlighted in red Also added a new locale value to specify an error for a specific place --- app/assets/javascripts/index/directions.js | 7 ++++++- config/locales/en.yml | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js index 1a3e0d4ec..689a6eba8 100644 --- a/app/assets/javascripts/index/directions.js +++ b/app/assets/javascripts/index/directions.js @@ -53,6 +53,10 @@ OSM.Directions = function (map) { } }); + input.on("keydown", function() { + input.css("background-color", "#fff"); + }); + input.on("change", function (e) { awaitingGeocode = true; @@ -86,7 +90,8 @@ OSM.Directions = function (map) { endpoint.awaitingGeocode = false; endpoint.hasGeocode = true; if (json.length === 0) { - alert(I18n.t('javascripts.directions.errors.no_place')); + alert(I18n.t('javascripts.directions.errors.no_place_with_name', {place: endpoint.value})); + input.css("background-color", "rgba(255, 0, 0, 0.5)"); return; } diff --git a/config/locales/en.yml b/config/locales/en.yml index 2aca45255..a8308444a 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2326,6 +2326,7 @@ en: errors: no_route: "Couldn't find a route between those two places." no_place: "Sorry - couldn't find that place." + no_place_with_name: "Sorry - couldn't locate '%{place}'." instructions: continue_without_exit: Continue on %{name} slight_right_without_exit: Slight right onto %{name} From becccea034bc1ca4609c904095f4f86e17e349b4 Mon Sep 17 00:00:00 2001 From: J Guthrie Date: Thu, 29 Mar 2018 22:27:33 +0100 Subject: [PATCH 2/3] Remove/replace redundant no_place locale translation --- app/assets/javascripts/index/directions.js | 2 +- config/locales/en.yml | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js index 689a6eba8..14be8b358 100644 --- a/app/assets/javascripts/index/directions.js +++ b/app/assets/javascripts/index/directions.js @@ -90,7 +90,7 @@ OSM.Directions = function (map) { endpoint.awaitingGeocode = false; endpoint.hasGeocode = true; if (json.length === 0) { - alert(I18n.t('javascripts.directions.errors.no_place_with_name', {place: endpoint.value})); + alert(I18n.t('javascripts.directions.errors.no_place', {place: endpoint.value})); input.css("background-color", "rgba(255, 0, 0, 0.5)"); return; } diff --git a/config/locales/en.yml b/config/locales/en.yml index a8308444a..8a12d10a1 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2325,8 +2325,7 @@ en: distance: "Distance" errors: no_route: "Couldn't find a route between those two places." - no_place: "Sorry - couldn't find that place." - no_place_with_name: "Sorry - couldn't locate '%{place}'." + no_place: "Sorry - couldn't locate '%{place}'." instructions: continue_without_exit: Continue on %{name} slight_right_without_exit: Slight right onto %{name} From efd17cfbe9e02467e4275d3793ff8e6d7cec4815 Mon Sep 17 00:00:00 2001 From: J Guthrie Date: Thu, 29 Mar 2018 22:48:39 +0100 Subject: [PATCH 3/3] Moved inline styling to stylesheet --- app/assets/javascripts/index/directions.js | 4 ++-- app/assets/stylesheets/common.scss | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js index 14be8b358..7fda7f7f0 100644 --- a/app/assets/javascripts/index/directions.js +++ b/app/assets/javascripts/index/directions.js @@ -54,7 +54,7 @@ OSM.Directions = function (map) { }); input.on("keydown", function() { - input.css("background-color", "#fff"); + input.removeClass("highlight_error"); }); input.on("change", function (e) { @@ -91,7 +91,7 @@ OSM.Directions = function (map) { endpoint.hasGeocode = true; if (json.length === 0) { alert(I18n.t('javascripts.directions.errors.no_place', {place: endpoint.value})); - input.css("background-color", "rgba(255, 0, 0, 0.5)"); + input.addClass("highlight_error"); return; } diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 4353e5e65..462cc50a7 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -938,6 +938,10 @@ header .search_forms, border-radius: 0 2px 2px 0; } + input.highlight_error { + background-color: rgba(255, 0, 0, 0.5); + } + select { /* this next line is to polyfill the vertical alignment of text within a select element, * which is different between firefox and chrome. */