Merge tag 'v2.3' into fiksgatami-dev

1 files changed, 147 insertions, 94 deletions

diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index a0c27863e..1d1ecf205 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -1,6 +1,5 @@
 @import "_mixins";
 
-$image-sprite: '../fixmystreet/images/sprite.png' !default;
 $layout_front_stats_color: $primary !default;
 $mappage-header-height: 4em !default; // eg: might want this to equal outer height of #site-header on normal pages
 $mappage-sidebar-width: 29em;
@@ -586,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;
@@ -613,31 +613,95 @@ body.authpage {
 #sub_map_links {
   #{$left}: auto;
   bottom: 2em;
-  #map_links_toggle {
-    display:block;
-    cursor: pointer;
-    position:absolute;
-    #{$left}: -0.97em; /* 1em leaves a tiny gap, font issue */
-    width: 1em;
-    height:100%;
-    background:#000 inline-image("../fixmystreet/images/triangle-grey-#{$right}.svg") 50% 50% no-repeat;
-    @include border-radius(flip(0.25em 0 0 0.25em, 0 0.25em 0.25em 0));
+}
+
+// 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 {
-      #{$left}: -1.5em;
-      //use border so we don't have to redefine the background-position
-      border-#{$right}: 0.5em solid #000;
-    }
-    &.closed {
-      background-image: inline-image("../fixmystreet/images/triangle-grey-#{$left}.svg");
+      text-decoration: none;
+      color: #fff;
+      width: auto;
+      height: auto;
+      padding: 6px 40px 6px 10px;
+      overflow: visible;
     }
   }
 }
-.iel8 #sub_map_links #map_links_toggle {
-    height: 1.75em;
-    background: #000 url('../fixmystreet/images/ie_sub_map_links_sprite.gif') center -143px no-repeat;
-    &.closed {
-      background-position: center -183px;
+
+#map_links_toggle {
+  display: block;
+  cursor: pointer;
+  position: absolute;
+  #{$left}: -1em;
+  width: 1em;
+  height: 100%;
+  border-radius: flip(0.25em 0 0 0.25em, 0 0.25em 0.25em 0);
+  background-color: #333;
+
+  &:hover {
+    #{$left}: -1.2em;
+    width: 1.2em;
+    background-color: #000;
+  }
+
+  &:after {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    width: 6px;
+    height: 12px;
+    margin-#{$left}: ((16px - 6px) / 2); // horizontally centre in 16px wide parent
+    background-size: 96px 12px;
+    @include svg-background-image('/cobrands/fixmystreet/images/map-tools');
+  }
+
+  // Expanded arrow points towards edge of window.
+  // Closed arrow points away from edge of window.
+  @if ($right == 'right') {
+
+    &:after {
+      background-position: -6px 0;
+    }
+
+    &.closed:after {
+      background-position: 0 0;
+    }
+
+  } @else {
+
+    &:after {
+      background-position: 0 0;
+    }
+
+    &.closed:after {
+      background-position: -6px 0;
     }
+  }
 }
 
 
