From 1896c34b7f468e68a4d626c8ccd5fd3bf5293ed3 Mon Sep 17 00:00:00 2001
From: pezholio <pezholio@gmail.com>
Date: Wed, 1 Mar 2017 13:12:01 +0000
Subject: [PATCH] Add resize buttons to report page

---
 web/cobrands/fixmystreet/fixmystreet.js       |  18 ++++++
 web/cobrands/fixmystreet/images/compress.png  | Bin 0 -> 762 bytes
 web/cobrands/fixmystreet/images/compress.svg  |   1 +
 .../fixmystreet/images/compress@2x.png        | Bin 0 -> 1227 bytes
 web/cobrands/fixmystreet/images/expand.png    | Bin 0 -> 726 bytes
 web/cobrands/fixmystreet/images/expand.svg    |   1 +
 web/cobrands/fixmystreet/images/expand@2x.png | Bin 0 -> 1112 bytes
 web/cobrands/sass/_base.scss                  |  59 +++++++++++++++---
 8 files changed, 72 insertions(+), 7 deletions(-)
 create mode 100644 web/cobrands/fixmystreet/images/compress.png
 create mode 100644 web/cobrands/fixmystreet/images/compress.svg
 create mode 100644 web/cobrands/fixmystreet/images/compress@2x.png
 create mode 100644 web/cobrands/fixmystreet/images/expand.png
 create mode 100644 web/cobrands/fixmystreet/images/expand.svg
 create mode 100644 web/cobrands/fixmystreet/images/expand@2x.png

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 313d790c949..9031b2bfdc5 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/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() {
diff --git a/web/cobrands/fixmystreet/images/compress.png b/web/cobrands/fixmystreet/images/compress.png
new file mode 100644
index 0000000000000000000000000000000000000000..50067395693299bdceb075986d8620b8fb017afc
GIT binary patch
literal 762
zcmeAS@N?(olHy`uVBq!ia0vp^d_XL~!3HGNrubO_DaPU;cPEB*=VV?2Ih+L^k;M!Q
z+`=Ht$S`Y;1W-X_W=KRygs+cPa(=E}VoH8es$NBI0Z=sqgH44MkeQoWlBiITo0C^;
zRbi_HR$&EXgM{^!6u?SKvTc<jd;=7m^NUgyO!Z9k43zA+6ciL}ic-?7f?V97+JQV<
zrHqo20xNy}^73-Ma$~*xqI7*jOG`_A10#JSBVC{h-Qvo;lEez#ykcdDAuw}XQj3#|
zG7CyF^Yauy<|ZcPmzLNnDS<441Bg3IGSd(?<rPD{1@xdkNJigK&p;n;Hc+b#NYu)|
zC^HpkGst{9LmRM46fvkhHu@mTksJf@DOeQfRXZ*leR#0harqolj|2v?m8Xkih=yqI
z<h_1Ojv}p+0d*>q1e{Vgif){6?fD1W8jf7ur-2m=FE(!5*u=)g-7Ds1@b1Ul!gm{1
za~4e2fBt4}b$a=`cVSxAhpOYZrq-PObI|MZ#;%KeJqovP`W&1o`rx(!>(LvZJUy*q
z7u@<QnYWPD_(SEq^Ai)Z44jSTaKAk)ts%Dm(exJwvYICqOf+EGBNd+Tv57O?`E_R2
zIZOGUeb&!1c5kQ_ulE&B%}ahhvCQG}<nUr<la}Hi9oKcgOgeU4x#tm++ymo9*0u*l
z*EsgSf5?3=QQGE^tcY{-%Utb$7Gkfx7E11EYGu3JpKV$r5w~*g69$v4*50`CEyqlb
zTsiSb;Msx;-g$?3Up&oDsG4PP<ci4TWHAw8i;b=|zwYRS2XPtgXurH8@W%pg*WY>>
ie*5|U{olzY{fB}1ol$$HdsH_lL3+CSxvX<aXaWG~SQR1w

literal 0
HcmV?d00001

diff --git a/web/cobrands/fixmystreet/images/compress.svg b/web/cobrands/fixmystreet/images/compress.svg
new file mode 100644
index 00000000000..68efd6b31d3
--- /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 0000000000000000000000000000000000000000..8acf3485092520786dfbe553e20fcde5a0682028
GIT binary patch
literal 1227
zcmeAS@N?(olHy`uVBq!ia0vp^(m<@h!3HEBXEIv@DaPU;cPEB*=VV?2Ih+L^k;M!Q
z+`=Ht$S`Y;1W-X_W=KRygs+cPa(=E}VoH8es$NBI0Z=sqgH44MkeQoWlBiITo0C^;
zRbi_HR$&EXgM{^!6u?SKvTc<jd;=7m^NUgyO!Z9k43zA+6ciL}ic-?7f?V97+JQV<
zrHqo20xNy}^73-Ma$~*xqI7*jOG`_A10#JSBVC{h-Qvo;lEez#ykcdDAuw}XQj3#|
zG7CyF^Yauy<|ZcPmzLNnDS<441Bg3IGSd(?<rPD{1@xdkNJigK&p;n;Hc+b#NYu)|
zC^HpkGst{9LmRM46fvkhHu@mTksJf@DOeQfRXZ*leR#0harqolk7QtA=Js@P4DsOI
zI?Xma#8ISe^UWhJ9TF_|A69SjOiz`4qvPVLdqi#45B@*gE4OS5(GhX%ICw}eROE_$
zf^ywL1+%2(KW}}le0FZ<z1VB1-_<NXytDj%=FIPVGcAqF-QCJA-g^5@L*lk;XOq;#
zw2qL+C*ICzuZc1G!?R=7<BL&D0wxD$?3>*X!!cLkAKR9n@9MVBQ(UDN&LOM(-&Hhc
zalzZ@t;>!jnAeH<m`e5P)(H0qde^jUujBM<;=RCh>*XQdAKD9JKbkju<MKIH@W^>>
z*z3i-H>5fu@Alg<SF^R>Sd??~o`-`C@4e@9oL*bji7=I(KM<w%qt~AKC0Cui1?#oO
z*2n*JH*UH9ai7oTbrB&8TV_94(=ub@oNG-^(?5Ei*t<4VK`6xM(^{UNM=s|n7OiyL
zAG`U_+_g^j2W1M}gwLIbxZOEZRjK3YrZfBv>S}_U0=#;SHUuudc>7@S68<IWvy#`}
zT3PJ4&Vl=ph5x(TmB;i>C&$VCF7KFm<WJ!SJAw0ZLAm)4-M&3|y5f*+$PcC+%v(xM
zmxL^Sa>JxIEOO7@xrg8UXWql`dE%RgqMtYHKb_mD-KluN<wSOR<FVZj_+QK@l@mEP
z$&P2wtfXxhmzCc%d+=wfT+zfMXOi^OGVbu(EckomoZ}X+`R^a>KX&@^+Q4-I0&bP}
z(w-O@ymwoEc6~)Y``MY%K97Z(=COu~ZmJhDe#v0F!{wi4hw3(eQJa6OPuZw(tysL^
zO~h7}v?j-CFI@8Ww0$pFcIoWS+}%Muirp%DH`)!VEn?lS+f19eVc*f9rCC$hE~fA3
zR`{mfb;9<}w4ED67pmS6*)-=dTfO%lCXrqveeIq*AKG3dFZg-!v)|=E5>+B|K4uHw
z6f4$Cv)!S<!f(_$|D(V!hZ=*34)w-*<}Ev;l6dw^ZxdJgsQKUJ-0g#sKd0;7&HbTi
zz<uh_rt=4m9bjFME4J>hWPJ$Jp7Io<M=BEMx7xaxH+~b9na&Z<#cF8jUw__y`Niey
z(+i@6{)j%fdn0&-{z-%0jw#+Dz3mSrR_QD0`S0zO4|u76KQA$Dz4YNPpc2N@)z4*}
HQ$iB}&*%d%

literal 0
HcmV?d00001

diff --git a/web/cobrands/fixmystreet/images/expand.png b/web/cobrands/fixmystreet/images/expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0c129fb7ee720a18745a15bc911a5f89ef64731
GIT binary patch
literal 726
zcmeAS@N?(olHy`uVBq!ia0vp^d_XL~!3HGNrubO_DaPU;cPEB*=VV?2Ih+L^k;M!Q
z+`=Ht$S`Y;1W-X_W=KRygs+cPa(=E}VoH8es$NBI0Z=sqgH44MkeQoWlBiITo0C^;
zRbi_HR$&EXgM{^!6u?SKvTc<jd;=7m^NUgyO!Z9k43zA+6ciL}ic-?7f?V97+JQV<
zrHqo20xNy}^73-Ma$~*xqI7*jOG`_A10#JSBVC{h-Qvo;lEez#ykcdDAuw}XQj3#|
zG7CyF^Yauy<|ZcPmzLNnDS<441Bg3IGSd(?<rPD{1@xdkNJigK&p;n;Hc+b#NYu)|
zC^HpkGst{9LmRM46fvkhHu@mTksJf@DOeQfRXZ*leR#0harqolj|2v?n5T<lh=yqI
zq=Q+990b}ncP98bEwB~&qVVEi_w)ygzZpgee7#n^@p+T`-pUV*Il7bT{u?#+p6p`&
zf9}k=KgKg}s+^Qvx$4x>Ll+sAoUtr-J+H9-faIS>JBy~gmAe-fe_)fkbaqp;QK+q>
z_=A))@n2NERAxwKHvCOpB7ZqlePTk^lJqzJ-uD)(KM1YsJ`u}R<rbsG`IF6g_vsDZ
zwflMY$KFg-{lgm3JaOWmGl_j%SGpw<^A9Nb99W-TcJG-+v-iX=k&~8|zD)c*^RUw^
zm5T?03nnyYDEhnQOxAf|Z22lQe<QnC_L-X7ADtG-g)VZ}>$wu=a^lO&vyWxX&5ORo
xU#qTd5MOZL<DX2=LB5QA+7&S`q~0#m`d`KCSowd=GX+p$^K|udS?83{1OQC@3djHe

