9 files changed, 63 insertions, 11 deletions
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 313d790c9..8e8941421 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -118,7 +118,7 @@ fixmystreet.mobile_reporting = {
   apply_ui: function() {
     // Creates the "app-like" mobile reporting UI with full screen map
     // and special "OK/Cancel" buttons etc.
-    $('html').addClass('mobile-reporting-map only-map');
+    $('html').addClass('map-fullscreen only-map map-reporting');
     $('.mobile-map-banner span').text(translation_strings.place_pin_on_map);
     $('html, body').scrollTop(0);
   },
@@ -126,7 +126,7 @@ fixmystreet.mobile_reporting = {
   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');
+    $('html').removeClass('map-fullscreen only-map map-reporting');
     $('#map_box').css({ width: "", height: "", position: "" });
     $('#mob_sub_map_links').remove();
   }
@@ -869,6 +869,9 @@ $.extend(fixmystreet.set_up, {
         }
         $('#key-tools li:empty').remove();
         $('#report-updates-data').insertAfter($('#map_box'));
+        if (fixmystreet.page === 'report' || fixmystreet.page === 'reports') {
+            $('#sub_map_links').append('<a href="#" id="toggle-fullscreen" class="expand" data-expand-text="'+ translation_strings.expand_map +'" data-compress-text="'+ translation_strings.collapse_map +'" >'+ translation_strings.expand_map +'</span>');
+        }
     }
 
     // Show/hide depending on whether it has any children to show
@@ -897,6 +900,16 @@ $.extend(fixmystreet.set_up, {
             })
             .prependTo('#sub_map_links');
     }
+
+    $('#toggle-fullscreen').click(function() {
+      var btnClass = $('html').hasClass('map-fullscreen') ? 'expand' : 'compress';
+      var text = $(this).data(btnClass + '-text');
+
+      $('html').toggleClass('map-fullscreen only-map');
+      $(this).html(text).attr('class', btnClass);
+
+      fixmystreet.map.updateSize();
+    });
   },
 
   map_sidebar_key_tools: function() {
diff --git a/web/cobrands/fixmystreet/header.js b/web/cobrands/fixmystreet/header.js
index c4c3de1b6..e4b0a9a91 100644
--- a/web/cobrands/fixmystreet/header.js
+++ b/web/cobrands/fixmystreet/header.js
@@ -13,7 +13,7 @@ var fixmystreet = fixmystreet || {};
     if (type == 'mobile') {
         E.className += ' mobile';
         if (fixmystreet.page == 'around') {
-            E.className += ' mobile-reporting-map only-map';
+            E.className += ' map-fullscreen only-map map-reporting';
         }
     }
 })(document);
