Organize report admin actions into single control.

As part of this, rename "planned reports" to "shortlist".

The `.segmented-control` component now supports basic usage (as in the
admin report actions menu bar) and usage with hidden radio inputs and
labels (as on the report questionnaire page).

2 files changed, 70 insertions, 32 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index b6f92b6d6..d6e967bc3 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -281,16 +281,25 @@ $.extend(fixmystreet.set_up, {
         var $form = $(this),
             $change = $form.find("input[name='change']" ),
             $submit = $form.find("input[type='submit']" ),
-            data = $form.serialize() + '&ajax=1';
+            $labels = $('label[for="' + $submit.attr('id') + '"]'),
+            data = $form.serialize() + '&ajax=1',
+            changeValue,
+            buttonLabel,
+            buttonValue;
 
         $.post(this.action, data, function(data) {
             if (data.outcome == 'add') {
-                $change.val('remove');
-                $submit.val($submit.data('remove'));
+                changeValue = "remove";
+                buttonLabel = $submit.data('label-remove');
+                buttonValue = $submit.data('value-remove');
             } else if (data.outcome == 'remove') {
-                $change.val('add');
-                $submit.val($submit.data('add'));
+                changeValue = "add";
+                buttonLabel = $submit.data('label-add');
+                buttonValue = $submit.data('value-add');
             }
+            $change.val(changeValue);
+            $submit.val(buttonValue).attr('aria-label', buttonLabel);
+            $labels.text(buttonValue).attr('aria-label', buttonLabel);
         });
     });
   },
@@ -791,7 +800,7 @@ $.extend(fixmystreet.set_up, {
       function add_handlers (elem, word) {
           elem.each( function () {
               var $elem = $(this);
-              $elem.find('.moderate').click( function () {
+              $elem.find('#moderate-report').on('click', function () {
                   $elem.find('.moderate-display').hide();
                   $elem.find('.moderate-edit').show();
               });
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index d1fdec343..8760eba97 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1033,6 +1033,11 @@ input.final-submit {
 
 .problem-header {
   margin-bottom: 1em;
+
+  // Clear the admin actions after the floated photo(s).
+  .segmented-control {
+    clear: both;
+  }
 }
 
 .report_meta_info,
@@ -1773,41 +1778,49 @@ table.nicetable {
   margin-left: 0;
 }
 
-.radio-segmented-control {
-  overflow: auto; // clear floats (if browser doesn't support flexbox)
+.segmented-control {
+  @include clearfix();
   display: flex; // fancy full-width buttons for browsers that support flexbox
 
-  input {
-    position: absolute;
-    left: -999px;
-  }
-
-  label {
+  & > * {
     display: block;
     margin: 0;
-    padding: 0.75em 1.5em;
+    padding: 0.75em 0.5em;
     text-align: center;
     background: #fff linear-gradient(to bottom, #fff 0%, #eee 100%) 0 0 no-repeat;
-    border: 1px solid #ddd;
+    border: 1px solid #ccc;
     border-right-width: 0; // avoid double border between items
     font-weight: bold;
+    color: inherit !important;
+    text-decoration: none !important;
+    cursor: pointer;
     float: left; // float fallback for browsers that don't support flexbox
     flex: 1 0 auto;
 
-    @media(max-width: 400px){
-      // Shameful hack to stop the control expanding wider than the window
-      // on narrow devices (eg: 320px iPhone), which would cause horizontal
-      // scrolling, and clipped text on the new report page, for example.
-      // Flexbox will add the spacing back in anyway. Ideally we'd only apply
-      // this style if flexbox is supported, but there's no easy way to do that.
-      padding: 0.75em 0;
-    }
-
-    &:hover, &:focus {
+    &:hover {
       background: #f3f3f3 linear-gradient(to bottom, #f9f9f9 0%, #e9e9e9 100%) 0 0 no-repeat;
     }
   }
 
+  & > :first-child {
+    border-radius: 0.25em 0 0 0.25em;
+  }
+
+  & > :last-child {
+    border-radius: 0 0.25em 0.25em 0;
+    border-right-width: 1px; // reinstate border on last item
+  }
+}
+
+// A special case of segmented control, where each "button" (or label) is
+// preceded by a radio button, which needs to be hidden but interactive.
+// Checked checkboxes give their following label a "pressed" appearance.
+.segmented-control--radio {
+  input {
+    position: absolute;
+    left: -999px;
+  }
+
   input:checked + label {
     color: $primary_text;
     background: $primary;
@@ -1818,17 +1831,14 @@ table.nicetable {
   }
 
   input:checked + label + input + label {
-    border-left-width: none; // in favour of the realistic coloured border on the selected item
+    border-left-width: 0; // in favour of the realistic coloured border on the selected label
   }
 
+  // The first label is no longer the first child, so we need to
+  // fish it out specially with a next sibling selector.
   input:first-child + label {
     border-radius: 0.25em 0 0 0.25em;
   }
-
-  label:last-child {
-    border-radius: 0 0.25em 0.25em 0;
-    border-right-width: 1px; // reinstate border on last item
-  }
 }
 
 .my-account-buttons a {
@@ -1838,6 +1848,25 @@ table.nicetable {
   border-radius: 0.2em;
 }
 
+// Useful for inserting hidden forms on the page, but still allowing
+// inputs inside the form to be toggled by labels outside the form.
+// Try using this in combination with .segmented-control for funtimes.
+.hidden-label-target {
+  position: absolute;
+  top: -100px;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+
+  // Tell assistive devices to ignore this element.
+  visibility: hidden;
+
+  // Hack for IE8 which doesn't allow interaction with
+  // `visibility:hidden` elements.
+  visibility: visible\9;
+}
+
 
 @media screen {
   .print-only {