From 9a026237080773c1989a5058618e0cf7b3313380 Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Mon, 13 Feb 2017 18:47:21 +0000 Subject: [PATCH 1/5] Update admin frontend for new toolkit --- app/assets/javascripts/_selection-buttons.js | 5 +- app/assets/scss/application.scss | 9 +- app/templates/macros/forms.html | 185 ------------------- bower.json | 4 +- package.json | 2 +- 5 files changed, 9 insertions(+), 196 deletions(-) delete mode 100644 app/templates/macros/forms.html diff --git a/app/assets/javascripts/_selection-buttons.js b/app/assets/javascripts/_selection-buttons.js index 1641a8bfd..457c93256 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/application.scss b/app/assets/scss/application.scss index 445ef108b..bd4b92f8f 100644 --- a/app/assets/scss/application.scss +++ b/app/assets/scss/application.scss @@ -1,5 +1,10 @@ $path: "/admin/static/images/"; +/* Blocks shared between multiple selectors */ +@import "toolkit/shared_placeholders/_dm-typography.scss"; +@import "toolkit/shared_placeholders/_placeholders.scss"; +@import "toolkit/shared_placeholders/_temporary-messages.scss"; + // Digital Marketplace front end toolkit components @import "forms/_option-select.scss"; @import "forms/_keyword-search.scss"; @@ -23,10 +28,6 @@ $path: "/admin/static/images/"; @import "toolkit/previous-next-navigation"; @import "toolkit/secondary-action-link"; -/* Blocks shared between multiple selectors */ -@import "shared_placeholders/_temporary-messages.scss"; -@import "shared_placeholders/_dm-typography.scss"; - // Admin app styles @import "_reset"; @import "_footer"; diff --git a/app/templates/macros/forms.html b/app/templates/macros/forms.html deleted file mode 100644 index a0978d280..000000000 --- a/app/templates/macros/forms.html +++ /dev/null @@ -1,185 +0,0 @@ -{% macro question_wrapper_open(question) -%} -
- - {% if "hint" in question %} -

- {{ question.hint }} -

- {% endif %} -{%- endmacro %} - -{% macro question_wrapper_close(question) -%} -
-{%- endmacro %} - -{% macro validation_wrapper_open() -%} -
-{%- endmacro %} - -{% macro validation_wrapper_close() -%} -
-{%- endmacro %} - -{% macro validation_message(message, question_id) -%} -

- {{ message }} -

-{%- endmacro %} - -{% macro textbox(field, value='', service_data=None) -%} - -{%- endmacro %} - -{% macro text(field, value='', service_data=None) -%} - -{%- endmacro %} - -{% macro textbox_large(field, value='', service_data=None) -%} - {% if field.max_length_in_words %} -
- -
- {% else %} - - {% endif %} -{%- endmacro %} - -{% macro upload(question, value='', service_data=None) -%} -

- {{ value }} -

- -{%- endmacro %} - -{% macro radios(question, value='', service_data=None) -%} - {% for option in question.options %} - {{ _selection_button("radio", question.id, option.label, service_data) }} - {% endfor %} -{%- endmacro%} - -{% macro _selection_button(type, name, label, service_data=None) -%} - -{%- endmacro %} - -{% macro boolean(question, value='', service_data=None) -%} - - -{%- endmacro %} - -{% macro pricing(field, value='', service_data=None) -%} -
-
- - -
-
- to -
-
- -

- Optional -

- -
-
- per -
-
- - -
-
- per -
-
- -

- Optional -

