alphagov / manuals-frontend

Serves manuals on GOV.UK

Manuals Frontend is retired and all manuals are now being rendered by Government Frontend

Manuals Frontend

Front-end app for the manuals format on GOV.UK

Nomenclature

• Manuals – documents published using Manuals Publisher.
• HMRC Manuals – Manuals published by HMRC and populated via HMRC Manuals API.
• Sections - individual sub-pages of a Manual or HMRC Manual.

Live examples

• Manual: gov.uk/guidance/content-design
• Manual Section: gov.uk/guidance/content-design/what-is-content-design
• HMRC Manual: gov.uk/hmrc-internal-manuals/pensions-tax-manual
• HMRC Manual Section: gov.uk/hmrc-internal-manuals/pensions-tax-manual/ptm000001

Technical documentation

This is a Ruby on Rails app, and should follow our Rails app conventions.

You can use the GOV.UK Docker environment or the local startup.sh script to run the app. Read the guidance on local frontend development to find out more about each approach, before you get started.

If you are using GOV.UK Docker, remember to combine it with the commands that follow. See the GOV.UK Docker usage instructions for examples.

Running the tests

bundle exec rake

License

MIT License

manuals-frontend's Issues

Print link swap to component

Issue

Noticed the Print Link on this page:
https://www.gov.uk/guidance/academies-financial-handbook

Solution

Can be swapped for the Print Link component

Visuals

Manuals Flash of Original Content

Issue found while visiting the Scottish Government's Device Lab

Seen at https://www.gov.uk/hmrc-internal-manuals/employment-income-manual/updates

https://drive.google.com/file/d/0B-GzTJBVVSNzNWpqd1F4Z0JmWkE/view
https://drive.google.com/file/d/0B-GzTJBVVSNzQ1RMM29uUExmY00/view
https://drive.google.com/file/d/0B-GzTJBVVSNzUjR0RXpiVXhQWDA/view

(Sorry about the laughing - apparently I'm more of a nerd than I thought haha)

You can reproduce this by throttling via the dev tools

https://youtu.be/SJUUPog11VE

Add width wrapper for no-js

If the JS hasn't loaded then the content width is 100%, it should have a width restricting wrapper div that is then removed when the JS loads and loads the width in the proper places.

Replace Print Button

What

Swap print button for component

Why

A the print button found on these pages can be swapped for the print button component
(align architecture, consistency, improve accessibility)

Visuals

Every page has the manual title as the h1 and title

As a user
I want the tab or window title in my browser to tell me which part of a manual it is
So that I can open multiple tabs to look at different parts of a manual

As a user using a screenreader
I want the page to have a specific title and heading
So that I can tell what I'm reading before reading it

Section and Updates pages should have an h1 and title tag specific to the page. Currently, every page in a manual has the same h1 and title tag - the title of the manual. The section title or the "Updates" heading is in an h2.

Print CSS shows heading order incorrectly

What

When users print a manual, the CSS currently makes H2s appear smaller than H3s.

Why is it a problem?

Some manuals are regularly printed by users eg the MOT inspection manual and the Highway Code

This is confusing and counterintuitive. It makes it difficult for the user to establish order and hierarchy - DVSA

Zendesk ticket

Example

An example manual page : https://www.gov.uk/guidance/the-highway-code/rules-for-pedestrians-1-to-35

H2: General guidance (rules 1 to 6)
H3: Rule 1

The H2 does indeed appear smaller than the H3:

Inconsistent search input rendering

Issue found while visiting the Scottish Government's Device Lab

Notice how when this was reimplemented a regression was introduced somewhere. (Potentially they were done at the same time, I'm not certain 😄 )

Global header bar looks odd on small viewports

Issue found while visiting the Scottish Government's Device Lab

Inconsistent guttering on smaller screens

Issue found while visiting the Scottish Government's Device Lab

Here we could make the guttering on the header consistent with the guttering of the page

Is this still in beta?

Should this application still have a beta label?

Dependabot can't resolve your Ruby dependency files

Dependabot can't resolve your Ruby dependencies.

As a result, Dependabot couldn't update any of your dependencies.

This could have been caused by a git reference having been deleted at the source, by an out-of-sync lockfile, or by a bug in Dependabot.

To help diagnose the issue, please try running bundle update --patch locally. If no errors occur, get in touch and we'll help dig into it.

You can mention @dependabot in the comments below to contact the Dependabot team.

Odd alignment of 'give feedback'

Issue found while visiting the Scottish Government's Device Lab

Think all we need to do here is to float the link to the right so the whitespace is as expected.

Is publishing_api:publish_special_routes rake task still used/needed?

It seems odd that a front-end app contains a rake task which writes to the Publishing API.

Remove as much HTML that is only used by the JS as possible

show.html.erb has some HTML in it which is only used if the JavaScript is loaded, this should be removed and then added by the JS itself.