@@ -652,58 +716,6 @@ body.authpage {
   overflow: hidden;
   padding-top: 2em;
 
-  ul#key-tools {
-    border-top: 0.25em solid $primary;
-    margin: 0;
-    @include box-shadow(0 0 1em 1em #fff);
-    li {
-      border:none;
-      a, input[type=submit] {
-        font-size: 0.75em;
-        line-height: 18px; // match `body`
-        color:#666;
-        padding: flip(0.5em 1.5em 0.5em 0, 0.5em 0 0.5em 1.5em);
-        text-transform:none;
-        &.abuse {
-          background-image:url($image-sprite);
-          background-position: flip(right, -337px) -2935px;
-        }
-        &.feed {
-          background-image:url($image-sprite);
-          background-position: flip(right, -337px) -3074px;
-        }
-        &.share {
-          min-width: 5em;
-          background-image: url(/cobrands/fixmystreet/images/share.png);
-          background-position: flip(80%, 20%) 50%;
-        }
-        &.chevron {
-          border-#{$right}: solid 1em transparent;
-          padding-#{$right}: 0.5em;
-          background-position: $right 50%;
-          background-size: 12px 15px;
-        }
-        &.chevron.hover {
-          // Reset things that changed
-          border-#{$right}: none;
-          padding-#{$right}: 1.5em;
-          background-size: auto auto;
-        }
-        &.hover {
-          background-image: url($image-sprite);
-          background-position: flip(right, -337px) -1876px;
-        }
-      }
-    }
-    &.singleton {
-      li {
-        text-align: $right;
-        a {
-          padding-#{$right}: 3em;
-        }
-      }
-    }
-  }
   &.static {
     padding: 0 0 1em;
     position: static;
@@ -711,6 +723,29 @@ body.authpage {
   }
 }
 
+#key-tools {
+  border-top: 0.25em solid $primary;
+  margin: 0;
+  @include box-shadow(0 0 1em 1em #fff);
+
+  li {
+    border-#{$right}: none; // undo border-right/left from _base.scss
+
+    // Cancel centre alignment, if the *only child* in list.
+    &:first-child:last-child {
+      text-align: $right;
+    }
+  }
+
+  a, button {
+    font-size: 0.75em;
+    line-height: 18px; // match `body`
+    color: #666;
+    padding: 0.5em;
+    text-transform: none; // undo uppercase from _base.scss
+  }
+}
+
 // If JS is disabled, these are still CSS positioned, so don't want behind shining through.
 #report-share, #report-updates-data {
     background-color: #fff;
@@ -720,6 +755,14 @@ body.authpage {
     margin-bottom: 0;
 }
 
+#loading-indicator {
+  height: 64px;
+  width: 64px;
+  background-color: rgba(0, 0, 0, 0.7);
+  // Reset the base left, as zoom buttons now elsewhere
+  left: 0.5em;
+}
+
 .big-green-banner {
   top: auto;
   margin: (-1em/1.375) (-1em/1.375) 0 (-1em/1.375);
@@ -750,23 +793,24 @@ body.authpage {
       border-#{$left}: 0.75em solid transparent;
       border-bottom: 0.75em solid #888;
     }
-    &#fixed {
-      padding-top:5em;
-      background-image:url($image-sprite);
-      background-position:-324px -326px;
-      background-repeat:no-repeat;
-      &:before {
-        border-bottom: 0.75em solid $col_fixed_label_dark;
-      }
+  }
+
+  #fixed,
+  #closed {
+    padding-top: 48px;
+    padding-top: calc(1.5em + 32px);
+    background-image: url('/i/pin-flat-white-small.png');
+    background-size: 24px 32px;
+    background-position: 50% 1em;
+    background-repeat:no-repeat;
+    &:before {
+      border-bottom: 0.75em solid $col_fixed_label_dark;
     }
-    &#closed {
-      padding-top:5em;
-      background-image:url($image-sprite);
-      background-position:-318px -326px;
-      background-repeat:no-repeat;
-      &:before {
-        border-bottom: 0.75em solid #666;
-      }
+  }
+
+  #closed {
+    &:before {
+      border-bottom-color: #666;
     }
   }
 }
@@ -904,6 +948,9 @@ textarea.form-error {
       background:none;
     }
   }
+  a#geolocate_link.loading {
+      border-right: none;
+  }
 }
 .ie7 #front-main {
   #postcodeForm {
@@ -923,10 +970,16 @@ textarea.form-error {
     color: #222;
     border-top:0.25em solid $primary;
     padding-top:1em;
-    div {
-      big {
-        color: $layout_front_stats_color;
-        font-size: 3.2308em;
+    big {
+      color: $layout_front_stats_color;
+      font-size: 2em;
+      @media (min-width: 54em) {
+        // 54em roughly halfway between 48em and 62em
+        font-size: 2.5em;
+      }
+      @media (min-width: 62em) {
+        // container max-width 60em + 2em side padding
+        font-size: 3em;
       }
     }
   }