Use separate mobile banner HTML to simplify change

5 files changed, 30 insertions, 37 deletions

diff --git a/templates/web/base/around/display_location.html b/templates/web/base/around/display_location.html
index ed4ce209c..3ed16d3d3 100755
--- a/templates/web/base/around/display_location.html
+++ b/templates/web/base/around/display_location.html
@@ -71,6 +71,10 @@
             [% END %]
         </p>
 
+        <div class="mobile-map-banner">
+            <a href="/">[% loc('Home') %]</a>
+            <span>[% loc('Place pin on map') %]</span>
+        </div>
     </div>
 
 
diff --git a/templates/web/base/js/translation_strings.html b/templates/web/base/js/translation_strings.html
index 2171566ba..d006442af 100644
--- a/templates/web/base/js/translation_strings.html
+++ b/templates/web/base/js/translation_strings.html
@@ -28,7 +28,6 @@
         right_place: '[% loc('Right place?') | replace("'", "\\'") %]',
         try_again: '[% loc('Try again') | replace("'", "\\'") %]',
         place_pin_on_map: '[% loc('Place pin on map') | replace("'", "\\'") %]',
-        home: '[% loc('Home') | replace("'", "\\'") %]',
         back: '[% loc('Back') | replace("'", "\\'") %]',
         how_to_send: '[% loc('How to send successful reports') | replace("'", "\\'") %]',
         more_details: '[% loc('Details') | replace("'", "\\'") %]',
@@ -50,7 +49,5 @@
         upload_max_files_exceeded: '[% loc ('Whoa there Testino! Three photos are enough.') | replace("'", "\\'") %]',
         upload_default_message: '[% loc ('Drag and drop photos here or <u>click to upload</u>') | replace("'", "\\'") %]',
         upload_cancel_confirmation: '[% loc ('Are you sure you want to cancel this upload?') | replace("'", "\\'") %]',
-        upload_invalid_file_type: '[% loc ('Please upload an image only') | replace("'", "\\'") %]',
-
-        report_problem_heading: '[% loc('Click map to report a problem') | replace("'", "\\'") %]'
+        upload_invalid_file_type: '[% loc ('Please upload an image only') | replace("'", "\\'") %]'
     };
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index dfd0b5ffd..490057135 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -119,29 +119,14 @@ fixmystreet.mobile_reporting = {
     // Creates the "app-like" mobile reporting UI with full screen map
     // and special "OK/Cancel" buttons etc.
     $('html').addClass('mobile-reporting-map only-map');
+    $('.mobile-map-banner span').text(translation_strings.place_pin_on_map);
     $('html, body').scrollTop(0);
-
-    var banner_text = '<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map;
-    $('.big-green-banner')
-        .addClass('mobile-map-banner')
-        .appendTo('#map_box')
-        .html(banner_text);
   },
 
   remove_ui: function() {
     // Removes the "app-like" mobile reporting UI, reverting all the
     // changes made by fixmystreet.mobile_reporting.apply_ui().
-
     $('html').removeClass('mobile-reporting-map only-map');
-
-    var banner_text = translation_strings.report_problem_heading;
-    if (typeof variation !== 'undefined' && variation === 1) {
-        banner_text = 'Click map to request a fix';
-    }
-    $('.big-green-banner')
-        .removeClass('mobile-map-banner')
-        .prependTo('#side')
-        .html(banner_text);
     $('#map_box').css({ width: "", height: "", position: "" });
     $('#mob_sub_map_links').remove();
   }
@@ -896,7 +881,7 @@ fixmystreet.display = {
             height: height
         });
 
-        $('.mobile-map-banner').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.right_place);
+        $('.mobile-map-banner span').text(translation_strings.right_place);
 
         // mobile user clicks 'ok' on map
         $('#mob_ok').toggle(function(){
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 94ed1fdad..d21003a43 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -822,18 +822,6 @@ input.final-submit {
   }
 }
 
-
-.big-green-banner {
-  position: relative;
-  top: -1.75em;
-  background: $col_click_map;
-  color: #fff;
-  padding: 1em;
-  text-transform: uppercase;
-  text-align: center;
-  font-size: 0.875em;
-}
-
 .banner {
   position: relative;
   p {
@@ -1233,13 +1221,36 @@ html.js #map .noscript {
   }
 }
 
+.big-green-banner {
+  position: relative;
+  top: -1.75em;
+  background: $col_click_map;
+  color: #fff;
+  padding: 1em;
+  text-transform: uppercase;
+  text-align: center;
+  font-size: 0.875em;
+  .mobile-reporting-map & {
+    display: none;
+  }
+}
+
 .mobile-map-banner {
+  display: none;
+  .mobile-reporting-map & {
+    display: block;
+  }
+  text-transform: uppercase;
+  text-align: center;
+  font-family: $heading-font;
+  line-height: 1em;
   margin:0;
   position: absolute;
   top:0;
   #{$left}: 0;
   #{$right}: 0;
   font-size:0.75em;
+  color: #fff;
   background:rgba(0, 0, 0, 0.7);
   padding:0.75em 30px;
   a {
diff --git a/web/cobrands/sass/_report_list_pins.scss b/web/cobrands/sass/_report_list_pins.scss
index 2b77c4675..74f0a5f90 100644
--- a/web/cobrands/sass/_report_list_pins.scss
+++ b/web/cobrands/sass/_report_list_pins.scss
@@ -71,10 +71,6 @@ body.frontpage {
 
 .big-green-banner {
   display: none; // hide the empty banner by default
-
-  &.mobile-map-banner {
-    display: block; // show it again once the mobile javascript adds this class
-  }
 }
 
 .click-the-map {