6 files changed, 496 insertions, 127 deletions

diff --git a/web/cobrands/sass/_admin.scss b/web/cobrands/sass/_admin.scss
index a53f9f60a..58917a8ce 100644
--- a/web/cobrands/sass/_admin.scss
+++ b/web/cobrands/sass/_admin.scss
@@ -67,39 +67,51 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
         list-style: none;
       }
     }
-    .admin-box { // for delimiting forms, etc
-      border:1px solid #999;
-      padding:0.5em 1em;
-      margin:1.5em 0;
-      h2 { // only really want on first-child
+}
+
+.admin-box { // for delimiting forms, etc
+    border:1px solid #999;
+    padding:0.5em 1em;
+    margin:1.5em 0;
+    h2 { // only really want on first-child
         margin-top: 0;
-      }
     }
-  .admin-offsite-link {
+}
+
+.admin-offsite-link {
     display: inline;
-  }
-  .fms-admin-warning, .fms-admin-info {
+    padding-#{$right}: 12px;
+    background-image: url(../../i/external-link.png);
+    background-position: $right top;
+    background-repeat: no-repeat;
+}
+
+.fms-admin-warning, .fms-admin-info {
     padding: 1em;
     font-size: 90%;
     border-style: solid;
     border-width: 1px;
     border-#{$left}-width: 1em;
     margin-bottom: 1em;
-  }
-  .fms-admin-warning {
-      border-color: #f99;
-      background-color: #ffe1e1;
-  }
-  .fms-admin-info {
-      border-color: #9f9;
-      background-color: #e1ffe1;
-  }
-  .admin-open311-only {
+}
+
+.fms-admin-warning {
+    border-color: #f99;
+    background-color: #ffe1e1;
+}
+
+.fms-admin-info {
+    border-color: #9f9;
+    background-color: #e1ffe1;
+}
+
+.admin-open311-only {
     border:1px solid #666;
     padding:1em;
     margin: 1em 0;
-  }
-  .admin-hint {
+}
+
+.admin-hint {
     font-size: 80%; // little question marks are small
     cursor: pointer;
     display: block;
@@ -115,35 +127,39 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
     -webkit-border-radius: 0.333em;
     border-radius: 0.333em;
     p {
-      display:none;
+        display:none;
     }
     &:before { content: "?" }
     &.admin-hint-show {
-      font-size: 90%;
-      text-align: $left;
-      display: block;
-      float:none;
-      margin:1em 0;
-      &:before { content: "" }
-      background-color: inherit !important;
-      p {
-        font-weight: normal;
+        font-size: 90%;
+        text-align: $left;
         display: block;
-        background-color: #ff9;
-        color: #000;
-        border-style: solid;
-        border-width: 1px;
-        border-#{$left}-width: 1em;
-        border-color: #f93;
-        padding:1em;
-        margin: 0;
-      }
+        float:none;
+        margin:1em 0;
+        &:before { content: "" }
+        background-color: inherit !important;
+        p {
+            font-weight: normal;
+            display: block;
+            background-color: #ff9;
+            color: #000;
+            border-style: solid;
+            border-width: 1px;
+            border-#{$left}-width: 1em;
+            border-color: #f93;
+            padding:1em;
+            margin: 0;
+        }
+    }
+}
+
+.admin-index-search {
+    width: 27em;
+    form {
+        clear: left;
+    }
+    select {
+        max-width: 65%;
+        float: left;
     }
-  }
-  .admin-offsite-link {
-    padding-#{$right}: 12px;
-    background-image: url(../../i/external-link.png);
-    background-position: $right top;
-    background-repeat: no-repeat;
-  }
 }
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 {
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 48fdf32c0..7e56d31bd 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -148,7 +148,7 @@ h1 {
   a, span {
     display: block;
     color: $nav_fg;
-    background: none;
+    background-color: transparent;
     border-bottom: none;
   }
 }
@@ -158,16 +158,16 @@ h1 {
     font-size: 0.9em;
   }
   a:hover {
-    background: $nav_fg_hover;
+    background-color: $nav_fg_hover;
   }
   a.report-a-problem-btn {
     color: $primary_text;
-    background: $primary;
+    background-color: $primary;
     padding:0.25em;
     margin:0.5em;
     @include border-radius(0.25em);
     &:hover {
-      background:$primary/1.1;
+      background-color:$primary/1.1;
     }
   }
   span {
@@ -177,17 +177,17 @@ h1 {
 .nav-menu--mysoc {
   padding: 0em 0.5em;
   margin-#{$left}: 0.25em;
-  background: $primary;
+  background-color: $primary;
   @include border-radius(0 0 0.375em 0.375em);
   a {
-    background:none;
+    background-color: transparent;
     color: $primary_text;
     text-transform: uppercase;
     font-size: 0.6875em;
     padding: 1.3em 0.7em 1em;
     &:hover {
       color: #fff;
-      background: none;
+      background-color: transparent;
     }
   }
 }
@@ -617,6 +617,7 @@ body.authpage {
   display:table;
   width:100%;
   padding: 0 0 1em;
+  table-layout: fixed;
   >div {
     display:table-cell;
     width:50%;
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index 6d4f523ce..8b6114aec 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -158,9 +158,28 @@ $right: right;
   flex: $values;
 }
 
+@mixin flex-wrap($wrap) {
+  -webkit-box-wrap: $wrap;
+  -webkit-flex-wrap: $wrap;
+  -ms-flex-wrap: $wrap;
+  flex-wrap: $wrap;
+}
+
 @mixin flex-align($alignment) {
   -webkit-box-align: $alignment;
   -webkit-align-items: $alignment;
   -ms-flex-align: $alignment;
   align-items: $alignment;
 }
+
+@mixin high-dpi-background-image($path) {
+  background-image: url("#{$path}.png");
+
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    background-image: url("#{$path}@2x.png");
+  }
+
+  @media screen {
+    background-image: url("#{$path}.svg"), none;
+  }
+}
diff --git a/web/cobrands/sass/_report_list_pins.scss b/web/cobrands/sass/_report_list_pins.scss
index eaeefbc10..3dae2cf84 100644
--- a/web/cobrands/sass/_report_list_pins.scss
+++ b/web/cobrands/sass/_report_list_pins.scss
@@ -1,15 +1,11 @@
+// Like .item-list__item--indented except with a pin icon baked in!
 .item-list__item--with-pin {
-  position: relative;
-  margin: 0;
-  padding: 0;
-  background: none;
+  @extend .item-list__item--indented;
 
   a {
-    display: block;
-    padding: 1em;
-    padding-#{$left}: 3em;
-    border-#{$left}: solid 1em transparent;
-    background: transparent url(/i/pin-yellow-small.png) no-repeat $left center;
+    background-image: url(/i/pin-yellow-small.png);
+    background-repeat: no-repeat;
+    background-position: $left center;
   }
 
   &.yellow a {
@@ -24,31 +20,6 @@
   &.grey a {
       background-image: url(/i/pin-grey-small.png);
   }
-
-  &:after {
-    content: "";
-    display: block;
-    height: 1px;
-    position: absolute;
-    #{$left}: 3em;
-    #{$right}: 0;
-    bottom: 0;
-    background-color: #e5e5e5;
-  }
-
-  h3, p {
-    margin: 0;
-  }
-
-  h3 {
-    color: $primary;
-    margin-bottom: 0.2em;
-  }
-
-  p {
-    font-size: 0.8em;
-    color: #777;
-  }
 }
 .item-list--reports__item--selected {
   background: $base_bg;
@@ -59,24 +30,6 @@
 }
 
 
-.item-list__item--empty {
-  background: none;
-  color: #777;
-  p {
-    padding: 1em;
-    text-align: center;
-  }
-}
-
-/* We have no padding on the front page */
-body.frontpage {
-    .item-list__item--with-pin a {
-        padding: 0;
-        padding-#{$left}: 3em;
-    }
-}
-
-
 .big-green-banner {
   display: none; // hide the empty banner by default
 }
diff --git a/web/cobrands/sass/_top-banner.scss b/web/cobrands/sass/_top-banner.scss
new file mode 100644
index 000000000..8677343c2
--- /dev/null
+++ b/web/cobrands/sass/_top-banner.scss
@@ -0,0 +1,49 @@
+.top_banner {
+    color: $primary_text;
+    background: $primary;
+    p {
+        margin: auto;
+        padding: 0.5em 2em;
+        max-width: 50em;
+        text-align: center;
+    }
+    a {
+        color: $primary_text;
+        text-decoration: underline;
+    }
+}
+
+.top_banner--donate {
+    background: #bef;
+}
+
+// The banner interferes with the map moving/placement on mobile, and the top
+// bar navigation on desktop (which both assume that .wrapper is at the top of
+// the page) so hide there for now
+.mappage .top_banner--donate {
+    display: none;
+}
+
+// This banner is only shown via JavaScript AJAX call
+.top_banner--country {
+    display: none;
+}
+
+.top_banner--offline {
+    position: fixed; left: 0; right: 0; top: 0; z-index: 100;
+    opacity: 0.9;
+    background: #c33;
+    color: #fff;
+}
+
+.top_banner--offline a {
+    color: #fff;
+}
+
+.top_banner--offline a:hover {
+    color: #000;
+}
+
+.top_banner__close {
+    float: $right;
+}