Second, more prominent Hide Pins link

An experiment towards fixing #525.

9 files changed, 68 insertions, 7 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 187322f61..ad059b216 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
         - Individual cobrands can disable social login #1890
         - Improve performance of various pages, especially front. #1903
         - Don't show geolocation link on non-HTTPS pages.
+        - More prominent "Hide pins" link on map pages, to aid reporting in busy areas. #525
     - Bugfixes
         - Shortlist menu item always remains a link #1855
         - Fix encoded entities in RSS output. #1859
diff --git a/templates/web/base/around/display_location.html b/templates/web/base/around/display_location.html
index 5d83235b1..029435cf2 100755
--- a/templates/web/base/around/display_location.html
+++ b/templates/web/base/around/display_location.html
@@ -54,6 +54,12 @@
 
     [% map_html %]
 
+    [% IF c.req.params.no_pins %]
+        <a class="big-hide-pins-link" rel='nofollow' href="[% c.uri_with( { no_pins => 0 } ) %]">[% loc('Show pins') %]</a>
+    [% ELSE %]
+        <a class="big-hide-pins-link" rel='nofollow' href="[% c.uri_with( { no_pins => 1 } ) %]">[% loc('Hide pins') %]</a>
+    [% END %]
+
         <p id='sub_map_links'>
             [% map_sub_links %]
             [% IF c.req.params.no_pins %]
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index e5eba676c..a2d39d0dd 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -931,6 +931,7 @@ fixmystreet.display = {
     }
 
     $('#sub_map_links').hide();
+    $('.big-hide-pins-link').hide();
     if ($('html').hasClass('mobile')) {
         var $map_box = $('#map_box'),
             width = $map_box.width(),
@@ -1010,6 +1011,8 @@ fixmystreet.display = {
                 fixmystreet.map.updateSize();
             }
 
+            $('.big-hide-pins-link').hide();
+
             // If this is the first individual report we've loaded, remove the
             // "all reports" sub_map_links but store them in a global variable
             // so we can reinsert them when the user returns to the all reports
@@ -1089,6 +1092,7 @@ fixmystreet.display = {
             $('#sub_map_links').replaceWith(fixmystreet.original.sub_map_links);
             delete fixmystreet.original.sub_map_links;
         }
+        $('.big-hide-pins-link').show();
         fixmystreet.set_up.map_controls();
 
         window.selected_problem_id = undefined;
diff --git a/web/cobrands/fixmystreet/images/hide-pins-link.png b/web/cobrands/fixmystreet/images/hide-pins-link.png
new file mode 100644
index 000000000..0171eef35
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/hide-pins-link.png
diff --git a/web/cobrands/fixmystreet/images/hide-pins-link.svg b/web/cobrands/fixmystreet/images/hide-pins-link.svg
new file mode 100644
index 000000000..5043fafa5
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/hide-pins-link.svg
@@ -0,0 +1 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><g fill="#FFF" fill-rule="evenodd"><path d="M25.4 21.1l-3.7-3.6A4 4 0 0 0 18 12a4 4 0 0 0-1.5.3L13 8.6a9 9 0 0 1 12.5 12.5zm-4.5 4l-3 6-3.4-6.8a9 9 0 0 1-5.2-10.7L21 25.2zM7.4 6L30 28.6 28.6 30 6 7.4z"/></g></svg>
\ No newline at end of file
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index a65bd7ca0..2c4ce1e33 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1576,6 +1576,10 @@ html.js #map .noscript {
   }
 }
 
