Moves the link out of the label and increases
the hit-size for the checkbox. The intention is to
reduce the chance of clicking the wrong thing by
accident.
This includes a TODO in the checkboxes component
template code. The item meta needs to be
associated with the checkbox input by use of
`aria-describedby` but this needs changes in
govuk-frontend-jinja to happen.
Moves the link out of the label and increases
the hit-size for the checkbox. The intention is to
reduce the chance of clicking the wrong thing by
accident.
This includes a TODO in the checkboxes component
template code. The item meta needs to be
associated with the checkbox input by use of
`aria-describedby` but this needs changes in
govuk-frontend-jinja to happen.
Replaced `$gutter` and similar variables such as `$gutter-half` with the
`govuk-spacing()` static spacing function. This uses `govuk-spacing()`
instead of `$govuk-gutter` because `$govuk-gutter` should only be used
for the gaps in between grid columns and we were mostly using `$gutter`
to add more space around elements.
There are other places in the SCSS files where we had hardcoded a
measurement in px which could be replaced with `govuk-spacing`, but this
commit only replaces the existing uses of `$gutter`.
Giving all links the GOVUK Frontend classes, and
the new `govuk-link--destructive` class, means
some styles are already applied.
This strips out those styles.
Note: there's still a good amount of styling, most
of which is to make the focus styles specific to
the space the link is in. These will need
reviewing when GOVUK Frontend is bumped past
version 3 as this brings in new focus styles.
Giving all links the GOVUK Frontend classes, and
the new `govuk-link--destructive` class, means
some styles are already applied.
This strips out those styles.
Note: there's still a good amount of styling, most
of which is to make the focus styles specific to
the space the link is in. These will need
reviewing when GOVUK Frontend is bumped past
version 3 as this brings in new focus styles.
Our usage for these browsers in the last month is down to 0.2% of all
users, or 14 individual users, according to Google Analytics.
These users also visit about half the number of pages per sessions,
suggesting that they’re not signed in.
If you can see a folder but not its parents we concatenate the
breadcrumb into one link.
This styles folder separators inside these links a bit differently to
make them do a bit less visual separation than the ones outside the
links.
It looks weird to have two different visual treatments for showing a
navigable hierarchy.
I reckon losing the slash won’t make things less folder like – Windows
for example uses chevrons as foler separators.
It was a bit inconsistent depending on whether there was/wasn’t a search
box or channel tabs on the page.
I found this just too complicated to do in pure CSS, so added a new
spacing class which gets toggled on and off.
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
This commit applies a carefully selected blend of `white-space`,
`display` and `background-position` to ensure that:
- you can always see the full name of the current folder in the heading
(which is useful because people might have mutiple folders with the
same name, differentiated by some king of suffix)
- the clickable are of a single folder or template in the list is 100%
width, for the biggest possible hit area
- the name of a folder or template wraps underneath the folder icon (ie
the folder icon is treated like a normal character, not like a bullet
point)
It’s a bit rudimentary to only show the current place in the hierarchy
and the parent. You lose a sense of how deep you are.
But we can’t just show the full path, because it can be arbitrarily
long. So what this commit does is show the full path, but truncates the
display of any items. Further-up than the current folder or its parent.
This also helps disambiguate between folders and templates, because
folders are always shown with the folder icon.
This probably won’t affect many teams, because we don’t anticipate a lot
of deep nesting.
Being able to see how many things you have selected gives you positive
feedback that reinforces that what you’ve done has been recognised. It
helps you understand the implications of your actions (ie you see ‘3
selected’ before you press the ‘Move’ button). And it gives you an
escape hatch the get out of the state you’re in by providing the ‘Clear’
button.
We also found in prototyping that having a ‘Nothing selected’ message
helps draws people’s attention to the checkboxes when they first
encounter the folders feature.
This commit implements the counter and the cancel button. It tries to
follow the existing patterns for this module.
After showing this to a few people the consensus seems to be that
‘Templates’ isn’t itself a folder. Therefore it shouldn’t have a folder
icon.
This has the advantage of disambiguating between being in a folder:
> [screenshot]
…and being in a subfolder:
> [screenshot]
IE8 doesn’t support SVG images as CSS backgrounds. We still have users
on IE8, as I saw yesterday.
This commit adds fallback PNG images for these users. The images are
rendered at 1x (because no-one is using IE8 on a retina screen) and
have been run through `pngcrush -brute` for the smallest possible file
size.
Right-aligned so it lines up with the right edge of the page.
Moved down so its baseline aligns with the folder title.
In a narrower column so there’s more space for the folder title.
Things in subfolders need to be in the page so we can search for them.
But the default view should be only the things are the current level.
So we can use CSS to hide items that are below the current level.
So that the live search can filter things, they need to be on the page
when it loads. We want to make search work across folders, so all the
things in subfolders need to be in the page.
They also need the full path appending to them, so that you can tell
which ones are in which folders.
This won’t show items that are in a folder above the one you’re
currently in – my reckon is that when you’re narrowing down by clicking
into a folder that you only want to search for things in that folder.
Currently if there’s nothing in a folder you just get an empty page.
This looks a bit broken, or like the page hasn’t finished loading.
This commit adds a message to the page to show that it’s intentionally
blank.
The message is contextual based on type of template, because there might
be templates in the current folder, even if you can’t see them at the
moment (because you’re filtering).
This makes the display of folders in the `<h1>` look like the prototype.
It alters the behaviour we’ve initially built here by only ever showing
a maximum of two levels of hierarchy (the current folders and its
parent).
This commit adds:
- checkboxes to let you select a template or folder
- radio buttons to let you select where to move those template(s) and/or
folder(s) to
It only does the `get` part of this work; handling the `post` and
calling API will be done in a subsequent commit.
The prototype for folders tightens up the templates page to fit more
templates on the screen. Partly because it looks better, and partly
because the sticky bottom toolbar means that there’s less available
space. So reducing the spacing means that roughly the same number of
templates fit on the screen.
For those who won’t see the checkboxes (people who don’t have the send
permission) or use folders, this just means that they’ll have slightly
less scrolling to do if they have a lot of templates.
Doing this before adding the folders so that:
- we roll out changes more gradually
- once we add the folders we can see if the spacing has stayed
consistent
- changing where the margins are applied to resolve the inconsistent
spacing when there is/isn’t tabbed navigation or a search box shown
Generally, bigger click areas are better[1], as long as they don’t cause
ambiguity.
This commit expands the clickable area of links to templates to include
hint text underneath which states the type of template.
1. https://en.wikipedia.org/wiki/Fitts%27s_law
…and change the page heading on next page to match.
‘Send emails’ doesn’t speak to you if you already have the idea of a
file or address book in mind. ‘Upload’ better describes what you’re
going to do on the next page.
Also makes all the links regular weight, because having the first one
bold looked like a heading.
This commit refactors the `email_message` and `sms_message` UI components to
take fewer parameters.
`name`, `edit_link` and anything to do with versions are identical for both
text and email messages so I’ve moved them to the pages where you choose a
template or see the versions.
This commit also tidies up the wording and styling of the template history
stuff.
