aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
authorZarino Zappia <mail@zarino.co.uk>2016-09-19 17:07:45 +0100
committerMatthew Somerville <matthew@mysociety.org>2016-09-20 15:10:52 +0100
commitac8145c7ec2d648be0c687d2d0037757f4142eaf (patch)
treeb4461616a580ab09529cd4983991d6da314b49a3 /web
parente9a5d2fb6e1985a0d946ad3574234784f4f659c4 (diff)
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).
Diffstat (limited to 'web')
-rw-r--r--web/cobrands/fixmystreet/fixmystreet.js21
-rw-r--r--web/cobrands/sass/_base.scss81
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 {