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

refactor: Better handling of print CSS styles #3774

Merged
merged 1 commit into from
Oct 8, 2024
Merged

Conversation

ianjon3s
Copy link
Contributor

@ianjon3s ianjon3s commented Oct 8, 2024

What does this PR do?

Prompted by the work by @jamdelion to add a print button.

I prototyped a few different approaches here (force background colours to remain, council name as pseudo content in place of logo), but have arrived at a solution that beats all others.

A previous print CSS update removed the large areas of solid header/footer background colour on print (particularly the black of the footer which could take up almost a whole page), and placed a small container with background colour behind the logos. As noted by @jessicamcinchak, removing background colours in print options rendered these invisible (white logo was still in place on white background).

Using filter: invert(1) on the images ensure they are still visible regardless of print settings for background graphics, and allows us to keep background colours out of the header + footer.

Open the print dialogue to see changes:

Example with SVG council logo:
https://3774.planx.pizza/buckinghamshire/report-a-high-hedge/preview

Example with PNG council logo:
https://3774.planx.pizza/birmingham/find-out-if-you-need-planning-permission/preview

Copy link

github-actions bot commented Oct 8, 2024

Removed vultr server and associated DNS entries

@ianjon3s ianjon3s marked this pull request as ready for review October 8, 2024 10:59
@ianjon3s ianjon3s requested a review from a team October 8, 2024 11:00
Copy link
Contributor

@jamdelion jamdelion left a comment

Choose a reason for hiding this comment

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

Nice! I've tested a few different team pages in the print dialogue and the logos all look good!

Copy link
Member

@jessicamcinchak jessicamcinchak left a comment

Choose a reason for hiding this comment

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

Clever solution, thanks Ian!

@ianjon3s ianjon3s merged commit dc85fa8 into main Oct 8, 2024
12 checks passed
@ianjon3s ianjon3s deleted the ian/css-print-styles branch October 8, 2024 12:47
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