From a85f7fa2c1a9ae04e4abc250660dc60ef64b02af Mon Sep 17 00:00:00 2001 From: Katie Smith Date: Thu, 20 Feb 2020 16:55:56 +0000 Subject: [PATCH] Replace the `.column-...` classes in _grids.scss We had 7 classes in _grids.scss named `.column-...` which were being used to give a certain column width. These worked by using `@include grid column()`, which is now deprecated. `.column-whole` and `.column-three-quarters` can be removed and replaced with `govuk-grid-column-full` and `govuk-grid-column-three-quarters` respectively. The other column classes don't have a direct replacment in GOV.UK Frontend. To get round this, we overwrite the `$govuk-grid-width` SASS map in `extensions.scss` to add in extra widths, then use this with the `govuk-grid-column` mixin to create new classes in for our custom widths in `_grids.scss` --- app/assets/stylesheets/_grids.scss | 29 +++++++------------ .../govuk-frontend/extensions.scss | 13 +++++++++ app/templates/content_template.html | 2 +- app/templates/org_template.html | 2 +- app/templates/partials/tour.html | 12 ++++---- .../views/agreement/agreement-accept.html | 2 +- .../views/agreement/agreement-confirm.html | 2 +- .../agreement/service-agreement-choose.html | 2 +- .../agreement/service-agreement-signed.html | 2 +- .../views/agreement/service-agreement.html | 2 +- .../callbacks/delivery-status-callback.html | 2 +- .../received-text-messages-callback.html | 2 +- app/templates/views/choose-account.html | 6 ++-- app/templates/views/edit-email-template.html | 4 +-- app/templates/views/edit-letter-template.html | 4 +-- app/templates/views/edit-sms-template.html | 2 +- .../views/edit-user-permissions.html | 2 +- .../views/email-branding/manage-branding.html | 2 +- .../find-services/find-services-by-name.html | 2 +- .../views/find-users/find-users-by-email.html | 2 +- .../views/find-users/user-information.html | 2 +- .../manage-letter-branding.html | 2 +- .../manage-users/confirm-edit-user-email.html | 2 +- .../confirm-edit-user-mobile-number.html | 2 +- .../views/manage-users/edit-user-mobile.html | 2 +- app/templates/views/notifications.html | 2 +- .../views/organisations/add-organisation.html | 2 +- app/templates/views/organisations/index.html | 4 +-- .../organisation/settings/edit-agreement.html | 2 +- .../settings/edit-crown-status.html | 2 +- .../organisation/settings/edit-domains.html | 2 +- .../settings/edit-go-live-notes.html | 2 +- .../settings/edit-name/confirm.html | 2 +- .../organisation/users/user/index.html | 2 +- .../views/platform-admin/_base_template.html | 2 +- .../views/providers/edit-provider.html | 2 +- .../views/returned-letter-summary.html | 2 +- .../views/service-settings/confirm.html | 2 +- .../views/service-settings/delete.html | 2 +- .../service-settings/email_reply_to.html | 4 +-- .../service-settings/estimate-usage.html | 2 +- .../letter-contact-details.html | 2 +- .../service-settings/letter-contact/add.html | 2 +- .../service-settings/request-to-go-live.html | 2 +- .../service-settings/send-files-by-email.html | 2 +- .../views/service-settings/set-auth-type.html | 2 +- .../views/service-settings/set-email.html | 2 +- .../service-settings/set-inbound-sms.html | 2 +- .../set-international-sms.html | 2 +- .../views/service-settings/set-letter.html | 2 +- .../service-settings/set-service-setting.html | 2 +- .../views/service-settings/set-sms.html | 2 +- .../views/service-settings/sms-senders.html | 2 +- app/templates/views/styleguide.html | 4 +-- app/templates/views/templates/_template.html | 4 +-- .../views/templates/_template_history.html | 4 +-- .../views/templates/action_blocked.html | 2 +- .../views/templates/breaking-change.html | 2 +- .../views/templates/choose-reply.html | 2 +- app/templates/views/templates/choose.html | 4 +-- .../templates/edit-template-postage.html | 4 +-- .../templates/manage-template-folder.html | 2 +- app/templates/views/templates/set-sender.html | 2 +- .../views/templates/set-template-sender.html | 2 +- app/templates/views/templates/template.html | 2 +- app/templates/views/uploads/choose-file.html | 2 +- .../views/user-profile/authenticate.html | 2 +- .../views/user-profile/change-password.html | 2 +- app/templates/views/user-profile/change.html | 2 +- app/templates/views/user-profile/confirm.html | 2 +- .../disable-platform-admin-view.html | 2 +- app/templates/withnav_template.html | 2 +- tests/app/main/views/test_agreement.py | 2 +- tests/app/main/views/test_email_branding.py | 2 +- tests/app/main/views/test_letter_branding.py | 2 +- tests/app/main/views/test_templates.py | 4 +-- .../stick-to-window-when-scrolling.test.js | 4 +-- 77 files changed, 117 insertions(+), 111 deletions(-) diff --git a/app/assets/stylesheets/_grids.scss b/app/assets/stylesheets/_grids.scss index 024091fb3..4efe1f317 100644 --- a/app/assets/stylesheets/_grids.scss +++ b/app/assets/stylesheets/_grids.scss @@ -1,29 +1,22 @@ -.column-whole { - @include grid-column(1/1); + +.govuk-grid-column-one-sixth { + @include govuk-grid-column(one-sixth, $class: false); } -.column-three-quarters { - @include grid-column(3/4); +.govuk-grid-column-five-sixths { + @include govuk-grid-column(five-sixths, $class: false); } -.column-one-sixth { - @include grid-column(1/6); +.govuk-grid-column-one-eighth { + @include govuk-grid-column(one-eighth, $class: false); } -.column-five-sixths { - @include grid-column(5/6); +.govuk-grid-column-five-eighths { + @include govuk-grid-column(five-eighths, $class: false); } -.column-one-eighth { - @include grid-column(1/8); -} - -.column-five-eighths { - @include grid-column(5/8); -} - -.column-seven-eighths { - @include grid-column(7/8); +.govuk-grid-column-seven-eighths { + @include govuk-grid-column(seven-eighths, $class: false); } %top-gutter, diff --git a/app/assets/stylesheets/govuk-frontend/extensions.scss b/app/assets/stylesheets/govuk-frontend/extensions.scss index dfb5d7ae7..80cce8a3b 100644 --- a/app/assets/stylesheets/govuk-frontend/extensions.scss +++ b/app/assets/stylesheets/govuk-frontend/extensions.scss @@ -35,3 +35,16 @@ .govuk-link--destructive { @include govuk-link-style-destructive-no-visited-state; } +$govuk-grid-widths: ( + one-eighth: 12.5%, + one-sixth: 16.6666%, + one-quarter: 25%, + one-third: 33.3333%, + one-half: 50%, + five-eighths: 62.5%, + two-thirds: 66.6666%, + three-quarters: 75%, + five-sixths: 83.3333%, + seven-eighths: 87.5%, + full: 100% +); diff --git a/app/templates/content_template.html b/app/templates/content_template.html index 286bce5f4..d1476c0e8 100644 --- a/app/templates/content_template.html +++ b/app/templates/content_template.html @@ -14,7 +14,7 @@
{{ sub_navigation(navigation_links) }}
-
+
{% else %}
{% endif %} diff --git a/app/templates/org_template.html b/app/templates/org_template.html index 69cd70a5c..2088b05cf 100644 --- a/app/templates/org_template.html +++ b/app/templates/org_template.html @@ -19,7 +19,7 @@
{% include "org_nav.html" %}
-
+
{% block beforeContent %}{% endblock %}
{% block content %} diff --git a/app/templates/partials/tour.html b/app/templates/partials/tour.html index 737d1605a..e4ea7f74b 100644 --- a/app/templates/partials/tour.html +++ b/app/templates/partials/tour.html @@ -3,30 +3,30 @@ {% call banner_wrapper(type='tour') %}

