From bb9fe35ab5a720074acb4351f0363522ed13f752 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 19 Dec 2016 10:25:14 +0000 Subject: [PATCH 1/8] Upgrade GOV.UK toolkit, template and elements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We should make sure that the parts of the UI that we inherit from these packages are kept up to date. This commit: - updates each dependency to the latest version - makes patch (bug fixing) version bumps automatic because - it makes less work for us - we don’t get so far behind - we should be able to trust dependencies that are coming from other teams in this building Full changes that this brings in: GOV.UK Template --- - Increase skiplink colour contrast ([GOV.UK Template PR #263](https://github.com/alphagov/govuk_template/pull/263)) GOV.UK Elements --- - Too many to show – see https://github.com/alphagov/govuk_elements/compare/v1.1.1...v3.0.2#diff-4ac32a78649ca5bdd8e0ba38b7006a1e GOV.UK Frontend Toolkit --- - Too many to show – see https://github.com/alphagov/govuk_frontend_toolkit/compare/v4.6.0...v5.2.0#diff-4ac32a78649ca5bdd8e0ba38b7006a1e --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 0f67bdf70..5e3e3bf98 100644 --- a/package.json +++ b/package.json @@ -21,9 +21,9 @@ "babel-core": "6.3.26", "babel-preset-es2015": "6.3.13", "diff-dom": "2.1.0", - "govuk-elements-sass": "1.1.1", - "govuk_frontend_toolkit": "4.6.0", - "govuk_template_jinja": "https://github.com/alphagov/govuk_template/releases/download/v0.19.1/jinja_govuk_template-0.19.1.tgz", + "govuk-elements-sass": "3.0.x", + "govuk_frontend_toolkit": "5.2.x", + "govuk_template_jinja": "0.19.x", "gulp": "3.9.0", "gulp-add-src": "0.2.0", "gulp-babel": "6.1.1", From e62bd2a0188b39a490103887b88ddec13755f09d Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 19 Dec 2016 10:24:54 +0000 Subject: [PATCH 2/8] Remove override to make beta banner blue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously the beta bar was orange, which we didn’t want. So we wrote some SASS to make it blue. Now that GOV.UK Frontend Toolkit makes it blue, we can remove this SASS. See https://github.com/alphagov/govuk_frontend_toolkit/pull/370 --- app/assets/stylesheets/app.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index 5d6ccea31..02887fd3f 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; } From 31d03acc1142612857069803aef8d9f805db39d2 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 19 Dec 2016 10:25:05 +0000 Subject: [PATCH 3/8] Remove external link styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The external link icon, and associated mixin, were deprecated in https://github.com/alphagov/govuk_frontend_toolkit/pull/293 This means we can’t and shouldn’t use them any more. --- app/assets/stylesheets/app.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index 02887fd3f..9b467299d 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -150,14 +150,6 @@ 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; } From a592898eff7dcb6e3090612675241bad1acf61d6 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 19 Dec 2016 10:36:17 +0000 Subject: [PATCH 4/8] Make radio select work w/ new checkboxes/radios MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The visual appearance of radio and checkbox form inputs changed in GOV.UK Elements here: https://github.com/alphagov/govuk_elements/pull/296 This was subsequently reimplemented with different markup and no Javascript here: https://github.com/alphagov/govuk_elements/pull/406 This has meant making the following changes to our app: - changing the markup in our radio/checkbox macros to match the example markup given by GOV.UK Elements - removing the previous Javascript file because it’s no longer needed to make the radios appear visual selected - making the buttons on the scheduled job picker look like links, because the grey button style looked weird with the new radio buttons --- app/assets/javascripts/main.js | 2 +- app/assets/javascripts/radioSelect.js | 50 ++++++++++-------- .../stylesheets/components/radio-select.scss | 20 ++++--- app/templates/components/checkbox.html | 39 ++++++-------- app/templates/components/radios.html | 52 +++++++++++-------- .../views/manage-users/permissions.html | 8 +-- gulpfile.babel.js | 1 - 7 files changed, 91 insertions(+), 81 deletions(-) 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' ) %} -