Add display override for hiding content when printing #1723
Conversation
NickColley
added
awaiting triage
|
@NickColley I think we need both. Components should have good print styles out of the box. But sometimes it's not clear if a component should be printed or not – for instance a breadcrumb may sometimes be useful to print as it shows the hierarchy or context of some content, whereas at other times it's simply a navigational aid and can be hidden. In our case we are printing an application and all its completed fields. Which means hiding a lot from the print view so that it's clean and appears similar to a completed paper form. |
|
We're happy to accept this, would you mind adding a feature CHANGELOG entry that introduces the new class? You can look at other feature CHANGELOG entries for examples. I can do this on your behalf if you'd prefer that. |
|
I've added a changelog entry. Happy for you to amend if it's not quite right. |
src/govuk/overrides/_display.scss
Outdated
| @@ -19,4 +19,10 @@ | |||
| .govuk-\!-display-none { | |||
| display: none !important; | |||
| } | |||
|
|
|||
| @include govuk-media-query($media-type: print) { | |||
| .govuk-\!-print-display-none { | |||
There was a problem hiding this comment.
Sorry for this after approving things.
Can we be careful to consider this naming vs all the other overrides?
Perhaps this should be .govuk-\!-display-none-print as the format seems to be .govuk-\!-<PROPERTY>-<VALUE/SCALE>-<MEDIA>
There was a problem hiding this comment.
I've pinged the team on this...
There was a problem hiding this comment.
We put print first so that it was more easily differentiated from govuk-!-display-none.
print-display-none matches the order in the stylesheet:
@media print {
.blah {
display: none
}
}
There was a problem hiding this comment.
@36degrees @hannalaakso thoughts?
There was a problem hiding this comment.
As far as I can see, we don't have any other overrides that are conditional on media queries. Probably the closest existing class would be e.g. govuk-grid-column-one-third-from-desktop, where the 'media query' part is last?
If we did go with govuk-!-display-none-print that means it would also match if you searched your code base for govuk-\!-display-none, but that's also true for govuk-grid-column-one-third-from-desktop and govuk-grid-column-one-third and I'm not aware of that having been an issue for anyone.
|
What's happening with this PR now? |
|
@fofr sorry I think I got us confused and left this in an unresolved place. I'll work with the team to get consensus and reply to you, thanks for your patience. |
|
@fofr sorry for the delay, we decided that in order to keep consistency with the existing |
When printing users often need to print the content without the surrounding site furniture (eg menus, breadcrumbs, back links and footers). Introduce a helper so that a class can be used to hide any given element from the print view. This is explicit and preferable to listing all the selectors for things that shouldn't be printed. These lists grow unwieldy over time.
|
@NickColley PR updated. |
When printing users often need to print the content without the surrounding site furniture (eg menus, breadcrumbs, back links and footers).
Introduce a helper so that a class can be used to hide any given element from the print view:
This is explicit and preferable to listing all the selectors for things that shouldn't be printed. These lists grow unwieldy over time. (An example of one of these lists)
(We've been using this pattern on Apply for teacher training and Becoming a teacher: Design History)