Add shortlist buttons to report lists.

This includes adding/removing reports from a user's shortlist, and
manual reordering of a shortlist with up/down buttons.

The backend code can cope with an item moving to any point in the list.

44 files changed, 287 insertions, 73 deletions

diff --git a/web/cobrands/bristol/base.scss b/web/cobrands/bristol/base.scss
index 746e17064..c92b46ec3 100644
--- a/web/cobrands/bristol/base.scss
+++ b/web/cobrands/bristol/base.scss
@@ -4,6 +4,7 @@
 @import "../sass/mixins";
 
 @import "../sass/base";
+@import "../sass/report_list_pins";
 
 // Put the BCC logo in place, and reveal the 'bristol.gov.uk' text alongside it
 #site-logo {
diff --git a/web/cobrands/bristol/layout.scss b/web/cobrands/bristol/layout.scss
index 02894e083..3b9dfa1b6 100644
--- a/web/cobrands/bristol/layout.scss
+++ b/web/cobrands/bristol/layout.scss
@@ -1,7 +1,6 @@
 @import "_colours";
 @import "_fonts";
 @import "../sass/layout";
-@import "../sass/report_list_pins";
 
 #site-header {
   background-color: $g1;
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index 5661632a3..0d028d190 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -4,6 +4,7 @@
 @import "../sass/mixins";
 
 @import "../sass/base";
+@import "../sass/report_list_pins";
 
 // Override the site logo
 #site-logo{
diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
index a8c1f35ce..71d7cbc47 100644
--- a/web/cobrands/bromley/layout.scss
+++ b/web/cobrands/bromley/layout.scss
@@ -1,6 +1,5 @@
 @import "_colours";
 @import "../sass/layout";
-@import "../sass/report_list_pins";
 
 // Alter the logo and the header on every page *but* the map page. On the map
 // page it stays small like in base.css
diff --git a/web/cobrands/fixmystreet.com/_colours.scss b/web/cobrands/fixmystreet.com/_colours.scss
index 908356d36..c72e48d45 100644
--- a/web/cobrands/fixmystreet.com/_colours.scss
+++ b/web/cobrands/fixmystreet.com/_colours.scss
@@ -20,6 +20,6 @@ $col_fixed_label: #00BD08;
 $col_fixed_label_dark: #4B8304;
 
 $itemlist_item_background: #f6f6f6;