literal 0
HcmV?d00001

diff --git a/web/cobrands/fixmystreet/images/expand.svg b/web/cobrands/fixmystreet/images/expand.svg
new file mode 100644
index 00000000000..1f063b4b782
--- /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 0000000000000000000000000000000000000000..6abc9c1a49abb3c41c8cf7ce27af0d4db972355a
GIT binary patch
literal 1112
zcmeAS@N?(olHy`uVBq!ia0vp^(m<@h!3HEBXEIv@DaPU;cPEB*=VV?2Ih+L^k;M!Q
z+`=Ht$S`Y;1W-X_W=KRygs+cPa(=E}VoH8es$NBI0Z=sqgH44MkeQoWlBiITo0C^;
zRbi_HR$&EXgM{^!6u?SKvTc<jd;=7m^NUgyO!Z9k43zA+6ciL}ic-?7f?V97+JQV<
zrHqo20xNy}^73-Ma$~*xqI7*jOG`_A10#JSBVC{h-Qvo;lEez#ykcdDAuw}XQj3#|
zG7CyF^Yauy<|ZcPmzLNnDS<441Bg3IGSd(?<rPD{1@xdkNJigK&p;n;Hc+b#NYu)|
zC^HpkGst{9LmRM46fvkhHu@mTksJf@DOeQfRXZ*leR#0harqolk7QtAn&Ii<7~;XZ
zcKTUAQAdH+#%zz2Mxh!ep?MBMhbHaiKajm6U3p!Pwy<Zx`yeqD6^TXFozlYf+YT^q
zxRfCBp6C9{Xwwq&<YmwKre0b5YQ9zas@=QN-@Q5Gu<~`4Scm17cMX^Jygb^`#ked@
zSg>iO`vzO*>lg2@*wnLh(Z&Y3V{`Y`cra;{x%Q}D>Q<P~;}{|Nrf=fkga2ID8-?Dt
z=zo8eZNW{pKjJG=VnVMT@vh%G=P-*+?j75O3GtHqjCQO3O!GTzvnb$S<DZTPyvzdY
zrmcN#apMaUb7T6Jmj8!?0>hF&r_MIjZOEC=<l*z>?txGRzmlw4CGJ~&S1x*Q5Vk$=
zKW#x=XVyMpmT#pd*Y-PbTvHUg!1PO%DY(*`&*Ys`wf>hPl|AcE2t9f3RsH3r<AzgS
zMQ<E_e4e=9xBB#L*J%v<O~XFUeIOM7iScXU`F)n{t}L@yI?i44NZ54kyTpHWEz2T<
zKL&DJ4_lu3U2C(^$LrjprU3m3zJIm{T7OYzSlTOb#KBy2b)Ct1g~}CSe5{cLoA&Xw
zT{YU{uDbt%sdCP=sryv6P1Sh+MPbeR?r$%YwLUrpbgq|5EH^XcY>a-f?fb*ys?|Qx
zLh=z)|4f?r^>l}WeNX<J3k`fnnlkR3j%oj~uUEZV?D)Uy>Ji_kHNTa*U{^b7#tZGY
zuF~_@y<*7F^IE8!E-b7UQqOU>o}XPXazi3}(Eg37e_2;Z*IER+sRgC36kj-b-UEI9
za~=#Hal2OO<?h+f=U2fU@36vF>f1r4hCJrf$sM&DD$4Xt{SPgvTWZI-`zNczf>pb=
zo!8f&@VwlW&41z=iNt+h%>C~@%+#N^$p3=33HzmcF9qtI&Ig{nTWje1;a2_0`U~?~
orzah}+_mJAeCN008n5@VE!}?qM$S5WQ0c(n>FVdQ&MBb@0ON_lkN^Mx

literal 0
HcmV?d00001

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 179168aae48..76f9c81aeab 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,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%;