Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prepare for layout component #2802

Merged
merged 11 commits into from
Jun 21, 2021
Merged

Prepare for layout component #2802

merged 11 commits into from
Jun 21, 2021

Conversation

chris-gds
Copy link
Contributor

@chris-gds chris-gds commented Jun 4, 2021

What?

Update frontend app to use gem_layout template from static.

Why?

As part of on-going a11y work to align architecture & use Components. To ensure consistency and future proof to allow a11y improvements to cascade across the site.

Selection of visuals differences

Slight changes, some manual spacing adjustments have been made to mimic current design.

Page Diff Live Preview
Live Dev  - firefox diff  - firefox live  - firefox preview
Live Dev apply-council-tax-reduction - firefox diff apply-council-tax-reduction - firefox live apply-council-tax-reduction - firefox preview
Live Dev apply-for-disabled-bus-pass - firefox diff apply-for-disabled-bus-pass - firefox live apply-for-disabled-bus-pass - firefox preview
Live Dev apply-free-school-meals - firefox diff apply-free-school-meals - firefox live apply-free-school-meals - firefox preview
Live Dev bank-holidays - firefox diff bank-holidays - firefox live bank-holidays - firefox preview
Live Dev check-a-passport-travel-europe - firefox diff check-a-passport-travel-europe - firefox live check-a-passport-travel-europe - firefox preview
Live Dev check-legal-aid - firefox diff check-legal-aid - firefox live check-legal-aid - firefox preview
Live Dev check-medicines-online - firefox diff check-medicines-online - firefox live check-medicines-online - firefox preview
Live Dev check-mot-history - firefox diff check-mot-history - firefox live check-mot-history - firefox preview
Live Dev claim-tax-refund__y__pay-from-a-previous-job__yes - firefox diff claim-tax-refund__y__pay-from-a-previous-job__yes - firefox live claim-tax-refund__y__pay-from-a-previous-job__yes - firefox preview
Live Dev contact-electoral-registration-office - firefox diff contact-electoral-registration-office - firefox live contact-electoral-registration-office - firefox preview
Live Dev contact-the-dvla__y__ - firefox diff contact-the-dvla__y__ - firefox live contact-the-dvla__y__ - firefox preview
Live Dev contact-the-dvla__y__something-else - firefox diff contact-the-dvla__y__something-else - firefox live contact-the-dvla__y__something-else - firefox preview
Live Dev done__driving-transaction-finished - firefox diff done__driving-transaction-finished - firefox live done__driving-transaction-finished - firefox preview
Live Dev done__register-flood-risk-exemption - firefox diff done__register-flood-risk-exemption - firefox live done__register-flood-risk-exemption - firefox preview
Live Dev done__register-waste-exemption - firefox diff done__register-waste-exemption - firefox live done__register-waste-exemption - firefox preview
Live Dev done__transaction-finished - firefox diff done__transaction-finished - firefox live done__transaction-finished - firefox preview
Live Dev done__waste-carrier-or-broker-registration - firefox diff done__waste-carrier-or-broker-registration - firefox live done__waste-carrier-or-broker-registration - firefox preview
Live Dev find-a-job - firefox diff find-a-job - firefox live find-a-job - firefox preview
Live Dev find-covid-19-lateral-flow-test-site - firefox diff find-covid-19-lateral-flow-test-site - firefox live find-covid-19-lateral-flow-test-site - firefox preview
Live Dev find-local-council - firefox diff find-local-council - firefox live find-local-council - firefox preview
Live Dev find-theory-test-centre - firefox diff find-theory-test-centre - firefox live find-theory-test-centre - firefox preview
Live Dev foreign-travel-advice - firefox diff foreign-travel-advice - firefox live foreign-travel-advice - firefox preview
Live Dev gwyliau-banc - firefox diff gwyliau-banc - firefox live gwyliau-banc - firefox preview
Live Dev help - firefox diff help - firefox live help - firefox preview
Live Dev help__cookies - firefox diff help__cookies - firefox live help__cookies - firefox preview
Live Dev id-scan-eu-settlement-scheme - firefox diff id-scan-eu-settlement-scheme - firefox live id-scan-eu-settlement-scheme - firefox preview
Live Dev mot-testing-service - firefox diff mot-testing-service - firefox live mot-testing-service - firefox preview
Live Dev order-coronavirus-rapid-lateral-flow-tests - firefox diff order-coronavirus-rapid-lateral-flow-tests - firefox live order-coronavirus-rapid-lateral-flow-tests - firefox preview
Live Dev pay-council-tax - firefox diff pay-council-tax - firefox live pay-council-tax - firefox preview
Live Dev provide-journey-contact-details-before-travel-uk - firefox diff provide-journey-contact-details-before-travel-uk - firefox live provide-journey-contact-details-before-travel-uk - firefox preview
Live Dev register-offices - firefox diff register-offices - firefox live register-offices - firefox preview
Live Dev register-to-vote - firefox diff register-to-vote - firefox live register-to-vote - firefox preview
Live Dev renew-driving-licence-at-70 - firefox diff renew-driving-licence-at-70 - firefox live renew-driving-licence-at-70 - firefox preview
Live Dev report-child-abuse-to-local-council - firefox diff report-child-abuse-to-local-council - firefox live report-child-abuse-to-local-council - firefox preview
Live Dev roadmap - firefox diff roadmap - firefox live roadmap - firefox preview
Live Dev rubbish-collection-day - firefox diff rubbish-collection-day - firefox live rubbish-collection-day - firefox preview
Live Dev school-term-holiday-dates - firefox diff school-term-holiday-dates - firefox live school-term-holiday-dates - firefox preview
Live Dev settle-in-the-uk - firefox diff settle-in-the-uk - firefox live settle-in-the-uk - firefox preview
Live Dev tour - firefox diff tour - firefox live tour - firefox preview
Live Dev ukonline-centre-internet-access-computer-training - firefox diff ukonline-centre-internet-access-computer-training - firefox live ukonline-centre-internet-access-computer-training - firefox preview
Live Dev vehicle-tax - firefox diff vehicle-tax - firefox live vehicle-tax - firefox preview
Live Dev when-do-the-clocks-change - firefox diff when-do-the-clocks-change - firefox live when-do-the-clocks-change - firefox preview

