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

Add component print styles #1164

Merged
merged 11 commits into from
Oct 17, 2019
Merged

Add component print styles #1164

merged 11 commits into from
Oct 17, 2019

Conversation

andysellick
Copy link
Contributor

@andysellick andysellick commented Oct 14, 2019

What

We seem to be missing some print stylesheets for some components, where print styles would be sensible. This PR adds some.

Why

People print pages on GOV.UK.

Visual Changes

Screenshots are a bit pointless because most of these changes involve hiding things, but here's a summary.

Things I've not added print styles for:

  • I was originally going to hide all form elements (particularly the file upload component) but then realised people might actually want to print a form so they can see what fields they need so decided it was better to leave them all visible
  • I wanted to add print styles for the details component (the contents of a collapsed one are not shown in print) but apparently this isn't as simple as it might sound, so I've not done that for now
  • in theory if a modal dialog is open and someone prints the page it should be visible but as I don't think this is being used on public GOV.UK I don't think it's important right now
  • I assumed next and previous navigation wouldn't be needed when printed but it can contain information about the following and preceding pages, so I've left it visible
  • I wanted to hide the tabs part of the tabs component (but leave the content visible) but for some reason I can't fathom that caused a test to fail. I wasn't 100% sure about the change anyway, so I've not gone ahead with it for now

Screenshots

Component Before After
Button Screen Shot 2019-10-16 at 08 42 54 Screen Shot 2019-10-16 at 08 42 30
Textarea Screen Shot 2019-10-16 at 09 17 52 Screen Shot 2019-10-16 at 09 18 06

View Changes

https://govuk-publishing-compo-pr-1164.herokuapp.com/component-guide

This PR is related to alphagov/govuk-frontend#573

- search component is not useful when printed, so hiding entirely
- only a minor change, hides the menu button
@bevanloon bevanloon temporarily deployed to govuk-publishing-compo-pr-1164 October 14, 2019 16:54 Inactive
@bevanloon bevanloon temporarily deployed to govuk-publishing-compo-pr-1164 October 14, 2019 17:08 Inactive
- hide it entirely
@bevanloon bevanloon temporarily deployed to govuk-publishing-compo-pr-1164 October 14, 2019 17:11 Inactive
- buttons looked quite different depending on whether they were links or buttons and what size they were
- making all of them look consistent on print now, same font size, black outline, no arrows
@bevanloon bevanloon temporarily deployed to govuk-publishing-compo-pr-1164 October 14, 2019 20:00 Inactive
@bevanloon bevanloon temporarily deployed to govuk-publishing-compo-pr-1164 October 16, 2019 08:20 Inactive
@bevanloon bevanloon temporarily deployed to govuk-publishing-compo-pr-1164 October 16, 2019 15:04 Inactive
@bevanloon bevanloon temporarily deployed to govuk-publishing-compo-pr-1164 October 16, 2019 15:09 Inactive
@bevanloon bevanloon temporarily deployed to govuk-publishing-compo-pr-1164 October 16, 2019 17:04 Inactive
@bevanloon bevanloon temporarily deployed to govuk-publishing-compo-pr-1164 October 16, 2019 17:06 Inactive
@bevanloon bevanloon temporarily deployed to govuk-publishing-compo-pr-1164 October 17, 2019 09:26 Inactive
@bevanloon bevanloon temporarily deployed to govuk-publishing-compo-pr-1164 October 17, 2019 09:29 Inactive
@andysellick andysellick changed the title [WIP] [DO NOT MERGE] Add print styles Add component print styles Oct 17, 2019
@bevanloon bevanloon temporarily deployed to govuk-publishing-compo-pr-1164 October 17, 2019 09:43 Inactive
@injms
Copy link
Contributor

injms commented Oct 17, 2019

Is is worth adding in a style to add the address to links?

a:link:after,
a:visited:after {
  content: " (" attr(href) ") ";
  font-size: 90%;
}

Source: Improving Link Display for Print

@andysellick
Copy link
Contributor Author

@injms I believe that's already implemented by static - it happens on the live site.

@injms
Copy link
Contributor

injms commented Oct 17, 2019

Screenshot 2019-10-17 at 15 47 29

Do you think it's worth putting the '23 characters too many' message below the textarea to mirror 'X words remaining':

Screenshot 2019-10-17 at 15 48 47

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.

Small suggestion for the character count component - but other than that tiny thing I think this looks a great improvement.

- tidy them up a bit, make them wider and shorter and put label, hint, error on separate lines
- hide everything apart from the OGL text and crown copyright line
- hide toggle control and show all updates link
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