-$itemlist_item_background_hover: mix(#fff, $primary, 50%);
+$itemlist_item_background_hover: mix(#fff, $primary, 70%);
 
 $layout_front_stats_color: #222;
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 190978d45..1a69f895e 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -213,6 +213,15 @@ fixmystreet.geolocate = {
     }
 };
 
+fixmystreet.update_list_item_buttons = function($list) {
+    if (!$list) {
+        return;
+    }
+  $list.find('[name="shortlist-up"], [name="shortlist-down"]').prop('disabled', false);
+  $list.children(':first-child').find('[name="shortlist-up"]').prop('disabled', true);
+  $list.children(':last-child').find('[name="shortlist-down"]').prop('disabled', true);
+};
+
 fixmystreet.set_up = fixmystreet.set_up || {};
 $.extend(fixmystreet.set_up, {
   basics: function() {
@@ -227,7 +236,7 @@ $.extend(fixmystreet.set_up, {
     $('#pc').focus();
 
     // In case we've come here by clicking back to a form that disabled a submit button
-    $('input[type=submit]').removeAttr('disabled');
+    $('form.validate input[type=submit]').removeAttr('disabled');
 
     $('[data-confirm]').on('click', function() {
         return confirm(this.getAttribute('data-confirm'));
@@ -313,7 +322,6 @@ $.extend(fixmystreet.set_up, {
         }
         e.preventDefault();
         var $form = $(this),
-            $change = $form.find("input[name='change']" ),
             $submit = $form.find("input[type='submit']" ),
             $labels = $('label[for="' + $submit.attr('id') + '"]'),
             problemId = $form.find("input[name='id']").val(),
@@ -324,18 +332,17 @@ $.extend(fixmystreet.set_up, {
 
         $.post(this.action, data, function(data) {
             if (data.outcome == 'add') {
-                changeValue = "remove";
+                $form.find("input[name='shortlist-add']" ).attr('name', 'shortlist-remove');
                 buttonLabel = $submit.data('label-remove');
                 buttonValue = $submit.data('value-remove');
                 $('.shortlisted-status').remove();
                 $(document).trigger('shortlist-add', problemId);
             } else if (data.outcome == 'remove') {
-                changeValue = "add";
+                $form.find("input[name='shortlist-remove']" ).attr('name', 'shortlist-add');
                 buttonLabel = $submit.data('label-add');
                 buttonValue = $submit.data('value-add');
                 $(document).trigger('shortlist-remove', problemId);
             }
-            $change.val(changeValue);
             $submit.val(buttonValue).attr('aria-label', buttonLabel);
             $labels.text(buttonValue).attr('aria-label', buttonLabel);
         });
@@ -474,6 +481,88 @@ $.extend(fixmystreet.set_up, {
       $("#js-change-duplicate-report").click(refresh_duplicate_list);
   },
 
+  list_item_actions: function() {
+    function toggle_shortlist(btn, sw, id) {
+        btn.attr('class', 'item-list__item__shortlist-' + sw);
+        btn.attr('title', btn.data('label-' + sw));
+        if (id) {
+            sw += '-' + id;
+        }
+        btn.attr('name', 'shortlist-' + sw);
+    }
+
+    $('.item-list').on('click', ':submit', function(e) {
+      e.preventDefault();
+
+      var $submitButton = $(this);
+      var whatUserWants = $submitButton.prop('name');
+      var data;
+      var $item;
+      var $list;
+      var $hiddenInput;
+      var report_id;
+      if (fixmystreet.page === 'around') {
+          // Deal differently because one big form
+          var parts = whatUserWants.split('-');
+          whatUserWants = parts[0] + '-' + parts[1];
+          report_id = parts[2];
+          var token = $('[name=token]').val();
+          data = whatUserWants + '=1&token=' + token + '&id=' + report_id;
+      } else {
+          var $form = $(this).parents('form');
+          $item = $form.parent('.item-list__item');
+          $list = $item.parent('.item-list');
+
+          // The server expects to be told which button/input triggered the form
+          // submission. But $form.serialize() doesn't know that. So we inject a
+          // hidden input into the form, that can pass the name and value of the
+          // submit button to the server, as it expects.
+          $hiddenInput = $('<input>').attr({
+            type: 'hidden',
+            name: whatUserWants,
+            value: $submitButton.prop('value')
+          }).appendTo($form);
+          data = $form.serialize() + '&ajax=1';
+      }
+
+      // Update UI while the ajax request is sent in the background.
+      if ('shortlist-down' === whatUserWants) {
+        $item.insertAfter( $item.next() );
+      } else if ('shortlist-up' === whatUserWants) {
+        $item.insertBefore( $item.prev() );
+      } else if ('shortlist-remove' === whatUserWants) {
+          toggle_shortlist($submitButton, 'add', report_id);
+      } else if ('shortlist-add' === whatUserWants) {
+          toggle_shortlist($submitButton, 'remove', report_id);
+      }
+
+      // Items have moved around. We need to make sure the "up" button on the
+      // first item, and the "down" button on the last item, are disabled.
+      fixmystreet.update_list_item_buttons($list);
+
+      $.ajax({
+        url: '/my/planned/change',
+        type: 'POST',
+        data: data
+      }).fail(function() {
+        // Undo the UI changes we made.
+        if ('shortlist-down' === whatUserWants) {
+          $item.insertBefore( $item.prev() );
+        } else if ('shortlist-up' === whatUserWants) {
+          $item.insertAfter( $item.next() );
+        } else if ('shortlist-remove' === whatUserWants) {
+          toggle_shortlist($submitButton, 'remove', report_id);
+        } else if ('shortlist-add' === whatUserWants) {
+          toggle_shortlist($submitButton, 'add', report_id);
+        }
+        fixmystreet.update_list_item_buttons($list);
+      }).complete(function() {
+        if ($hiddenInput) {
+          $hiddenInput.remove();
+        }
+      });
+    });
+  },
 
   contribute_as: function() {
     $('.content').on('change', '.js-contribute-as', function(){
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-active-hover.png b/web/cobrands/fixmystreet/images/icon-shortlist-active-hover.png
new file mode 100644
index 000000000..a2574d407
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-active-hover.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-active-hover.svg b/web/cobrands/fixmystreet/images/icon-shortlist-active-hover.svg
new file mode 100644
index 000000000..054b98134
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-active-hover.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icon-shortlist-active-hover</title><defs><path d="M5.1 22.832l6.9-3.627 6.9 3.627c.286-.192.565-.395.835-.61l-1.318-7.68L24 9.103c-.093-.334-.2-.66-.32-.983l-7.714-1.122L12.518.01C12.346.005 12.173 0 12 0c-.173 0-.346.004-.518.01L8.034 7 .32 8.118c-.12.323-.227.65-.32.983l5.583 5.443-1.318 7.68c.27.214.55.417.836.61z" id="a"/><mask id="b" x="0" y="0" width="24" height="22.832" fill="#fff"><use xlink:href="#a"/></mask></defs><use mask="url(#b)" xlink:href="#a" stroke="#000" stroke-width="4" fill="#000" fill-rule="evenodd" stroke-opacity=".2" fill-opacity=".15"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-active-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-active-hover@2x.png
new file mode 100644
index 000000000..b52123a4a
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-active-hover@2x.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-active.png b/web/cobrands/fixmystreet/images/icon-shortlist-active.png
new file mode 100644
index 000000000..e35ecb179
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-active.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-active.svg b/web/cobrands/fixmystreet/images/icon-shortlist-active.svg
new file mode 100644
index 000000000..fcf677a0f
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-active.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlist-active</title><path d="M5.1 22.832l6.9-3.627 6.9 3.627c.286-.192.565-.395.835-.61l-1.318-7.68L24 9.103c-.093-.334-.2-.66-.32-.983l-7.714-1.122L12.518.01C12.346.005 12.173 0 12 0c-.173 0-.346.004-.518.01L8.034 7 .32 8.118c-.12.323-.227.65-.32.983l5.583 5.443-1.318 7.68c.27.214.55.417.836.61z" fill="#00BD08" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-active@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-active@2x.png
new file mode 100644
index 000000000..bcd5d8c0d
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-active@2x.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-down-hover.png b/web/cobrands/fixmystreet/images/icon-shortlist-down-hover.png
new file mode 100644
index 000000000..c2151f55e
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-down-hover.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-down-hover.svg b/web/cobrands/fixmystreet/images/icon-shortlist-down-hover.svg
new file mode 100644
index 000000000..c8ab5b2b3
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-down-hover.svg
@@ -0,0 +1 @@
+<svg width="24" height="14" viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlist-down-hover</title><path d="M10 6h4V0h-4v6zm2 8l8-8H4l8 8z" fill="#00BD08" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-down-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-down-hover@2x.png
new file mode 100644
index 000000000..3deb4c1d1
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-down-hover@2x.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-down.png b/web/cobrands/fixmystreet/images/icon-shortlist-down.png
new file mode 100644
index 000000000..df700f7cd
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-down.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-down.svg b/web/cobrands/fixmystreet/images/icon-shortlist-down.svg
new file mode 100644
index 000000000..495f7d647
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-down.svg
@@ -0,0 +1 @@
+<svg width="24" height="14" viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlist-down</title><path d="M10 6h4V0h-4v6zm2 8l8-8H4l8 8z" fill="#000" fill-rule="evenodd" fill-opacity=".3"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-down@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-down@2x.png
new file mode 100644
index 000000000..cfdadf2e4
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-down@2x.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover.png b/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover.png
new file mode 100644
index 000000000..897634bee
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover.svg b/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover.svg
new file mode 100644
index 000000000..05239ef51
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icon-shortlist-inactive-hover</title><defs><path d="M5.1 22.832l6.9-3.627 6.9 3.627c.286-.192.565-.395.835-.61l-1.318-7.68L24 9.103c-.093-.334-.2-.66-.32-.983l-7.714-1.122L12.518.01C12.346.005 12.173 0 12 0c-.173 0-.346.004-.518.01L8.034 7 .32 8.118c-.12.323-.227.65-.32.983l5.583 5.443-1.318 7.68c.27.214.55.417.836.61z" id="a"/><mask id="b" x="0" y="0" width="24" height="22.832" fill="#fff"><use xlink:href="#a"/></mask></defs><use mask="url(#b)" xlink:href="#a" stroke-width="4" stroke="#00BD08" fill="#00BD08" fill-rule="evenodd" fill-opacity=".25"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover@2x.png
new file mode 100644
index 000000000..b561473fd
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover@2x.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-inactive.png b/web/cobrands/fixmystreet/images/icon-shortlist-inactive.png
new file mode 100644
index 000000000..66d9684fb
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-inactive.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-inactive.svg b/web/cobrands/fixmystreet/images/icon-shortlist-inactive.svg
new file mode 100644
index 000000000..b2709859e
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-inactive.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icon-shortlist-inactive</title><defs><path d="M5.1 22.832l6.9-3.627 6.9 3.627c.286-.192.565-.395.835-.61l-1.318-7.68L24 9.103c-.093-.334-.2-.66-.32-.983l-7.714-1.122L12.518.01C12.346.005 12.173 0 12 0c-.173 0-.346.004-.518.01L8.034 7 .32 8.118c-.12.323-.227.65-.32.983l5.583 5.443-1.318 7.68c.27.214.55.417.836.61z" id="a"/><mask id="b" x="0" y="0" width="24" height="22.832" fill="#fff"><use xlink:href="#a"/></mask></defs><use mask="url(#b)" xlink:href="#a" stroke="#000" stroke-width="4" fill="none" fill-rule="evenodd" stroke-opacity=".3"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-inactive@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-inactive@2x.png
new file mode 100644
index 000000000..47b86d144
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-inactive@2x.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover.png b/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover.png
new file mode 100644
index 000000000..0069de106
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover.svg b/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover.svg
new file mode 100644
index 000000000..b9442e004
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlist-taken-hover</title><g fill="none" fill-rule="evenodd"><path d="M4.095 19.326l5.537-2.91 5.537 2.91c.23-.153.454-.316.67-.488l-1.057-6.165 4.48-4.368c-.074-.267-.16-.53-.255-.788l-6.192-.9-2.77-5.61C9.91 1.004 9.772 1 9.633 1c-.14 0-.278.003-.415.008l-2.77 5.61-6.19.9c-.097.257-.182.52-.257.787l4.48 4.368-1.056 6.165c.216.172.44.335.67.488z" fill="#00BD08"/><path d="M17.777 17.18c.142-.055.277-.118.402-.187.048-.026.102-.04.157-.04h.176c.057 0 .112.014.16.042 1.935.496 3.733 1.535 5.206 3.007.064.064.1.154.1.247L24 21.64c0 .19-.15.346-.336.346H8.336c-.185 0-.336-.156-.336-.346l-.02-1.393c0-.094.038-.183.103-.248.246-.246.5-.48.765-.7l.784-.414 4.335 2.28L17 21l.98-2.63-.203-1.19zm-.294-1.713c1.465-.742 2.498-2.538 2.498-4.635v-.167l-2.845 2.772.348 2.03z" fill-opacity=".3" fill="#000"/></g></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover@2x.png
new file mode 100644
index 000000000..3e8bbcd58
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover@2x.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-taken.png b/web/cobrands/fixmystreet/images/icon-shortlist-taken.png
new file mode 100644
index 000000000..f332d52f1
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-taken.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-taken.svg b/web/cobrands/fixmystreet/images/icon-shortlist-taken.svg
new file mode 100644
index 000000000..85154a8fb
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-taken.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlist-taken</title><path d="M12.167 5.303l-2.12-4.295C9.91 1.003 9.77 1 9.632 1c-.14 0-.278.003-.415.008l-2.77 5.61-6.19.9c-.097.257-.182.52-.257.787l4.48 4.368-1.056 6.165c.216.172.44.335.67.488L7.91 17.32c1.074-.93 2.244-1.644 3.47-2.116-.867-1.217-1.39-2.783-1.39-4.49 0-2.178.848-4.124 2.177-5.41zm6.495 11.686c.004 0 .008.003.012.005 1.934.496 3.732 1.535 5.205 3.007.064.064.1.154.1.247L24 21.64c0 .19-.15.346-.336.346H8.336c-.185 0-.336-.156-.336-.346l-.02-1.393c0-.094.038-.183.103-.248 1.477-1.476 3.28-2.516 5.22-3.012.806.473 1.716.74 2.678.74.965 0 1.876-.268 2.682-.74zm-2.68-1.158c2.208 0 4-2.24 4-5 0-2.762-1.792-5-4-5-2.21 0-4 2.238-4 5 0 2.76 1.79 5 4 5z" fill="#000" fill-rule="evenodd" fill-opacity=".3"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-taken@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-taken@2x.png
new file mode 100644
index 000000000..1c5759701
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-taken@2x.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-up-hover.png b/web/cobrands/fixmystreet/images/icon-shortlist-up-hover.png
new file mode 100644
index 000000000..d518fa029
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-up-hover.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-up-hover.svg b/web/cobrands/fixmystreet/images/icon-shortlist-up-hover.svg
new file mode 100644
index 000000000..fe3a941e1
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-up-hover.svg
@@ -0,0 +1 @@
+<svg width="24" height="14" viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlist-up-hover</title><path d="M10 8h4v6h-4V8zm2-8l8 8H4l8-8z" fill="#00BD08" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-up-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-up-hover@2x.png
new file mode 100644
index 000000000..233864de9
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-up-hover@2x.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-up.png b/web/cobrands/fixmystreet/images/icon-shortlist-up.png
new file mode 100644
index 000000000..09ce57064
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-up.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-up.svg b/web/cobrands/fixmystreet/images/icon-shortlist-up.svg
new file mode 100644
index 000000000..c99767267
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-up.svg
@@ -0,0 +1 @@
+<svg width="24" height="14" viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlist-up</title><path d="M10 8h4v6h-4V8zm2-8l8 8H4l8-8z" fill="#000" fill-rule="evenodd" fill-opacity=".3"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-up@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-up@2x.png
new file mode 100644
index 000000000..922cc0a94
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-up@2x.png
diff --git a/web/cobrands/greenwich/base.scss b/web/cobrands/greenwich/base.scss
index 756b2d60a..0c52bd5da 100644
--- a/web/cobrands/greenwich/base.scss
+++ b/web/cobrands/greenwich/base.scss
@@ -4,6 +4,7 @@
 @import "../sass/mixins";
 
 @import "../sass/base";
+@import "../sass/report_list_pins";
 
 body.frontpage #site-logo,
 #site-logo
diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss
index 54150cfd4..db06c9424 100644
--- a/web/cobrands/greenwich/layout.scss
+++ b/web/cobrands/greenwich/layout.scss
@@ -1,7 +1,6 @@
 @import "_colours";
 @import "_fonts";
 @import "../sass/layout";
-@import "../sass/report_list_pins";
 
 $fixed_page_width: 990px;
 
diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss
index a8a78dc6e..ba0597bb8 100644
--- a/web/cobrands/oxfordshire/_colours.scss
+++ b/web/cobrands/oxfordshire/_colours.scss
@@ -25,6 +25,9 @@ $col_click_map: $oxfordshire_lt_green;
 $col_fixed_label: $oxfordshire_lt_green;
 $col_fixed_label_dark: mix(#000, $oxfordshire_lt_green, 50%);
 
+$itemlist_item_background: $oxfordshire_very_light_green;
+$itemlist_item_background_hover: #e3f1d5; // darker version of $oxfordshire_very_light_green
+
 // Oxfordshire have toasty orange buttons
 
 $oxfordshire_button_base: #F35A0E;
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 0cc621310..49a1ac66c 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -4,6 +4,7 @@
 
 @import "../sass/base";
 @import "../sass/top-banner";
+@import "../sass/report_list_pins";
 
 #site-header {
   background: none;
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 22edca768..726b298ff 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -4,7 +4,6 @@ $mappage-header-height: 64px;
 
 @import "_colours";
 @import "../sass/layout";
-@import "../sass/report_list_pins";
 
 body, body a {
   font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
@@ -231,20 +230,14 @@ body.mappage {
   background-color: #deead2;
 }
 
-.item-list--reports {
-    li:after {
-        background-color: $oxfordshire_mid_grey_green;
-    }
-
-    h3 {
-        color: $oxfordshire_link_colour;
-    }
+.item-list--reports h3 {
+  color: $oxfordshire_link_colour;
 }
 
 h4.static-with-rule {
   margin-top: 1em; // down from default 2em, avoid extra space between heading and .council_info_box
   margin-bottom: 0; // no space between this and the .item-list items
-  background: transparent; // rather than light grey
+  // TODO background: transparent; // rather than light grey
   padding: 0.75em 1em * (1/0.875); // compensate for 0.875 font-size
 }
 
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 3bb8715a1..5d6176add 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1013,6 +1013,152 @@ input.final-submit {
   }
 }
 
+// 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;
@@ -1045,8 +1191,15 @@ input.final-submit {
   margin-right: 0.1em;
 }
 
-.item-list__item--empty p {
-  margin: 0;
+.item-list__item--empty {
+  background: none;
+  color: #777;
+
+  p {
+    margin: 0;
+    padding: 1em;
+    text-align: center;
+  }
 }
 
 .item-list--front-page {
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index 2b05b3c21..8b6114aec 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -171,3 +171,15 @@ $right: right;
   -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
 }