+.big-hide-pins-link {
+    display: none; // will become `block` in layout.scss
+}
+
 .big-green-banner {
   position: relative;
   top: -1.75em;
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 65934f3b9..1d1ecf205 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -585,7 +585,8 @@ body.authpage {
 #fms_pan_zoom_panleft,
 #fms_pan_zoom_panright,
 #fms_pan_zoom_zoomin,
-#fms_pan_zoom_zoomout {
+#fms_pan_zoom_zoomout,
+.big-hide-pins-link {
   opacity: 0.85;
   &:hover {
     opacity: 1;
@@ -614,6 +615,44 @@ body.authpage {
   bottom: 2em;
 }
 
+// Show the extra button if there is vertical space.
+@media (min-height: 450px) {
+  .big-hide-pins-link {
+    $fms_pan_zoom_top: 8px;
+    $fms_pan_zoom_right: 8px;
+    $fms_pan_zoom_zoomout_top: 174px;
+    $fms_pan_zoom_zoomout_right: 30px;
+    $fms_pan_zoom_zoomout_height: 44px;
+    $gap: 22px;
+
+    display: block;
+    position: absolute;
+    top: $fms_pan_zoom_top + $fms_pan_zoom_zoomout_top + $fms_pan_zoom_zoomout_height + $gap;
+    right: $fms_pan_zoom_right + $fms_pan_zoom_zoomout_right;
+    border-radius: 5px;
+    color: #fff;
+    width: 36px;
+    height: 0;
+    padding-top: 36px;
+    overflow: hidden;
+
+    background: #222;
+    background-size: 36px 36px;
+    background-repeat: no-repeat;
+    background-position: 100% 0;
+    @include svg-background-image('/cobrands/fixmystreet/images/hide-pins-link');
+
+    &:hover {
+      text-decoration: none;
+      color: #fff;
+      width: auto;
+      height: auto;
+      padding: 6px 40px 6px 10px;
+      overflow: visible;
+    }
+  }
+}
+
 #map_links_toggle {
   display: block;
   cursor: pointer;
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index d7e692a13..31f5f49d8 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -614,16 +614,19 @@ $.extend(fixmystreet.utils, {
             zoomToBounds( fixmystreet.markers.getDataExtent() );
         }
 
-        $('#hide_pins_link').click(function(e) {
+        $('#hide_pins_link, .big-hide-pins-link').click(function(e) {
             e.preventDefault();
             if (this.innerHTML == translation_strings.show_pins) {
                 fixmystreet.markers.setVisibility(true);
                 fixmystreet.select_feature.activate();
-                this.innerHTML = translation_strings.hide_pins;
+                $('#hide_pins_link, .big-hide-pins-link').html(translation_strings.hide_pins);
             } else if (this.innerHTML == translation_strings.hide_pins) {
                 fixmystreet.markers.setVisibility(false);
                 fixmystreet.select_feature.deactivate();
-                this.innerHTML = translation_strings.show_pins;
+                $('#hide_pins_link, .big-hide-pins-link').html(translation_strings.show_pins);
+            }
+            if (typeof ga !== 'undefined') {
+                ga('send', 'event', 'toggle-pins-on-map', 'click');
             }
         });
     }
diff --git a/web/js/map-google.js b/web/js/map-google.js
index 803ac4f3e..75a1b25a1 100644
--- a/web/js/map-google.js
+++ b/web/js/map-google.js
@@ -206,19 +206,22 @@ fixmystreet.maps = {};
         }
         */
 
-        $('#hide_pins_link').click(function(e) {
+        $('#hide_pins_link, .big-hide-pins-link').click(function(e) {
             var i, m;
             e.preventDefault();
             if (this.innerHTML == translation_strings.show_pins) {
                 for (m=0; m<fixmystreet.markers.length; m++) {
                     fixmystreet.markers[m].setMap(fixmystreet.map);
                 }
-                this.innerHTML = translation_strings.hide_pins;
+                $('#hide_pins_link, .big-hide-pins-link').html(translation_strings.hide_pins);
             } else if (this.innerHTML == translation_strings.hide_pins) {
                 for (m=0; m<fixmystreet.markers.length; m++) {
                     fixmystreet.markers[m].setMap(null);
                 }
-                this.innerHTML = translation_strings.show_pins;
+                $('#hide_pins_link, .big-hide-pins-link').html(translation_strings.show_pins);
+            }
+            if (typeof ga !== 'undefined') {
+                ga('send', 'event', 'toggle-pins-on-map', 'click');
             }
         });
     }