- -
-
-{% endmacro -%} - -{% macro option(label, current) -%} - {% if label == current %} - - {% else %} - - {% endif %} -{% endmacro -%} - - -{% macro list(field, value='', service_data=None) -%} -
- {% for index in range(10) %} - {{ list_item( - field.id, - index, - index + 1, - value, - field.listItemName - ) }} - {% endfor %} -
-{% endmacro -%} - -{% macro list_item(name, index, number, values, list_item_name) %} -
- - -
-{% endmacro %} diff --git a/bower.json b/bower.json index f34c02d4a..56d1749b3 100644 --- a/bower.json +++ b/bower.json @@ -3,8 +3,8 @@ "version": "0.0.1", "dependencies": { "jquery": "1.11.2", - "digitalmarketplace-frontend-toolkit": "https://github.com/alphagov/digitalmarketplace-frontend-toolkit.git#v19.2.1", - "govuk_template": "https://github.com/alphagov/govuk_template/releases/download/v0.17.3/jinja_govuk_template-0.17.3.tgz", + "digitalmarketplace-frontend-toolkit": "https://github.com/alphagov/digitalmarketplace-frontend-toolkit.git#v20.0.0", + "govuk_template": "https://github.com/alphagov/govuk_template/releases/download/v0.19.2/jinja_govuk_template-0.19.2.tgz", "digitalmarketplace-frameworks": "https://github.com/alphagov/digitalmarketplace-frameworks.git#v5.5.0", "hogan": "3.0.2", "c3": "0.4.10" diff --git a/package.json b/package.json index 062ddf04b..eac5f12d0 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "dependencies": { "bower": "1.7.1", "del": "1.1.1", - "govuk_frontend_toolkit": "4.12.0", + "govuk_frontend_toolkit": "5.0.3", "gulp": "3.8.7", "gulp-filelog" : "0.4.1", "gulp-include": "1.1.1", From e994354705a7a3d729f50bc6866799d039b9b14c Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Sat, 18 Feb 2017 16:45:27 +0000 Subject: [PATCH 2/5] 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. (Same as: https://github.com/alphagov/digitalmarketplace-buyer-frontend/pull/444/commits/be3e99422aded247a0f07a395d139d55f726828a) --- app/assets/javascripts/application.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index decf1e003..5dd7f98dd 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -12,6 +12,9 @@ //= include ../../../bower_components/digitalmarketplace-frontend-toolkit/toolkit/javascripts/list-entry.js //= include ../../../bower_components/digitalmarketplace-frontend-toolkit/toolkit/javascripts/word-counter.js //= include ../../../node_modules/govuk_frontend_toolkit/javascripts/govuk/selection-buttons.js + +; // JavaScript in the govuk_frontend_toolkit doesn't have trailing semicolons + //= include _selection-buttons.js //= include _scroll-through-statistics.js //= include _tables-to-charts.js From 14d993cfd6a701f51b73bc4812c46157efce2733 Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Sat, 18 Feb 2017 17:10:02 +0000 Subject: [PATCH 3/5] Fix styles for forgotten password link Our secondary action links on the login page is closely associated with the field is sits under (ie, the "forgotten password" link belongs next to the "password" field), so these styles -- the same as in the buyer app -- bring them closer together. (See: https://github.com/alphagov/digitalmarketplace-buyer-frontend/pull/444/commits/a0085eaf57a0bad46343a1802b3f154122915183) --- app/assets/scss/application.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/assets/scss/application.scss b/app/assets/scss/application.scss index bd4b92f8f..6915710a7 100644 --- a/app/assets/scss/application.scss +++ b/app/assets/scss/application.scss @@ -82,3 +82,8 @@ $path: "/admin/static/images/"; .break-email { word-break: break-all; } + +.question + .secondary-action-link { + margin-top: -36px; + margin-bottom: 40px; +} From 04dd754e87d5215b5ab81a2d7fd723ce354ae375 Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Sat, 18 Feb 2017 17:54:08 +0000 Subject: [PATCH 4/5] 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/login.html | 2 +- app/templates/view_supplier_users.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/templates/login.html b/app/templates/login.html index 0a4848aeb..fc421648a 100644 --- a/app/templates/login.html +++ b/app/templates/login.html @@ -41,7 +41,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/view_supplier_users.html b/app/templates/view_supplier_users.html index 7cc9cfab2..90f33c581 100644 --- a/app/templates/view_supplier_users.html +++ b/app/templates/view_supplier_users.html @@ -160,7 +160,7 @@
{% endif %}
- {{ invite_form.email_address.label(class="question-heading-with-hint") }} + {{ invite_form.email_address.label(class="question-heading") }}

Enter the email address of the person you wish to invite

@@ -189,7 +189,7 @@
{% endif %}
- {{ move_user_form.user_to_move_email_address.label(class="question-heading-with-hint") }} + {{ move_user_form.user_to_move_email_address.label(class="question-heading") }}

Enter the email address of the existing user you wish to move to this supplier

From 87a25c289b346ee06c1cfe24dfe86d2b58bc6191 Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Sat, 18 Feb 2017 18:02:08 +0000 Subject: [PATCH 5/5] 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 | 4 +++- 2 files changed, 18 insertions(+), 1 deletion(-) 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..31d2efe6d --- /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||{}]); \ No newline at end of file diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 5dd7f98dd..72420fca8 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -12,10 +12,12 @@ //= include ../../../bower_components/digitalmarketplace-frontend-toolkit/toolkit/javascripts/list-entry.js //= include ../../../bower_components/digitalmarketplace-frontend-toolkit/toolkit/javascripts/word-counter.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 ; // JavaScript in the govuk_frontend_toolkit doesn't have trailing semicolons -//= include _selection-buttons.js //= include _scroll-through-statistics.js +//= include _selection-buttons.js +//= include _shim-links-with-button-role.js //= include _tables-to-charts.js //= include ../../../bower_components/digitalmarketplace-frontend-toolkit/toolkit/javascripts/module-loader.js