Clearer relocation options while reporting.

Now that the "Report a problem" link in the nav bar links, more often
than not, to the reporting form rather than the homepage, it could be
challenging to actually start a new report in a location *other* than
the one currently on screen.

Rather than adding a link to the homepage, this change hopefully adds
a link right at the moment the user expects it – right on the "Report
a problem" form.

It also gave us an opportunity to reword the "Wrong location" message
and give it an icon more suitable for high-dpi displays.

Fixes #2238.

7 files changed, 35 insertions, 4 deletions

diff --git a/web/cobrands/fixmystreet/images/change-location-arrow.png b/web/cobrands/fixmystreet/images/change-location-arrow.png
new file mode 100644
index 000000000..6b3cf0efc
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/change-location-arrow.png
diff --git a/web/cobrands/fixmystreet/images/change-location-arrow.svg b/web/cobrands/fixmystreet/images/change-location-arrow.svg
new file mode 100644
index 000000000..fb6f1c429
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/change-location-arrow.svg
@@ -0,0 +1 @@
+<svg width="14" height="14" viewbox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill="#999" fill-rule="nonzero"><path d="M0 6h12v2H0z"/><path d="M11.2 7L6.9 2.8l1.5-1.5 4.2 4.3L14 7l-5.6 5.7-1.5-1.5L11.2 7z"/></g></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/change-location-search.png b/web/cobrands/fixmystreet/images/change-location-search.png
new file mode 100644
index 000000000..8f5ac91ba
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/change-location-search.png
diff --git a/web/cobrands/fixmystreet/images/change-location-search.svg b/web/cobrands/fixmystreet/images/change-location-search.svg
new file mode 100644
index 000000000..6b628e1eb
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/change-location-search.svg
@@ -0,0 +1 @@
+<svg width="14" height="14" viewbox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill="#999" fill-rule="nonzero"><path d="M5 10A5 5 0 1 1 5 0a5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M7.5 9L9 7.4l5 5-1.4 1.4z"/></g></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/wrong-location.png b/web/cobrands/fixmystreet/images/wrong-location.png
deleted file mode 100644
index 8f775f710..000000000
--- a/web/cobrands/fixmystreet/images/wrong-location.png
+++ /dev/null
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index f21650660..c17790176 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -382,10 +382,35 @@ select.form-control {
 
 .change_location {
     color: #666;
-    padding-#{$left}: 20px;
-    background: transparent url(/cobrands/fixmystreet/images/wrong-location.png) $left 50% no-repeat;
-    border-#{$left}: solid 4px transparent;
-    margin-top: -0.5em;
+    margin: 0;
+
+    // No need for this element on mobile, where they can't click the map,
+    // and there's already a "Report" button in the header that leads to
+    // the homepage search form. But we'll want to unhide in layout.scss.
+    display: none;
+
+    li {
+      list-style: none;
+      padding-#{$left}: 24px;
+      margin: 0.3em 0 0 0;
+      background-size: 14px 14px;
+      background-repeat: no-repeat;
+      background-position: flip(0 50%, 100% 50%);
+    }
+}
+
+.change_location__map {
+  @include svg-background-image('/cobrands/fixmystreet/images/change-location-arrow');
+}
+
+.change_location__search {
+  @include svg-background-image('/cobrands/fixmystreet/images/change-location-search');
+}
+
+// Space between the .change_location list and any
+// top_message.html announcements inserted via ajax.
+#js-top-message > :first-child {
+  margin-top: 1.5em;
 }
 
 .form-txt-submit-box {
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 2b00dec82..2c641f30c 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -354,6 +354,10 @@ body.mappage.admin {
   }
 }
 
+.change_location {
+  display: block;
+}
+
 .category_meta_message {
   padding-top: 0.5em;
   font-size: 0.9em;