Standardise styling for #sub_map_links and #mob_sub_map_links

Fixes #2018 by making the #sub_map_links bigger.

But the greater win here is that we’re using fewer ID selectors in our
CSS, and both #sub_map_links and #mob_sub_map_links now share the same
styling – both of which are good for maintainability.

8 files changed, 129 insertions, 109 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 16c91b885..840d1edbe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,7 +13,7 @@
         - Enable conversion from EPSG:27700 when fetching over Open311 #2028
     - Front end improvements:
         - Improve questionnaire process. #1939 #1998
-        - Increase size of "sub map links" (hide pins, permalink, etc) #2003
+        - Increase size of "sub map links" (hide pins, permalink, etc) #2003 #2056
         - Edge-to-edge email layout on narrow screens #2010
         - Add default placeholder to report extra fields. #2027
         - Clicking the "Click map" instruction banner now begins a new report #2033
diff --git a/templates/web/base/around/display_location.html b/templates/web/base/around/display_location.html
index c97612beb..1ba40655a 100755
--- a/templates/web/base/around/display_location.html
+++ b/templates/web/base/around/display_location.html
@@ -60,7 +60,7 @@
         <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'>
+        <p class="sub-map-links" id='sub_map_links'>
             [% map_sub_links %]
             [% IF c.req.params.no_pins %]
                 <a id='hide_pins_link' rel='nofollow' href="[% c.uri_with( { no_pins => 0 } ) %]">[% loc('Show pins') %]</a>
diff --git a/templates/web/base/maps/google-ol.html b/templates/web/base/maps/google-ol.html
index 3cd21fab3..8e0690f9d 100644
--- a/templates/web/base/maps/google-ol.html
+++ b/templates/web/base/maps/google-ol.html
@@ -5,7 +5,7 @@
 [% map_html = BLOCK %]
 [% INCLUDE maps/openlayers.html %]
 [% UNLESS around_page %]
-<p id="sub_map_links">
+<p class="sub-map-links" id="sub_map_links">
      [% map_sub_links %]
 </p>
 [% END %]
diff --git a/templates/web/base/reports/body.html b/templates/web/base/reports/body.html
index 7931ae691..a630c2175 100755
--- a/templates/web/base/reports/body.html
+++ b/templates/web/base/reports/body.html
@@ -28,7 +28,7 @@
 [% map_html %]
 
 [% IF c.user && c.user.has_body_permission_to('planned_reports') %]
-  <p id="sub_map_links">
+  <p class="sub-map-links" id="sub_map_links">
     <a id="fms_shortlist_all" class="hidden">[% loc('Shortlist all visible') %]</a>
   </p>
 [% END %]
diff --git a/templates/web/zurich/maps/zurich.html b/templates/web/zurich/maps/zurich.html
index 4000e1e52..33c70bb0f 100644
--- a/templates/web/zurich/maps/zurich.html
+++ b/templates/web/zurich/maps/zurich.html
@@ -6,7 +6,7 @@
 [% INCLUDE maps/openlayers.html %]
 [% INCLUDE maps/wmts_config.html %]
 [% UNLESS around_page %]
