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

Improve print styles for inverse-header component #4179

Merged
merged 2 commits into from
Sep 2, 2024

Conversation

matthillco
Copy link
Contributor

@matthillco matthillco commented Aug 28, 2024

What

This improves the print styles for the inverse-header component as part of the work to improve print styles for page layouts:

  • Padding is removed for better alignment with printed page content

Trello

Why

Although we made improvements to this component as part of #4073, we did not look at how the component might interact with other components on the page. This PR further improves the component in context of page types.

Visual Changes

Before and After: Component Preview

imageimage

Before and After: Component on a HTML Publication page

imageimage

@govuk-ci govuk-ci temporarily deployed to components-gem-pr-4179 August 28, 2024 15:49 Inactive
@matthillco matthillco force-pushed the print-styles-inverse-header branch from e4323bc to 336b2a8 Compare August 30, 2024 11:38
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-4179 August 30, 2024 11:38 Inactive
@matthillco matthillco force-pushed the print-styles-inverse-header branch from 336b2a8 to 9be12e7 Compare August 30, 2024 11:44
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-4179 August 30, 2024 11:44 Inactive
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-4179 August 30, 2024 22:02 Inactive
@matthillco matthillco changed the title [WIP] Improve print styles for inverse-header component Improve print styles for inverse-header component Sep 2, 2024
Copy link
Contributor

@AshGDS AshGDS left a comment

Choose a reason for hiding this comment

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

Looks good - but similar to the other review, does it need this much top and bottom padding?

@matthillco
Copy link
Contributor Author

Looks good - but similar to the other review, does it need this much top and bottom padding?

It's been reviewed by Nikin and we've kept some of that internal top and bottom padding as it allows breathing space between elements of the page. If the padding is reduced too much, the design suffers and becomes harder to scan.

Copy link
Contributor

@AshGDS AshGDS left a comment

Choose a reason for hiding this comment

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

Thanks @matthillco - LGTM in that case.

@matthillco matthillco removed the request for review from andysellick September 2, 2024 16:22
@matthillco matthillco force-pushed the print-styles-inverse-header branch from eb251ae to 39a0382 Compare September 2, 2024 16:26
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-4179 September 2, 2024 16:27 Inactive
@matthillco matthillco merged commit 670e9ae into main Sep 2, 2024
12 checks passed
@matthillco matthillco deleted the print-styles-inverse-header branch September 2, 2024 16:31
@matthillco matthillco mentioned this pull request Sep 3, 2024
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