Anything else?

Related PRs

Original PR (merged premature)

Enhancement PR:
Remove duplicate <headers>

Resolve e2e PR
alphagov/govuk_publishing_components#2101

Adding additional URLs to README for ref.
#2793

Related PR on collections

There was an issue highlighted on the calendars (after initial merge) that's also been updated.
#2800


Converting the layout to the gem version resulted in the lookup pattern not inheriting the relevant styling correctly. Upon inspection, this is due to elements from the gem like fieldset not being utilised within frontend and therefore not using the shared classes - this has been manually adjusted.

Example page:

http://www.gov.uk/find-electoral-things

Screenshot 2021-05-31 at 15 06 18

Solution

This ties into the issue raised here:
alphagov/govuk_publishing_components#2096

Should the lookup pattern be it's own Component or use a common combination of Components (fieldset, input, button etc) these discrepancies would reduce.

@bevanloon bevanloon temporarily deployed to govuk-fronte-swap-gem-l-ie4zma June 4, 2021 14:21 Inactive
@chris-gds chris-gds changed the title Swap gem layout reduced Swap to gem layout Jun 4, 2021
@chris-gds chris-gds changed the title Swap to gem layout Prepare for layout component Jun 4, 2021
@chris-gds chris-gds marked this pull request as ready for review June 4, 2021 15:51
@chris-gds chris-gds requested review from owenatgov and injms June 4, 2021 15:53
@injms injms mentioned this pull request Jun 7, 2021
@bevanloon bevanloon temporarily deployed to govuk-fronte-swap-gem-l-ie4zma June 7, 2021 15:04 Inactive
@bevanloon bevanloon temporarily deployed to govuk-fronte-swap-gem-l-ie4zma June 8, 2021 13:33 Inactive
@bevanloon bevanloon temporarily deployed to govuk-fronte-swap-gem-l-ie4zma June 8, 2021 13:36 Inactive
@@ -6,7 +6,7 @@ class CalendarController < ApplicationController

rescue_from Calendar::CalendarNotFound, with: :simple_404

slimmer_template "core_layout"
slimmer_template "gem_layout"
Copy link
Contributor

@injms injms Jun 14, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be safely removed as it'll inherit from ApplicationController

Copy link
Contributor

@injms injms left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A quick rebase, and this is good to go 🎉 🚀

@chris-gds
Copy link
Contributor Author

@injms - updated re the comments, rebased + updated the diff table so it captures the these changes (to ensure it's accurate / most recent)

@chris-gds chris-gds force-pushed the swap-gem-layout-reduced branch 2 times, most recently from 7753dfa to ad322cf Compare June 15, 2021 14:30
@chris-gds
Copy link
Contributor Author

Hey @injms I don't have auth - do the honours?

Chris Yoong added 4 commits June 16, 2021 13:29
Update to remove redundant classes and tags, slight margin adjustment
Changing some templates to use the full-width layout.
Change layout & dependancies

- Remove redundant feedback element (appeared twice on page)

- Example Page: /find-local-council
Update to resolve visual differences for frontend swap, changes resolve a border that is around the lookup element

Remove borders / padding from swap on:
"/foreign-travel-advice"
to maintain existing visuals.
to include Design System class
+ add margin to replace spacing between lookup and feedback.
eg: /find-local-council
Chris Yoong added 6 commits June 16, 2021 13:29
Adjust grid to match Design System + slight margin adjustments to mimic current design
- Update "/settle-in-the-uk" flow to use Design System grid, 
- Remove redundant CSS
- Adjust Design to maintain or align.
Redundant as gem_layout_full_width replaces this.
Updating pages 
"/when-do-the-clocks-change" 
"/bank-holidays"

To align to the Design System structure of page layout
Updating frontend to use the gem_layout
Remove unused CSS
Remove CSS not in use, adjust margins for images to mimic live
Restore Cookie Settings
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants