Move most JavaScript mobile map changes to CSS.

3 files changed, 46 insertions, 36 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 38bbf4ea0..52a555c58 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -54,24 +54,16 @@ $(function(){
         if (last_type == type) { return; }
         if (type == 'mobile') {
             $html.addClass('mobile');
-            $('#map_box').css({ height: '10em' });
-            if (typeof fixmystreet !== 'undefined') {
-                fixmystreet.state_map = ''; // XXX
-            }
             if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
-                // Immediately go full screen map if on around page
-                $('#site-header').hide();
-                $('#map_box').prependTo('.wrapper').css({
-                    position: 'absolute',
-                    top: 0, left: 0, right: 0, bottom: 0,
-                    height: 'auto',
-                    margin: 0
-                });
-                $('#fms_pan_zoom').css({ top: '2.75em' });
+                // Creates the "app-like" mobile reporting UI with full screen map
+                // and special "OK/Cancel" buttons etc.
+                $html.addClass('mobile-reporting-map');
+
+                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('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map);
+                    .html(banner_text);
             }
             $('span.report-a-problem-btn').on('click.reportBtn', function(){
                 $('html, body').animate({scrollTop:0}, 500);
@@ -79,24 +71,13 @@ $(function(){
                 $(this).toggleClass('hover');
             });
         } else {
-            // Make map full screen on non-mobile sizes.
             $html.removeClass('mobile');
-            $('#map_box').css({ height: '' });
-            if (typeof fixmystreet !== 'undefined') {
-                fixmystreet.state_map = 'full';
-            }
             if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
-                // Remove full-screen-ness
+                // Removes the "app-like" mobile reporting UI, reverting all the
+                // changes made above.
+                $html.removeClass('mobile-reporting-map');
+
                 var banner_text = translation_strings.report_problem_heading;
-                if (cobrand !== 'oxfordshire') {
-                    $('#site-header').show();
-                }
-                $('#map_box').prependTo('.content').css({
-                    position: '',
-                    top: '', left: '', right: '', bottom: '',
-                    height: '',
-                    margin: ''
-                });
                 if (typeof variation !== 'undefined' && variation === 1) {
                     banner_text = 'Click map to request a fix';
                 }
@@ -105,7 +86,6 @@ $(function(){
                     .prependTo('#side')
                     .html(banner_text);
             }
-            $('#fms_pan_zoom').css({ top: '' });
             $('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn');
         }
         last_type = type;
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 3048ae300..2f3bca274 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1269,6 +1269,42 @@ a:hover.rap-notes-trigger {
   margin:1em 0;
 }
 
+.mobile #map_box {
+  height: 10em; // eg: at the top of individual report pages
+}
+
+// When you're in the reporting flow on mobile, we hide the site-header
+// and make the map full screen to reduce distractions. JavaScript also
+// tweaks the text content of some of the map-related elements, to make
+// it more "app-like".
+.mobile-reporting-map {
+  #site-header {
+    display: none;
+  }
+
+  #map_box {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: auto; // override `.mobile #map_box` height:10em
+    margin: 0;
+  }
+
+  #fms_pan_zoom {
+    top: 2.75em; // make space for the semi-transparent "Place pin on map" bar
+  }
+
+  .container {
+    padding: 0; // map_box needs to be full width, so remove page gutter
+  }
+
+  #map_sidebar {
+    padding: 1em; // reinstate page gutter, but on sidebar, so map_box is unaffected
+  }
+}
+
 
 /* Reporting a problem bits */
 
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 1379d0fa5..361bd0e96 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -394,12 +394,6 @@ $(function(){
         }, fixmystreet.map_options)
     );
 
-    // Need to do this here, after the map is created (might not have been when
-    // resize() called)
-    if ($('html').hasClass('mobile') && fixmystreet.page == 'around') {
-        $('#fms_pan_zoom').css({ top: '2.75em' });
-    }
-
     // Set it up our way
 
     var layer;