1 files changed, 352 insertions, 21 deletions
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 7fb0c797f..54954023b 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -530,24 +530,24 @@ ul.error {
   a, span {
     display: block;
     padding: 0.5em 1em;
-    background: #f6f6f6;
+    background-color: #f6f6f6;
     color: #333;
     font-size: 1.25em;
     border-bottom: 0.25em solid #333;
   }
   a:hover, span.hover {
-    background: #333;
+    background-color: #333;
     color: #fff;
     text-decoration: none;
   }
   span {
-    background: #ccc;
+    background-color: #ccc;
   }
 }
 .nav-menu--mysoc {
   a {
     color: $primary_text;
-    background: $primary;
+    background-color: $primary;
   }
 }
 #mysoc-logo {
@@ -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%;
@@ -767,7 +768,9 @@ input.final-submit {
 }
 
 .btn--navigate,
-.btn--geolocate {
+.btn--geolocate,
+.btn--shortlist,
+.btn--shortlisted {
     &:before {
         content: "";
         display: inline-block;
@@ -779,7 +782,7 @@ input.final-submit {
         vertical-align: -0.1em; // vertically centre icon in button
 
         @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-            background-image: url(/cobrands/fixmystreet/images/navigate@2.png);
+            background-image: url(/cobrands/fixmystreet/images/navigate@2x.png);
         }
 
         @media all {
@@ -793,7 +796,7 @@ input.final-submit {
         background-image: url(/cobrands/fixmystreet/images/crosshairs.png);
 
         @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-            background-image: url(/cobrands/fixmystreet/images/crosshairs@2.png);
+            background-image: url(/cobrands/fixmystreet/images/crosshairs@2x.png);
         }
 
         @media all {
@@ -802,6 +805,34 @@ input.final-submit {
     }
 }
 
+.btn--shortlist {
+    &:before {
+        background-image: url(/cobrands/fixmystreet/images/icon-shortlist-mini.png);
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet/images/icon-shortlist-mini@2x.png);
+        }
+
+        @media all {
+            background-image: url(/cobrands/fixmystreet/images/icon-shortlist-mini.svg), none;
+        }
+    }
+}
+
+.btn--shortlisted {
+    &:before {
+        background-image: url(/cobrands/fixmystreet/images/icon-shortlisted-mini.png);
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet/images/icon-shortlisted-mini@2x.png);
+        }
+
+        @media all {
+            background-image: url(/cobrands/fixmystreet/images/icon-shortlisted-mini.svg), none;
+        }
+    }
+}
+
 .btn--block {
     display: block;
     text-align: center;
@@ -925,6 +956,14 @@ input.final-submit {
   margin: 0.25em 0 0;
   padding: 0.5em 1em;
   display: block;
+
+  @media print {
+    background-color: transparent !important;
+    margin: 0 !important;
+    padding: 1em 0 !important;
+    border-top: 1px solid #ccc;
+    page-break-inside: avoid;
+  }
 }
 
 .item-list__update-wrap {
@@ -954,36 +993,252 @@ input.final-submit {
 
 .item-list--reports__item {
   @extend %item-list__item--link;
+
   a {
     @include clearfix;
     padding: flip(0 0 0 1em, 0 1em 0 0);
+
+    @media print {
+      padding: 0;
+    }
   }
+
   .img {
     width: 90px;
     float: $right;
     height: auto;
     margin-#{$left}: 1em;
   }
+
   small {
     color: #666;
     display: block;
     padding: 0.25em 0;
   }
 }
+
+.item-list__item__metadata {
+  display: none;
+
+  @media print {
+    display: block;
+    @include flex-container();
+    @include flex-wrap(wrap);
+  }
+
+  & > * {
+    margin-top: 0.5em;
+    width: 33%;
+    @include flex(0 0 auto);
+  }
+
+  h4 {
+    margin: 0;
+    font-size: 0.75em;
+    font-weight: bold;
+  }
+
+  p {
+    margin-bottom: 0;
+    min-height: 1.4em;
+  }
+}
+
+// A version where the normal padding of the list-item is tweaked to
+// make room for an icon or a button next to the report details.
+.item-list__item--indented {
+  position: relative;
+  margin: 0; // reset 0.25em margin-top on default item-list__item
+  padding: 0;
+  border-top: 1px solid #e5e5e5; // can't apply border to `a` because of border-left
+
+  a {
+    display: block;
+    padding: 1em;
+    padding-#{$left}: 2.5em; // make space for background image
+    border-#{$left}: solid 1em transparent; // inset background image 1em from the left
+    background: transparent;
+  }
+
+  // Trigger hover style even when hovering over sibling item-action-button
+  &:hover a {
+    background-color: $itemlist_item_background_hover;
+  }
+
+  h3 {
+    color: inherit; // Some cobrands might want to override with $primary for a more colourful list
+    margin: 0 0 0.2em 0;
+    padding-top: 0; // override .item-list__heading
+    line-height: 1.3em; // override .item-list__heading
+  }
+
+  p {
+    margin: 0;
+    font-size: 0.8em;
+    color: #777;
+  }
+}
+
+// Add this to your .item-list__item--indented element if you
+// need to display both an action button *and* up/down arrows
+.item-list__item--act-and-sort {
+    a {
+        padding-#{$left}: 4.5em; // make space for the extra buttons
+    }
+
+    .item-list__item__shortlist-up,
+    .item-list__item__shortlist-down {
+        width: 36px; // down from 48px
+        left: 3.5em; // up from 1em
+    }
+}
+
+%list-item-action-button {
+  position: absolute;
+  left: 1em; // match the padding on the `a` element
+  top: 50%;
+  margin-top: -24px; // vertically center
+  margin-left: -12px; // horizontally center
+
+  display: block;
+  width: 48px;
+  font-size: 1em;
+
+  padding: 0;
+  border: none;
+  background: transparent;
+
+  overflow: hidden; // hide button text
+  height: 0;
+  padding-top: 48px;
+
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 24px 24px;
+}
+
+.item-list__item__shortlist-add {
+  @extend %list-item-action-button;
+  @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-inactive');
+
+  &:hover,
+  &:focus {
+    @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-inactive-hover');
+  }
+}
+
+.item-list__item__shortlist-remove {
+  @extend %list-item-action-button;
+  @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-active');
+
+  &:hover,
+  &:focus {
+    @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-active-hover');
+  }
+}
+
+.item-list__item__shortlist-take {
+  @extend %list-item-action-button;
+  @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-taken');
+
+  &:hover,
+  &:focus {
+    @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-taken-hover');
+  }
+}
+
+.item-list__item__shortlist-up {
+  @extend %list-item-action-button;
+
+  padding-top: 24px; // half the normal height, because shorter icon
+  background-size: 24px 14px;
+
+  @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-up');
+
+  &:hover,
+  &:focus {
+    @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-up-hover');
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+    cursor: default;
+
+    @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-up');
+  }
+}
+
+.item-list__item__shortlist-down {
+  @extend %list-item-action-button;
+
+  margin-top: 0; // this is the "lower" arrow, so no need to offset vertical position
+  padding-top: 24px; // half the normal height, because shorter icon
+  background-size: 24px 14px;
+
+  @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-down');
+
+  &:hover,
+  &:focus {
+    @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-down-hover');
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+    cursor: default;
+
+    @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-down');
+  }
+}
+
 .item-list__heading {
   font-size: 1em;
   font-weight: normal;
   line-height: 1.5;
   padding-top: 0.25em;
   margin: 0;
+
+  @media print {
+    font-weight: bold;
+  }
 }
 
-.item-list__item--empty p {
-  margin: 0;
+.item-list__description {
+  display: none;
+
+  @media print {
+    display: block;
+  }
+}
+
+.item-list__item__state {
+  font-size: 0.9em;
+  font-style: normal;
+  font-weight: bold;
+  padding: 0.2em 0.5em;
+  vertical-align: -0.1em;
+  background: #888;
+  color: #fff;
+  border-radius: 0.3em;
+  margin-right: 0.1em;
+}
+
+.item-list__item--empty {
+  background: none;
+  color: #777;
+
+  p {
+    margin: 0;
+    padding: 1em;
+    text-align: center;
+  }
 }
 
 .item-list--front-page {
   border-bottom: none;
+
+  .item-list__item {
+    background-color: transparent;
+  }
 }
 
 .problem-header .update-img,
@@ -1242,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;
@@ -1296,6 +1585,24 @@ html.js #map .noscript {
   }
 }
 
+// Loading indicator
+
+#loading-indicator {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  opacity: 0.4;
+  text-align: center;
+
+  img {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
 .big-green-banner {
   position: relative;
   top: -1.75em;
@@ -1305,14 +1612,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;
@@ -1402,7 +1709,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;
   }
@@ -1418,10 +1725,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
   }
@@ -1431,7 +1734,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%;
@@ -1882,6 +2191,7 @@ table.nicetable {
     text-align: center;
     border-right-width: 0; // avoid double border between items
     float: left; // float fallback for browsers that don't support flexbox
+    position: relative; // Make sure this is shown on legacy flexbox webkit
     @include flex(1 0 auto, 1);
   }
 
@@ -1987,15 +2297,36 @@ table.nicetable {
   #sub_map_links,
   #fms_pan_zoom,
   .screen-only,
-  .olMapViewport {
+  .olMapViewport,
+  .big-green-banner,
+  .click-the-map,
+  #skip-this-step,
+  .my-account-buttons {
     display: none !important;
   }
 
-  #map_box {
+  #site-header {
+    display: block !important;
+    position: static !important;
+  }
+
+  #map_box,
+  #map_sidebar {
     position: static !important;
-    height: 256px !important;
     width: auto !important;
-    background: #f1eee9 !important; // cream colour to match OSM image
+    background: transparent !important;
+  }
+
+  #map_box {
+    float: right !important;
+    width: 256px !important;
+    height: 256px !important;
+    margin: 0 0 1em 1em !important;
+  }
+
+  #map_sidebar {
+      // Prevent sidebar from clearing below floated map
+      overflow: visible !important;
   }
 
   #map {