Add resize buttons to report page

web/cobrands/fixmystreet/fixmystreet.js

@@ -869,6 +869,10 @@ $.extend(fixmystreet.set_up, {
         }
         $('#key-tools li:empty').remove();
         $('#report-updates-data').insertAfter($('#map_box'));
+        if (fixmystreet.page === 'report') {
+            $('#sub_map_links').append('<a href="#" id="show-fullscreen" class="expand">Show Fullscreen</span>');
+            $('#sub_map_links').append('<a href="#" id="hide-fullscreen" class="compress hidden">Hide Fullscreen</span>');
+        }
     }
 
     // Show/hide depending on whether it has any children to show
@@ -897,6 +901,20 @@ $.extend(fixmystreet.set_up, {
             })
             .prependTo('#sub_map_links');
     }
+
+    $('#show-fullscreen').click(function() {
+      $('html').addClass('report-fullscreen');
+      $(this).addClass('hidden');
+      $('#hide-fullscreen').removeClass('hidden');
+      fixmystreet.map.updateSize();
+    });
+
+    $('#hide-fullscreen').click(function() {
+      $('html').removeClass('report-fullscreen');
+      $(this).addClass('hidden');
+      $('#show-fullscreen').removeClass('hidden');
+      fixmystreet.map.updateSize();
+    });
   },
 
   map_sidebar_key_tools: function() {

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,48 @@ html.js #map .noscript {
       background-image:url($image-sprite);
       background-position: flip(right, -341px) -3936px;
     }
+    &.expand {
+      padding: 0.6em 1em 0.5em 1em;
+      &:after {
+        content: "";
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        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;
+        }
+        background-size: 16px 16px;
+        vertical-align: middle;
+        margin-left: 8px;
+      }
+    }
+    &.compress {
+      padding: 0.6em 1em 0.5em 1em;
+      &:after {
+        content: "";
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        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;
+        }
+        background-size: 16px 16px;
+        vertical-align: middle;
+        margin-left: 8px;
+      }
+    }
     &:hover {
       background-color:#000;
       text-decoration:none;
@@ -1559,7 +1602,7 @@ html.js #map .noscript {
   text-transform: uppercase;
   text-align: center;
   font-size: 0.875em;
-  .mobile-reporting-map & {
+  .mobile-reporting-map &, .report-fullscreen & {
     display: none;
   }
 }
@@ -1656,7 +1699,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 {
+.mobile-reporting-map, .report-fullscreen {
   #site-header {
     display: none;
   }
@@ -1672,10 +1715,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 +1724,13 @@ a:hover.rap-notes-trigger {
   }
 }
 
-.mobile-reporting-map.only-map {
+.mobile-reporting-map {
+  #fms_pan_zoom {
+    top: 2.75em; // make space for the semi-transparent "Place pin on map" bar
+  }
+}
+
+.mobile-reporting-map.only-map, .report-fullscreen {
   height: 100%;
   body {
     height: 100%;