Configure asset helper to load individual stylesheets #3029
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21d7c84 to
8cd8bdb
Compare
f196bec to
bdc663c
Compare
bdc663c to
26a6d19
Compare
26a6d19 to
793fb2d
Compare
793fb2d to
efac733
Compare
efac733 to
eb2ab0d
Compare
eb2ab0d to
9abde83
Compare
9abde83 to
11df615
Compare
KludgeKML
approved these changes
Mar 30, 2023
jon-kirwan
approved these changes
Mar 31, 2023
Print styles have moved to the `finder-frontend` stylesheet below the related class name. Print styles for `.document`, `.document-metadata` and `.feed` were removed as they did not target any elements.
- Hoist body content in application layout - Call AssetHelper helper `render_component_stylesheets` - Remove GOV.UK Component stylesheets from application stylesheet
The only styles present for `date-filter` were to set values for margin-bottom, however these were always overridden by the `.govuk-!-margin-bottom-0` utility class in the view template. Remove `email-link` component as it was not used in the application.
- Include the select component stylesheet manually, since the `gem-c-select` is currently hardcoded in the view template, the stylesheet is not automatically included - Nested the style rules for `sort-options__label` and `sort-options__select` within `sort-options`. This was done to fix styling issues by increasing the CSS specificity to override values set in `.govuk-label`
Ensure the override for `margin-bottom` is applied. This is done by nesting the rule for `.gem-c-intervention` within `.finder-frontend-content` to increase CSS specificity.
Nest gem-c overrides in `.finder-frontend-content`. Although I could not see any issues when testing, it makes sense to also move the other overrides now to help avoid any issues when making changes in the future.
When the partial is cached, the helper methods called to add the stylesheets are not called. By calling the methods before caching is enabled, we ensure that the stylesheets are always requested.
11df615 to
5da81f5
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
Changes to load component and view style sheets only required on the page being viewed.
Trello card: https://trello.com/c/ZiXZCjnZ/1871-enable-individual-loading-of-stylesheets-in-finder-frontend
Why
This reduces the amount of CSS required for each page and increases the ability of a browser to cache the stylesheets - this should mean a faster load time for both first time and repeat visitors.
See RFC #149 for more details.
Review URL(s)
.metadata-summaryAnything else
finder-frontendstylesheet and the print.css file was removed, this approach is consistent with other frontend rendering appsemail-linkcomponent as it was not in usedate-filterstylesheet as it is not required. The only styles present were to set a bottom margin, however these were always overridden by the.govuk-!-margin-bottom-0class in the view templateIssues fixed
option-selectcomponent not rendered correctly on subsequent page visitsWhen testing the finder on both Integration and Heroku, the option-select component was not rendering correctly after the first page visit.
This was down to the caching of the partial. When the partial is cached, the helper methods to add the required stylesheets are not called. By calling the methods before caching is enabled, we ensure that the stylesheets are always requested.
Fix option-select component rendering issue
Correct margin-bottom not applied to
govuk-checkboxes__labelgovuk-checkboxes__labelsetsmargin-bottom: 5px, one some pages this was overridden by the margin set ingovuk-label. This was fixed by using the existing override approach in the application and nesting.govuk-checkboxes__labelwithin.finder-frontend-contentto give it a higher specificity value - Ensure checkbox labels always have 0 bottom-marginFollow these steps if you are doing a Rails upgrade.