diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index a6153dcbc..f5e930438 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -2,8 +2,6 @@ $(() => $("time.timeago").timeago()); $(() => GOVUK.modules.start()); -$(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input')); - $(() => $('.error-message').eq(0).parent('label').next('input').trigger('focus')); $(() => $('.banner-dangerous').eq(0).trigger('focus')); diff --git a/app/assets/javascripts/radioSelect.js b/app/assets/javascripts/radioSelect.js index 8d359cc7d..62fc2b938 100644 --- a/app/assets/javascripts/radioSelect.js +++ b/app/assets/javascripts/radioSelect.js @@ -5,54 +5,57 @@ let states = { 'initial': Hogan.compile(`
- +
+ + +
{{#categories}} - + {{/categories}}
`), 'choose': Hogan.compile(`
- +
+ + +
{{#choices}} - +
+ + +
{{/choices}}
`), 'chosen': Hogan.compile(`
- +
+ + +
{{#choices}} -
- +
`) }; let focusSelected = function() { setTimeout( - () => $('[type=radio]:checked').parent('label').blur().trigger('focus').addClass('selected'), + () => $('[type=radio]:checked').next('label').blur().trigger('focus').addClass('selected'), 10 ); }; @@ -62,13 +65,16 @@ this.start = function(component) { let $component = $(component); - let render = (state, data) => $component.html(states[state].render(data)); + let render = (state, data) => { + $component.html(states[state].render(data)); + new GOVUK.SelectionButtons('.block-label input'); + }; let choices = $('label', $component).toArray().map(function(element) { let $element = $(element); return { 'id': $element.attr('for'), 'label': $.trim($element.text()), - 'value': $element.find('input').attr('value') + 'value': $element.prev('input').attr('value') }; }); let categories = $component.data('categories').split(','); @@ -95,7 +101,7 @@ if (!event.pageX) return true; event.preventDefault(); - let value = $(this).attr('value'); + let value = $('input', this).attr('value'); render('chosen', { 'choices': choices.filter( element => element.value == value diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index 5d6ccea31..76dd0a05c 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -46,8 +46,7 @@ } .beta-badge { - @include phase-tag(beta); - background: $govuk-blue; + @include phase-tag(); margin: 10px 0 0 0; } @@ -151,22 +150,10 @@ td { margin-bottom: 5px; } -a[rel='external'] { - @include external-link-default; - @include external-link-16; - @include media(tablet) { - @include external-link-19; - } -} - .hint { color: $secondary-text-colour; } -.button { - padding: 0.3em 0.6em 0.2em 0.6em; -} - .list-bullet { .list-bullet { @@ -256,10 +243,16 @@ details .arrow { margin-top: 5px; } -.block-label input[disabled] { - opacity: 0.5; -} - #content.override-elements-content { padding-bottom: 0; } + +.multiple-choice input:disabled+label { + opacity: 1; + color: $secondary-text-colour; + cursor: default; +} + +.multiple-choice input:disabled { + opacity: 0.5; +} diff --git a/app/assets/stylesheets/components/radio-select.scss b/app/assets/stylesheets/components/radio-select.scss index 1440d0ad6..dc48fbff6 100644 --- a/app/assets/stylesheets/components/radio-select.scss +++ b/app/assets/stylesheets/components/radio-select.scss @@ -5,19 +5,25 @@ display: inline-block; vertical-align: top; - .block-label { + .multiple-choice { margin-right: 5px; - padding-right: $gutter - 10px; + padding-right: 10px; padding-left: 54px - 10px; } } - .tertiary-button { + .js-reset-button, + .js-category-button { + background: none; + text-decoration: underline; + color: $link-colour; + //font-weight: bold; + border: none; display: inline-block; vertical-align: top; width: auto; - padding: 20px $gutter-half 15px $gutter-half; + padding: 7px 20px 7px 10px; margin-right: 5px; } @@ -26,12 +32,12 @@ height: 60px; overflow: visible; - .block-label { + .multiple-choice { display: none; } - .js-block-label { - display: inline-block; + .js-multiple-choice { + display: block; } } diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 7cf0c200d..9fa8df2be 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -24,7 +24,7 @@ $path: '/static/images/'; @import 'elements/elements-typography'; @import 'elements/forms'; @import 'elements/forms/form-validation'; -@import 'elements/forms/form-block-labels'; +@import 'elements/forms/form-multiple-choice'; @import 'elements/forms/form-validation'; @import 'elements/icons'; @import 'elements/layout'; diff --git a/app/templates/components/checkbox.html b/app/templates/components/checkbox.html index 3e71a949c..a0edb9c65 100644 --- a/app/templates/components/checkbox.html +++ b/app/templates/components/checkbox.html @@ -1,29 +1,22 @@ {% macro checkbox( field, hint=False, - help_link=None, - help_link_text=None, - width='2-3', - suffix=None, - block=False + width='2-3' ) %} -