diff --git a/web/cobrands/fixmystreet/images/compress.png b/web/cobrands/fixmystreet/images/compress.png
new file mode 100644
index 000000000..500673956
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/compress.png
diff --git a/web/cobrands/fixmystreet/images/compress.svg b/web/cobrands/fixmystreet/images/compress.svg
new file mode 100644
index 000000000..68efd6b31
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/compress.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="384" height="448" viewBox="0 0 384 448"><path fill="#fff" d="M192 240v112c0 8.75-7.25 16-16 16-4.25 0-8.25-1.75-11.25-4.75l-36-36-83 83c-1.5 1.5-3.75 2.5-5.75 2.5s-4.25-1-5.75-2.5l-28.5-28.5c-1.5-1.5-2.5-3.75-2.5-5.75s1-4.25 2.5-5.75l83-83-36-36c-3-3-4.75-7-4.75-11.25 0-8.75 7.25-16 16-16h112c8.75 0 16 7.25 16 16zM380.75 72c0 2-1 4.25-2.5 5.75l-83 83 36 36c3 3 4.75 7 4.75 11.25 0 8.75-7.25 16-16 16H208c-8.75 0-16-7.25-16-16V96c0-8.75 7.25-16 16-16 4.25 0 8.25 1.75 11.25 4.75l36 36 83-83c1.5-1.5 3.75-2.5 5.75-2.5s4.25 1 5.75 2.5l28.5 28.5c1.5 1.5 2.5 3.75 2.5 5.75z"/></svg>
diff --git a/web/cobrands/fixmystreet/images/compress@2x.png b/web/cobrands/fixmystreet/images/compress@2x.png
new file mode 100644
index 000000000..8acf34850
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/compress@2x.png
diff --git a/web/cobrands/fixmystreet/images/expand.png b/web/cobrands/fixmystreet/images/expand.png
new file mode 100644
index 000000000..c0c129fb7
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/expand.png
diff --git a/web/cobrands/fixmystreet/images/expand.svg b/web/cobrands/fixmystreet/images/expand.svg
new file mode 100644
index 000000000..1f063b4b7
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/expand.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="384" height="448" viewBox="0 0 384 448"><path fill="#fff" d="M188.75 264c0 2-1 4.25-2.5 5.75l-83 83 36 36c3 3 4.75 7 4.75 11.25 0 8.75-7.25 16-16 16H16c-8.75 0-16-7.25-16-16V288c0-8.75 7.25-16 16-16 4.25 0 8.25 1.75 11.25 4.75l36 36 83-83c1.5-1.5 3.75-2.5 5.75-2.5s4.25 1 5.75 2.5l28.5 28.5c1.5 1.5 2.5 3.75 2.5 5.75zM384 48v112c0 8.75-7.25 16-16 16-4.25 0-8.25-1.75-11.25-4.75l-36-36-83 83c-1.5 1.5-3.75 2.5-5.75 2.5s-4.25-1-5.75-2.5l-28.5-28.5c-1.5-1.5-2.5-3.75-2.5-5.75s1-4.25 2.5-5.75l83-83-36-36c-3-3-4.75-7-4.75-11.25 0-8.75 7.25-16 16-16h112c8.75 0 16 7.25 16 16z"/></svg>
diff --git a/web/cobrands/fixmystreet/images/expand@2x.png b/web/cobrands/fixmystreet/images/expand@2x.png
new file mode 100644
index 000000000..6abc9c1a4
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/expand@2x.png
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 179168aae..366939d4c 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -620,6 +620,7 @@ body.mappage .wrapper {
           background-image: url($image-sprite);
           background-position: center -2563px;
         }
+
         &.share {
           background-image: url('/cobrands/fixmystreet/images/share.png');
           background-position: center 25%;
@@ -1496,6 +1497,40 @@ html.js #map .noscript {
       background-image:url($image-sprite);
       background-position: flip(right, -341px) -3936px;
     }
+    &#toggle-fullscreen {
+      padding: 0.6em 1em 0.5em 1em;
+      &:after {
+        content: "";
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background-size: 16px 16px;
+        vertical-align: middle;
+        margin-#{$left}: 8px;
+      }
+      &.expand:after {
+        background-image: url(/cobrands/fixmystreet/images/expand.png);
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet/images/expand@2x.png);
+        }
+
+        @media all {
+            background-image: url(/cobrands/fixmystreet/images/expand.svg), none;
+        }
+      }
+      &.compress:after {
+        background-image: url(/cobrands/fixmystreet/images/compress.png);
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet/images/compress@2x.png);
+        }
+
+        @media all {
+            background-image: url(/cobrands/fixmystreet/images/compress.svg), none;
+        }
+      }
+    }
     &:hover {
       background-color:#000;
       text-decoration:none;
@@ -1559,14 +1594,14 @@ html.js #map .noscript {
   text-transform: uppercase;
   text-align: center;
   font-size: 0.875em;
-  .mobile-reporting-map & {
+  .map-fullscreen & {
     display: none;
   }
 }
 
 .mobile-map-banner {
   display: none;
-  .mobile-reporting-map & {
+  .map-fullscreen & {
     display: block;
   }
   text-transform: uppercase;
@@ -1656,7 +1691,7 @@ a:hover.rap-notes-trigger {
 // 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 {
+.map-fullscreen {
   #site-header {
     display: none;
   }
@@ -1672,10 +1707,6 @@ a:hover.rap-notes-trigger {
     z-index: 1; // stack above positioned elements later on the page (eg: .report-list-filters)
   }
 
-  #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
   }
@@ -1685,7 +1716,13 @@ a:hover.rap-notes-trigger {
   }
 }
 
-.mobile-reporting-map.only-map {
+.map-reporting {
+  #fms_pan_zoom {
+    top: 2.75em; // make space for the semi-transparent "Place pin on map" bar
+  }
+}
+
+.only-map {
   height: 100%;
   body {
     height: 100%;