We want it to be very clear whether you’re in live or training mode
because:
- you may be switching back and forth between them
- doing something in live mode when you think you’re in training mode
would have… consequences
By adding a label next to the service name you’ll will have some
indication, on every page, which mode you are in.
Style of the label is based on the ‘Tag’ component from the Design
System:
https://design-system.service.gov.uk/components/tag/#showing-multiple-statuses
It clashes with the new `$govuk-focus-colour` now. This commit changes
it to half way between `govuk-colour("dark-grey")` (`#505a5f`) and
`govuk-colour("mid-grey")` (`#b1b4b6`) from the Design System. Dark was
too dark and mid was too light.
It also adds a line of JS to let us easily switch the header to blue by
clicking on it, which is useful for taking screenshots etc.
There are a few places where we missed updating to the new focus styles
because they were using the `$yellow` SASS variable and not the
`$focus-colour` variable.
This commit updates them to the new colour, and where needed adds the
black lower border to match.
If there is a search term when the page loads, a
statement about the results is added to the
searchbox label.
All subsequent searches are announced via an aria
live-region.
Includes:
- fixes for the cancel button, when selecting a
template type (after clicking 'New template')
- making the folder icon black, to match the text,
on template list items
We have some radios using the GOVUK Frontend
radios component in this app. They are version
2.x.x though so this bumps their styles to version
3.x.x to get the new focus style.
It has a hover colour so needs the focus colour
re-defined.
The `overflow: hidden` was clipping the black
underline of the focus style on the prev/next
links. This assumes it was only there to contain
the 2 floating links so replaces it with a
clearfix, which does the same without clipping the
underline.
Swaps out the old one (solid colour with lighter
grey) for one with the same colour as the text,
but no fill.
Also swaps out for an SVG for better scaling.
To help people understand that broadcasting is not a precise technology,
we have shown the estimate bleed area on the map.
Because people aren’t familiar with the technology a visual only clue is
not enough. So this commit adds a key to the map, which explains what
the different outlines mean.
It also removes the sticky footer from this page to:
- make the key visible on the page
- make people scroll and review the map before they get to the big green
button
- not reduce the size of the map any further
All other navigations have their selected item as
a link so we should match this.
Includes changes to the pill CSS so:
1. it doesn't use elements in the selectors
2. all the selectors use BEM
I did 2. because I had to change the
classes/selectors anyway, they might as well match
the style GOVUK Design System uses.
Make heading break on whitespace - it means if the combination
of name and email address is too long for the line, email address
will go underneath and be more visible.
If email address too big for the allotted space, it will break onto
the next line and all of it will be visible.
Change the HTML & CSS for user-list-item's to
support their content being split into 2 columns
of a grid instead of the edit link being
positioned absolutely.
Also includes:
1. removes `<div>`s from `<ul>` (non-valid HTML)
2. split action link out from permissions list
3. split summary of folder permissions out from
permissions list
4. introduces a class for blocks of text that
appear when there are no items.
5. fixes tests broken by changes to HTML
We write our Sass to be mobile-first, meaning we
declare the value for a property (for mobile) and
then add all other variations (for other
viewports) afterwards.
Because of this, we need mixins that produce media
queries to be able to follow declarations.
This extension to the rule is also hinted at as
good practice in the docs:
7847511b61/docs/rules/mixins-before-declarations.md
For some reason Chrome decides that using its own font declaration is
preferable to keeping the input looking as it would without autofill.
This overrides that with our bigger, better font.
Since moving textboxes to GOV.UK Frontend we’ve started putting the
data attribute on the `input` element itself, not a wrapper around it.
This commit updates the Javascript accordingly.