-<p id="sub_map_links">
+<p class="sub-map-links" id="sub_map_links">
      [% map_sub_links %]
 </p>
 [% END %]
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 6a00ab488..b40e5ca01 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -682,7 +682,7 @@ $.extend(fixmystreet.set_up, {
     //add links container (if its not there)
     if (fixmystreet.cobrand != 'zurich') {
         if ($('#sub_map_links').length === 0) {
-            $('<p id="sub_map_links" />').insertAfter($('#map'));
+            $('<p class="sub-map-links" id="sub_map_links" />').insertAfter($('#map'));
         }
         if ($('#map_permalink').length === 0) {
             $('#sub_map_links').append('<a href="#" id="map_permalink">' + translation_strings.permalink + '</a>');
@@ -1032,7 +1032,7 @@ fixmystreet.display = {
             width = $map_box.width(),
             height = $map_box.height();
         $map_box.append(
-            '<p id="mob_sub_map_links">' +
+            '<p class="sub-map-links" id="mob_sub_map_links">' +
             '<a href="#" id="try_again">' +
                 translation_strings.try_again +
             '</a>' +
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index d3e96fb5f..bd5020cfc 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1468,121 +1468,138 @@ html.js #map .noscript {
   top: 44px;
 }
 
-//hide pins, show old reports etc
-#sub_map_links {
-  position: absolute;
-  #{$left}: 0;
-  #{$right}: 0;
-  bottom: 0;
-  background: #333;
-  background: rgba(0, 0, 0, 0.7);
-  margin: 0;
-  font-size: 1em;
-  line-height: 1em;
-
-  a {
+%sub-map-link-icon {
+    content: "";
     display: inline-block;
-    font-size: 0.8em;
-    color: #fff;
-    padding: 0.7em 1em;
+    width: 12px;
+    height: 12px;
+    margin-#{left}: 8px;
+    vertical-align: -0.1em;
+    background-size: 96px 12px;
+    @include svg-background-image('/cobrands/fixmystreet/images/map-tools');
+}
+
+// Generic component for presenting a semi-transparent black toolbar
+// at the bottom of the window on map pages. When the window is wide
+// enough, the toolbar docks to the right edge of the screen.
+// We use this for the "OK/Cancel" buttons after you tap a location
+// in the mobile reporting view, and for the "Hide pins / Get updates"
+// etc links on mobile and desktop map pages.
+.sub-map-links {
+    @include flex-container();
 
-    &:hover {
-      background-color: #000;
-      text-decoration: none;
+    position: absolute;
+    #{$left}: 0;
+    #{$right}: 0;
+    bottom: 0;
+    margin: 0;
+
+    a {
+        @include box-sizing(border-box);
+        @include flex(1 1 auto);
+
+        display: inline-block; // fallback for non-flexbox browsers
+        color: inherit;
+        padding: 0.5em;
+        font-size: 1em;
+        text-align: center;
+
+        &:hover,
+        &:focus {
+            background-color: #000;
+            text-decoration: none;
+        }
     }
 
-    &:after {
-      content: "";
-      display: inline-block;
-      width: 12px;
-      height: 12px;
-      margin-#{left}: 8px;
-      vertical-align: -0.1em;
-      background-size: 96px 12px;
-      @include svg-background-image('/cobrands/fixmystreet/images/map-tools');
+    #try_again,
+    #mob_ok {
+        width: 50%;
     }
-  }
 
-  .feed:after {
-    background-position: -12px 0;
-  }
+    .feed:after {
+        @extend %sub-map-link-icon;
+        background-position: -12px 0;
+    }
 
-  #hide_pins_link:after {
-    background-position: -24px 0;
-  }
+    #hide_pins_link:after {
+        @extend %sub-map-link-icon;
+        background-position: -24px 0;
+    }
 
-  #map_permalink:after {
-    background-position: -48px 0;
-  }
+    #map_permalink:after {
+        @extend %sub-map-link-icon;
+        background-position: -48px 0;
+    }
 
-  #fms_shortlist_all:after {
-    background-position: -60px 0;
-  }
+    #fms_shortlist_all:after {
+        @extend %sub-map-link-icon;
+        background-position: -60px 0;
+    }
 
-  #toggle-fullscreen:after {
-    background-position: -72px 0;
-  }
+    #toggle-fullscreen:after {
+        @extend %sub-map-link-icon;
+        background-position: -72px 0;
+    }
 
-  #toggle-fullscreen.compress:after {
-    background-position: -84px 0;
-  }
+    #toggle-fullscreen.compress:after {
+        @extend %sub-map-link-icon;
+        background-position: -84px 0;
+    }
 }
 
