Our usability testing found that jumping out of the service when going
to download the agreement made it difficult for people to find their way
back to the ‘Request to go live’ page.
This commit adds a duplicate, service-specific versions of these pages
which have the same content but:
- keep the service navigation
- have a link back to the ‘Request to go live’ page
Since we added template folders the templates page has had a ‘medium’
sized heading, where other pages have stuck with a ‘large’ size.
This commit rationalises the decision around which pages have which
heading size:
- ‘navigation’ pages (eg templates, team members, email reply to
addresses) have medium sized headings
- transactional pages (ie ones which have a green button) keep the
larger heading size
We’ve stopped using them in favour of putting any ‘back’ link at the top
of the page. This commit removes them from the macro to make sure we
don’t accidentally reintroduce them.
The GOV.UK Design System back link component is sized (roughly) to the
contain the text and icon. Presumably this is so it’s safe to use in
various contexts.
Since we have control over the context is which it’s used, we can get
away with making the click area larger – in accordance with Fitt’s law –
without risking overlapping other page elements.
The Design System has standardised on back links being at the top of the
page, decorated with a small text-coloured arrow.
I think this makes more sense than having them at the bottom, because it
suggests, in some way, being able to go back before commiting to any of
the forms on the page. Whereas the things at the bottom of the page
should be performing actions on what’s in the page.
The reason for making this change now is that it de-clutters the area
around the green buttons. This was presenting a design challenge where
multiple levels of interaction were happening in the same form. Moving
these back links to the top of the page should mean that, in these
complicated forms, there’s one fewer thing to compete for the user’s
attention.
I’ve componentised this into a `page_header` macro so that the change is
easier to roll out and maintain.
The right aligned cells contain ‘Change’ links. These have a large
`border` to make the clickable area bigger. This commit removes the
`overflow: hidden` from these cells, so that the larger border remains
visible.
When a user's email address is updated, we not allowing it to be changed
to a non-government email address. We now allow a non-gov email address
to be changed to another non-gov email address. Government email
addresses still cannot be changed to non-government email addresses.
Also fixes the link in the error message on the ChangeEmailAddress form -
this was being escaped before.
I think this is something we inherited from the Digital Marketplace
code. We only use this for organisation settings are the moment, but
the list markers are redundant because each item will never wrap onto a
new line; it will truncate instead. Still keeps a little sliver of
spacing just so it doesn’t look like a paragraph.
Most of the content of our ‘settings’ tables is in the value, not the
key. The value is in the middle column. So we should allocate the most
space to the value.
The previous layout was based on the premise that most pages divided the
grid like this:
```
_______ _______ _______ _______ _______ _______ _______ _______
| 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 |
| | | | |
| 2/8 | 2/8 | 2/8 | 2/8 |
| | | | |
|–Navigation––––|–Main column–––––––––––––––––––––––––––––––––––|
| | | |
| | 3/8 | 3/8 |
| | | |
| |–Label–––––––––––––––––|–Value––––––––––––Link–|
| | | |
|_______________|_______________________|_______________________|
```
This was because a lot of pages had a left column for emails, and a
right column for text messages, so it felt consistent for tables to
always default to 50% of the width of the main column.
This consistency has faded with time, especially as we added letters.
So this commit changes these tables to allocate more space to the
central column, but still sticking to the grid like this:
```
_______ _______ _______ _______ _______ _______ _______ _______
| 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 |
| | | | | | | | |
| 2/8 | 2/8 | 4/8 |
| | | |
|–Navigation––––|–Main column–––––––––––––––––––––––––––––––––––|
| | | | |
| | 2/8 | 3/8 | 1/8 |
| | | | |
| |–Label–––––––––|–Value–––––––––––––––––|–––Link|
|_______________|_______________|_______________________|_______|
```
Since there’s more space to display the value of a setting this commit
also truncates settings that are too long to fit in the width of the
column (for example a long email address) rather than the previous
behaviour of truncating them. This all just makes things look a bit
cleaner.
Every time someone adds a new service we ask them what kind of
organisation they work for.
We can look this up based on the user’s email address now. So we should
only ask the question if:
- we don’t know about the organisation
- or we haven’t set what type of organisation it is (this shouldn’t be
possible on productions because we’ve populated the column for all
existing organisations and it’s impossible to add a new one without
setting it
