Add buttons to resize maps on report pages

This improves usability on mobile devices, allowing users to pan around
the problem and see the area in more detail.

I've also changed the CSS around a bit, so we can use the
`map-fullscreen` class in other places.

11 files changed, 67 insertions, 12 deletions

diff --git a/templates/web/base/common_header_tags.html b/templates/web/base/common_header_tags.html
index 7c0ac4973..e64722f01 100644
--- a/templates/web/base/common_header_tags.html
+++ b/templates/web/base/common_header_tags.html
@@ -12,7 +12,7 @@
 <script nonce="[% csp_nonce %]">
     window.Modernizr=function(e,t,n){function r(e){p.cssText=e}function o(e,t){return typeof e===t}var a,i,c,l="2.8.3",s={},u=t.documentElement,d="modernizr",f=t.createElement(d),p=f.style,m=({}.toString,{}),h=[],y=h.slice,v=function(e,n,r,o){var a,i,c,l,s=t.createElement("div"),f=t.body,p=f||t.createElement("body");if(parseInt(r,10))for(;r--;)c=t.createElement("div"),c.id=o?o[r]:d+(r+1),s.appendChild(c);return a=["&#173;",'<style id="s',d,'">',e,"</style>"].join(""),s.id=d,(f?s:p).innerHTML+=a,p.appendChild(s),f||(p.style.background="",p.style.overflow="hidden",l=u.style.overflow,u.style.overflow="hidden",u.appendChild(p)),i=n(s,e),f?s.parentNode.removeChild(s):(p.parentNode.removeChild(p),u.style.overflow=l),!!i},g=function(t){var n=e.matchMedia||e.msMatchMedia;if(n)return n(t)&&n(t).matches||!1;var r;return v("@media "+t+" { #"+d+" { position: absolute; } }",function(t){r="absolute"==(e.getComputedStyle?getComputedStyle(t,null):t.currentStyle).position}),r},b={}.hasOwnProperty;c=o(b,"undefined")||o(b.call,"undefined")?function(e,t){return t in e&&o(e.constructor.prototype[t],"undefined")}:function(e,t){return b.call(e,t)};for(var E in m)c(m,E)&&(i=E.toLowerCase(),s[i]=m[E](),h.push((s[i]?"":"no-")+i));return r(""),f=a=null,s._version=l,s.mq=g,s.testStyles=v,s}(this,this.document);
     var fixmystreet=fixmystreet||{};
-    (function(b){var a=b.documentElement;a.className=a.className.replace(/\bno-js\b/,"js");var c=-1<a.className.indexOf("iel8"),c=Modernizr.mq("(min-width: 48em)")||c?"desktop":"mobile";b=b.getElementById("js-meta-data");fixmystreet.page=b.getAttribute("data-page");fixmystreet.cobrand=b.getAttribute("data-cobrand");"mobile"==c&&(a.className+=" mobile","around"==fixmystreet.page&&(a.className+=" mobile-reporting-map only-map"))})(document);
+    (function(b){var a=b.documentElement;a.className=a.className.replace(/\bno-js\b/,"js");var c=-1<a.className.indexOf("iel8"),c=Modernizr.mq("(min-width: 48em)")||c?"desktop":"mobile";b=b.getElementById("js-meta-data");fixmystreet.page=b.getAttribute("data-page");fixmystreet.cobrand=b.getAttribute("data-cobrand");"mobile"==c&&(a.className+=" mobile","around"==fixmystreet.page&&(a.className+=" map-fullscreen only-map map-reporting"))})(document);
 </script>
 
 [% IF admin %]
diff --git a/templates/web/base/js/translation_strings.html b/templates/web/base/js/translation_strings.html
index d6aca9ccb..c09609411 100644
--- a/templates/web/base/js/translation_strings.html
+++ b/templates/web/base/js/translation_strings.html
@@ -46,6 +46,9 @@
         map_map: '[% loc('Map') | replace("'", "\\'") %]',
         map_satellite: '[% loc('Satellite') | replace("'", "\\'") %]',
 
+        expand_map: '[% loc('Expand map') | replace("'", "\\'") %]',
+        collapse_map: '[% loc('Collapse map') | replace("'", "\\'") %]',
+
         permalink: '[% loc('Permalink') | replace("'", "\\'") %]',
 
         upload_max_files_exceeded: '[% loc ('Whoa there Testino! Three photos are enough.') | replace("'", "\\'") %]',
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%;