From eb3470a2a2ae44919ff49b79f403711adc9ee9d7 Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Mon, 13 Feb 2017 18:33:18 +0000 Subject: [PATCH 1/6] Update with new toolkits Brings in the latest govuk_frontend_toolkit available on NPM, and the latest digitalmarketplace toolkit. Also: - removes external link styles, as these will no longer compile - removes custom focused/selected classes for radios/checks --- app/assets/javascripts/_selection-buttons.js | 5 +--- app/assets/scss/_footer.scss | 25 -------------------- app/assets/scss/_table.scss | 4 ---- bower.json | 2 +- package.json | 2 +- 5 files changed, 3 insertions(+), 35 deletions(-) diff --git a/app/assets/javascripts/_selection-buttons.js b/app/assets/javascripts/_selection-buttons.js index b67cd6d39..925656e95 100644 --- a/app/assets/javascripts/_selection-buttons.js +++ b/app/assets/javascripts/_selection-buttons.js @@ -4,10 +4,7 @@ if (!GOVUK.SelectionButtons) return; - new GOVUK.SelectionButtons('.selection-button input', { - 'focusedClass' : 'selection-button-focused', - 'selectedClass' : 'selection-button-selected' - }); + new GOVUK.SelectionButtons('.selection-button input'); }; diff --git a/app/assets/scss/_footer.scss b/app/assets/scss/_footer.scss index 244d11884..02eb05521 100644 --- a/app/assets/scss/_footer.scss +++ b/app/assets/scss/_footer.scss @@ -95,9 +95,6 @@ } .footer-meta .footer-meta-inner { - a[rel='external'] { - @include external-link-16; - } .open-government-licence p { @@ -107,27 +104,5 @@ font-size: 16px; } } - } - - .footer-categories a[rel="external"], - .footer-meta .footer-meta-inner a[rel="external"] { - /* There is no mixin for a 16px black link with a font weight of normal in the govuk toolkit hence the variant below */ - &:after { - content: "\A0\A0\A0\A0\A0"; - background-position: right 3px; - background-image: file-url("external-links/external-link-black-12x12.png"); - background-repeat: no-repeat; - - @include device-pixel-ratio() { - background-image: file-url("external-links/external-link-black-24x24.png"); - background-size: 12px 12px; - } - } - - &:hover:after { - background-position: right 3px; - } - } - } diff --git a/app/assets/scss/_table.scss b/app/assets/scss/_table.scss index f937c6f1e..8bb3c650d 100644 --- a/app/assets/scss/_table.scss +++ b/app/assets/scss/_table.scss @@ -23,10 +23,6 @@ table.content-table { @include core-16($tabular-numbers: true); vertical-align: top; padding: .75em .5em .75em 0; - - a[rel="external"] { - @include external-link-16; - } } td { diff --git a/bower.json b/bower.json index 7bc9559b0..6fbb6b9c9 100644 --- a/bower.json +++ b/bower.json @@ -5,7 +5,7 @@ "jquery": "1.11.2", "hogan": "3.0.2", "jquery-details": "https://github.com/mathiasbynens/jquery-details/archive/v0.1.0.tar.gz", - "digitalmarketplace-frontend-toolkit": "https://github.com/alphagov/digitalmarketplace-frontend-toolkit.git#v19.5.1", + "digitalmarketplace-frontend-toolkit": "https://github.com/alphagov/digitalmarketplace-frontend-toolkit.git#pc-import-improved-inputs", "govuk_template": "https://github.com/alphagov/govuk_template/releases/download/v0.17.3/jinja_govuk_template-0.17.3.tgz", "digitalmarketplace-frameworks": "https://github.com/alphagov/digitalmarketplace-frameworks.git#v5.15.4" } diff --git a/package.json b/package.json index 0f0f7d834..dc27518dc 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "gulp-shell" : "0.2.9", "gulp-filelog" : "0.4.1", "gulp-include": "1.1.1", - "govuk_frontend_toolkit" : "4.12.0", + "govuk_frontend_toolkit" : "5.0.3", "gulp-jasmine-phantom": "3.0.0" }, "scripts": { From 311898aa4c2123c1f351353be78f0a60ef032b89 Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Thu, 16 Feb 2017 11:08:45 +0000 Subject: [PATCH 2/6] Compensate for missing trailing semicolon The govuk_frontend_toolkit stuff uses different javascript formatting than us where they begin their files with semicolons but don't end files with them. Our JS does the opposite, and so concatenating the files results in a compilation bug somewhere in the middle. --- app/assets/javascripts/_analytics.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/javascripts/_analytics.js b/app/assets/javascripts/_analytics.js index 97cf630c7..eefb2d9c5 100644 --- a/app/assets/javascripts/_analytics.js +++ b/app/assets/javascripts/_analytics.js @@ -1,5 +1,8 @@ //= include ../../../node_modules/govuk_frontend_toolkit/javascripts/govuk/analytics/google-analytics-universal-tracker.js //= include ../../../node_modules/govuk_frontend_toolkit/javascripts/govuk/analytics/analytics.js + +; // JavaScript in the govuk_frontend_toolkit doesn't have trailing semicolons + //= include analytics/_register.js //= include analytics/_pageViews.js //= include analytics/_events.js From 6df6c86b9585f53e3fc264e47f61e185cdddf374 Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Wed, 15 Feb 2017 23:52:03 +0000 Subject: [PATCH 3/6] Update homepage phase banner The phase banner is now always dark blue, which doesn't work on our homepage. Reversing the colours (white background, blue text) instead. --- app/assets/scss/_index-page.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/assets/scss/_index-page.scss b/app/assets/scss/_index-page.scss index 32b42d7a9..8c1b39a5f 100644 --- a/app/assets/scss/_index-page.scss +++ b/app/assets/scss/_index-page.scss @@ -141,9 +141,14 @@ margin: -6px 0 10px; color: white; + .phase-tag { + color: $govuk-blue; + background-color: white; + } + a, a:visited { color: $white; - } + } a:hover, a:active { color: $light-blue-50; From d1fe9b0d5dac703416b85b67a8f5ff55b644ddb9 Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Thu, 16 Feb 2017 13:35:20 +0000 Subject: [PATCH 4/6] Add shim-links functionality Javascript will automatically treat links with a `role="button"` and a `.link-button` class as buttons. This is part of the govuk_frontend_toolkit, not the digitalmarketplace one. --- .../javascripts/_shim-links-with-button-role.js | 15 +++++++++++++++ app/assets/javascripts/application.js | 2 ++ 2 files changed, 17 insertions(+) create mode 100644 app/assets/javascripts/_shim-links-with-button-role.js diff --git a/app/assets/javascripts/_shim-links-with-button-role.js b/app/assets/javascripts/_shim-links-with-button-role.js new file mode 100644 index 000000000..e8dde3268 --- /dev/null +++ b/app/assets/javascripts/_shim-links-with-button-role.js @@ -0,0 +1,15 @@ +(function(GOVUK, GDM) { + + GDM.shimLinksWithButtonRole = function() { + + if (!GOVUK.shimLinksWithButtonRole) return; + + GOVUK.shimLinksWithButtonRole.init({ + selector: '[class^=link-button]' + }); + + }; + + GOVUK.GDM = GDM; + +}).apply(this, [GOVUK||{}, GOVUK.GDM||{}]); diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 0b12d008b..e76f67bf7 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -12,9 +12,11 @@ //= include ../../../bower_components/digitalmarketplace-frontend-toolkit/toolkit/javascripts/word-counter.js //= include ../../../bower_components/digitalmarketplace-frontend-toolkit/toolkit/javascripts/validation.js //= include ../../../node_modules/govuk_frontend_toolkit/javascripts/govuk/selection-buttons.js +//= include ../../../node_modules/govuk_frontend_toolkit/javascripts/govuk/shim-links-with-button-role.js //= include _analytics.js' //= include _onready.js' //= include _selection-buttons.js +//= include _shim-links-with-button-role.js (function(GOVUK, GDM) { From 77267a34ecdf3d47d9c288c302dd8fdeeb436d40 Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Thu, 16 Feb 2017 14:05:22 +0000 Subject: [PATCH 5/6] Remove unused .question-heading-with-hint class The digitalmarketplace toolkit is no longer using this class, so let's get rid of it. --- app/templates/auth/create-user.html | 6 +++--- app/templates/auth/login.html | 2 +- app/templates/auth/request-password-reset.html | 2 +- app/templates/auth/reset-password.html | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/templates/auth/create-user.html b/app/templates/auth/create-user.html index 1aef0fcfd..229b5a90e 100644 --- a/app/templates/auth/create-user.html +++ b/app/templates/auth/create-user.html @@ -39,7 +39,7 @@

{% endif %}
- {{ form.name.label(class="question-heading-with-hint") }} + {{ form.name.label(class="question-heading") }}

Enter the name to be referred to on the Digital Marketplace

@@ -58,7 +58,7 @@

{% endif %}
- {{ form.phone_number.label(class="question-heading-with-hint") }} + {{ form.phone_number.label(class="question-heading") }}

If there are any urgent problems with your requirements, we need your phone number so the support team can help you fix them quickly.

@@ -77,7 +77,7 @@

{% endif %}
- {{ form.password.label(class="question-heading-with-hint") }} + {{ form.password.label(class="question-heading") }}

Must be between 10 and 50 characters

diff --git a/app/templates/auth/login.html b/app/templates/auth/login.html index 51ff519e6..9e8be61c2 100644 --- a/app/templates/auth/login.html +++ b/app/templates/auth/login.html @@ -76,7 +76,7 @@

{% endif %}
- {{ form.email_address.label(class="question-heading-with-hint") }} + {{ form.email_address.label(class="question-heading") }}

Enter the email address you used to register with the Digital Marketplace

diff --git a/app/templates/auth/request-password-reset.html b/app/templates/auth/request-password-reset.html index 229a6b91e..3705b1f18 100644 --- a/app/templates/auth/request-password-reset.html +++ b/app/templates/auth/request-password-reset.html @@ -47,7 +47,7 @@

Reset password

{% endif %}
- {{ form.email_address.label(class="question-heading-with-hint") }} + {{ form.email_address.label(class="question-heading") }}

Enter the email address you used to register with the Digital Marketplace

diff --git a/app/templates/auth/reset-password.html b/app/templates/auth/reset-password.html index bd1d11211..c6c006747 100644 --- a/app/templates/auth/reset-password.html +++ b/app/templates/auth/reset-password.html @@ -36,7 +36,7 @@

Reset password

{% endif %}
- {{ form.password.label(class="question-heading-with-hint") }} + {{ form.password.label(class="question-heading") }}

Must be between 10 and 50 characters

@@ -55,7 +55,7 @@

Reset password

{% endif %}
- {{ form.confirm_password.label(class="question-heading-with-hint") }} + {{ form.confirm_password.label(class="question-heading") }}

Repeat password used above

From e2213ae4a37f9e04d955fb6b73d657ea475452e6 Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Thu, 16 Feb 2017 14:56:20 +0000 Subject: [PATCH 6/6] Fix styles for forgotten password link Our secondary action links have a few context dependent styles, so I've added a new one and I've pulled them into their own file. Also removed a duplicated import. --- app/assets/scss/_brief_submission.scss | 9 --------- app/assets/scss/_secondary-action-link.scss | 13 +++++++++++++ app/assets/scss/application.scss | 2 +- 3 files changed, 14 insertions(+), 10 deletions(-) create mode 100644 app/assets/scss/_secondary-action-link.scss diff --git a/app/assets/scss/_brief_submission.scss b/app/assets/scss/_brief_submission.scss index 73b24620f..2b84867dd 100644 --- a/app/assets/scss/_brief_submission.scss +++ b/app/assets/scss/_brief_submission.scss @@ -80,12 +80,3 @@ ol.steps { @extend %markdown-description; padding-bottom: 30px; } - -.secondary-action-link { - margin-top: 30px; -} - -button.button-save + .secondary-action-link, -input.button-save + .secondary-action-link { - margin-top: 5px; -} diff --git a/app/assets/scss/_secondary-action-link.scss b/app/assets/scss/_secondary-action-link.scss new file mode 100644 index 000000000..e041b6897 --- /dev/null +++ b/app/assets/scss/_secondary-action-link.scss @@ -0,0 +1,13 @@ +.secondary-action-link { + margin-top: 30px; +} + +.question + .secondary-action-link { + margin-top: -36px; + margin-bottom: 40px; +} + +.button-save + .secondary-action-link, +.button-save + .secondary-action-link-bigger { + margin-top: 5px; +} diff --git a/app/assets/scss/application.scss b/app/assets/scss/application.scss index dedbd68d8..78d377590 100644 --- a/app/assets/scss/application.scss +++ b/app/assets/scss/application.scss @@ -42,7 +42,6 @@ $path: "/static/images/"; @import "toolkit/forms/_textboxes.scss"; @import "toolkit/forms/_validation.scss"; @import "toolkit/search/_search-result.scss"; -@import "toolkit/_secondary-action-link.scss"; #wrapper { @extend %site-width-container; @@ -62,6 +61,7 @@ $path: "/static/images/"; @import "_service-page.scss"; @import "_index-page.scss"; @import "_search-page.scss"; +@import "_secondary-action-link.scss"; @import "_pagination.scss"; @import "_publication.scss"; @import "_supplier-a-to-z.scss";