-// The "Try again / OK" buttons in mobile reporting UI
-#mob_sub_map_links {
-  position: absolute;
-  bottom:0;
-  display:table;
-  margin:0;
-  width:100%;
-  background:rgba(0, 0, 0, 0.7);
-  a {
-    color:#fff;
-    width:50%;
-    padding:0.5em 0;
-    font-size:1em;
-    display:table-cell;
-    text-align:center;
-    &:hover {
-      background:#000;
-      text-decoration:none;
-    }
-  }
-  &.map_complete {
-    height: 100%;
-    background: none;
+// Want some visual consistency between the top and bottom bars on mobile.
+.mobile-map-banner,
+.sub-map-links {
+    background-color: #333;
+    background-color: rgba(#000, 0.7);
+    color: #fff;
+}
+
+// On mobile, once #mob_ok has been pressed, the new report form is shown,
+// and .sub-map-links transforms into a completely different-looking set
+// of buttons for return back to the map.
+.sub-map-links.map_complete {
+    // Undo flex.
     display: block;
-    border-bottom: 4px solid #fff;
-    a#try_again {
-      position: absolute;
-      display: block;
-      left: 25%; // along with width of 50%, centres it
-      bottom: 0;
-      margin-bottom: 6em;
-      background: rgba(0, 0, 0, 0.8);
-      @include border-radius(0.5em);
-    }
-    a#mob_ok {
-      position: absolute;
-      display: block;
-      #{$right}: 1em;
-      bottom: 0;
-      width: 4em;
-      background: #fff;
-      color: #000;
 
-      &:before {
-        content: "";
+    // "Fade out" the map.
+    height: 100%;
+    background-color: rgba(#000, 0.3);
+
+    #try_again,
+    #mob_ok {
+        position: absolute;
         display: block;
-        width: 16px;
-        height: 16px;
-        margin: 0 auto 2px auto;
-        background-size: 112px 16px;
-        @include svg-background-image('/cobrands/fixmystreet/images/report-tools');
-        background-position: -32px 0;
-      }
+        bottom: 0;
+    }
+
+    // Turn #try_again into a black button, centred above the viewport.
+    #try_again {
+        left: 25%; // along with width of 50%, centres it
+        margin-bottom: 6em;
+        background: rgba(0, 0, 0, 0.8);
+        @include border-radius(0.5em);
+    }
+
+    // Turn #mob_ok into a white "tab" overlapping the map.
+    #mob_ok {
+        #{$right}: 1em;
+        width: 4em;
+        background: #fff;
+        color: #000;
+
+        // "Down" arrow.
+        &:before {
+            content: "";
+            display: block;
+            width: 16px;
+            height: 16px;
+            margin: 2px auto;
+            background-size: 112px 16px;
+            @include svg-background-image('/cobrands/fixmystreet/images/report-tools');
+            background-position: -32px 0;
+        }
     }
-  }
 }
 
 .big-hide-pins-link {
@@ -1618,8 +1635,6 @@ html.js #map .noscript {
   #{$left}: 0;
   #{$right}: 0;
   font-size:0.75em;
-  color: #fff;
-  background:rgba(0, 0, 0, 0.7);
   padding:0.75em 30px;
   a {
     @include button-reset(#333, #1a1a1a, #1a1a1a, #fff, #333, #1a1a1a, #1a1a1a, #fff);
@@ -2313,7 +2328,7 @@ a#geolocate_link.loading, .btn--geolocate.loading {
   .admin-nav,
   .olControlAttribution,
   .olControlPanZoom,
-  #sub_map_links,
+  .sub-map-links,
   #fms_pan_zoom,
   .screen-only,
   .olMapViewport,
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 3c5faf219..b70e646e3 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -613,9 +613,14 @@ body.authpage {
   #{$left}: auto !important;
 }
 
-#sub_map_links {
+// Dock to side of screen, rather than filling 100% width.
+.sub-map-links {
   #{$left}: auto;
   bottom: 2em;
+
+  a {
+    padding: 0.5em 1em;
+  }
 }
 
 // Show the extra button if there is vertical space.