diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index a6153dcbc..4f17b03fa 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -2,7 +2,7 @@ $(() => $("time.timeago").timeago()); $(() => GOVUK.modules.start()); -$(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input')); +$(() => new GOVUK.SelectionButtons('.block-label input')); $(() => $('.error-message').eq(0).parent('label').next('input').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/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/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' ) %} -