Try sending yourself this example

-
+

1.

-
+

Every message is sent from a template

-
+

2.

-
+

The template pulls in the data you provide

-
+

3.

-
+

Notify delivers the message

diff --git a/app/templates/views/agreement/agreement-accept.html b/app/templates/views/agreement/agreement-accept.html index 2e0aa2b1d..8a01e952a 100644 --- a/app/templates/views/agreement/agreement-accept.html +++ b/app/templates/views/agreement/agreement-accept.html @@ -13,7 +13,7 @@ {% block maincolumn_content %}
-
+
{{ page_header( 'Accept our data sharing and financial agreement', diff --git a/app/templates/views/agreement/agreement-confirm.html b/app/templates/views/agreement/agreement-confirm.html index caf6ecf08..dd21769ad 100644 --- a/app/templates/views/agreement/agreement-confirm.html +++ b/app/templates/views/agreement/agreement-confirm.html @@ -10,7 +10,7 @@ {% block maincolumn_content %}
-
+
{{ page_header( 'Confirm that you accept the agreement', diff --git a/app/templates/views/agreement/service-agreement-choose.html b/app/templates/views/agreement/service-agreement-choose.html index 1199a1469..31c466636 100644 --- a/app/templates/views/agreement/service-agreement-choose.html +++ b/app/templates/views/agreement/service-agreement-choose.html @@ -8,7 +8,7 @@ {% block maincolumn_content %}
-
+
{{ page_header( 'Accept the data sharing and financial agreement', diff --git a/app/templates/views/agreement/service-agreement-signed.html b/app/templates/views/agreement/service-agreement-signed.html index 160690b9b..0f14b14a3 100644 --- a/app/templates/views/agreement/service-agreement-signed.html +++ b/app/templates/views/agreement/service-agreement-signed.html @@ -8,7 +8,7 @@ {% block maincolumn_content %}
-
+
{{ page_header( 'Your organisation has already accepted the agreement', diff --git a/app/templates/views/agreement/service-agreement.html b/app/templates/views/agreement/service-agreement.html index ab97a5092..5f6e94468 100644 --- a/app/templates/views/agreement/service-agreement.html +++ b/app/templates/views/agreement/service-agreement.html @@ -9,7 +9,7 @@ {% block maincolumn_content %}
-
+
{{ page_header( 'Accept our data sharing and financial agreement', diff --git a/app/templates/views/api/callbacks/delivery-status-callback.html b/app/templates/views/api/callbacks/delivery-status-callback.html index e14a54b6c..c2efcacdd 100644 --- a/app/templates/views/api/callbacks/delivery-status-callback.html +++ b/app/templates/views/api/callbacks/delivery-status-callback.html @@ -10,7 +10,7 @@ {% block maincolumn_content %}
-
+
{{ page_header( 'Callbacks for delivery receipts', diff --git a/app/templates/views/api/callbacks/received-text-messages-callback.html b/app/templates/views/api/callbacks/received-text-messages-callback.html index 5adcbae1e..d592ee704 100644 --- a/app/templates/views/api/callbacks/received-text-messages-callback.html +++ b/app/templates/views/api/callbacks/received-text-messages-callback.html @@ -14,7 +14,7 @@ back_link=url_for('.api_callbacks', service_id=current_service.id) ) }}
-
+

When you receive a text message in Notify, we can forward it to your system. Check the callback documentation for more information. diff --git a/app/templates/views/choose-account.html b/app/templates/views/choose-account.html index 74d3b8293..87b593d99 100644 --- a/app/templates/views/choose-account.html +++ b/app/templates/views/choose-account.html @@ -14,7 +14,7 @@ {{ heading }}

-
+
    {% else %}
      @@ -62,7 +62,7 @@ Platform admin
-
    +
    • All organisations

      @@ -106,7 +106,7 @@

       
      -
      +
      {% endif %} {{ govukButton({ "element": "a", diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html index 988b6bb09..43f6a3a34 100644 --- a/app/templates/views/edit-email-template.html +++ b/app/templates/views/edit-email-template.html @@ -18,7 +18,7 @@ {% call form_wrapper() %}
      -
      +
      {{ textbox(form.name, width='1-1', hint='Your recipients will not see this', rows=10) }} {{ textbox(form.subject, width='1-1', highlight_placeholders=True, rows=2) }} {{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=8) }} @@ -29,7 +29,7 @@ 'Save' ) }}
      -