* Updated header and footer
* Moved files around and updated gulpfile to correct the build process when it goes to production
* Updated fonts
* Adjusted grid templating
* Adding images to assets
* Updated account pages, dashboard, and pages in message sending flow
* Updated the styling for the landing pages in the account section once logged in
Our CSS for links in the navigation, which makes
the underline appear on hover is overriding the
GOVUK focus styles, making it look like there are
2 underlines. This adds some extra CSS to reset
it.
The new CSS is further down the stylesheet to the
hover styles. This gives them a higher specificity
meaning they override them when these links are
hovered over while in focus.
Most browsers apply the focus style when a link is
clicked but Safari just applies the active style.
This meant our large links, with expanded click
areas, didn't get the focus style themselves but
their psuedo-elements (which create the expanded
click area) did.
This adds the focus styles to the active state of
links with the expanded click area, to ensure all
of their click area gets the focus style.
Making the icon an inline SVG lets it inherit
colours from the page styles. This helps in forced
colour modes, like Windows high contrast mode,
where it will match the colour of the text next to
it, whatever it is set to.
Making it inline requires some changes to the CSS
to allow its position to match that of the current
background image.
This also sets `forced-color-adjust` to `auto` on
the `<svg>` element, which tells the browser it
can control its colours in forced colour modes.
This is required because the browsers that support
forced colour mode set it to `none` for the
`<svg>` element by default.
At the moment, the icons in the key of the map
showing what each type of area drawn on the map
means change colour in high contrast mode. This
causes a mismatch between the areas on the map and
the key.
These changes remake the images in SVG to prevent
the colours changing in high contrast modes. They
also add a white background to the icons, to make
sure they match the areas they refer to in the
map.
The enhancedTextbox component has an element that
sits in front of the textbox and draws the
highlights over the text. This element has a 2px
border so it's dimensions match those of the
textbox. This border has a colour of 'transparent'
by default, to hide it from view but this is
overridden in high contrast modes to match the
text colour.
This adds some CSS targeting high contrast modes
which sets it to match the colour of the
background, making it invisible again.
The link-buttons we use in our pill component
have a blue background which shows the area they
occupy by default. In high contrast mode,
backgrounds are hidden so the link-button text
looks like it is floating because you can't see
the edge of their area.
These changes use the trick of adding a
transparent border. This is hidden by default but
displays in high contrast mode to show the edges
of the link-button. I've reduced the padding to
accommodate the extra space it takes up.
The mock up component, shown in all
current/past/rejected alert pages, doesn't show
fully in high contrast modes because it uses its
background colour to show its shape and
backgrounds are hidden in high contrast modes.
This uses a technique from design system which
adds a transparent border to these elements to
show their shapes. This works because borders of
any colour (even transparent) are rendered as the
foreground colour.
The size and position of the 'X' has deviated a
bit from the design intentions of the original.
The original shared the x-height of the area text
and has positioned to be vertically and
horizontally centered.
These changes assume an x-height of 11px and use
flexbox to center the new 'X' horizontally and
vertically.
This also tweaks the visual state when focused and
then hovered so matches other buttons without
breaking the design.
The text never had underlines like our other
link-button components so always looked like
buttons. If they look like buttons, they should
act like them too and have those semantics.
This give them a role of button and uses the class
and data attribute for the button component from
GOVUK Frontend to make them work like one.
These changes include a fair amount of styles to
override those the govuk-button class brings in.
I've tried to mark those ones to at least make
that obvious.
The current link button for removing an area is
created using a psuedo element with an 'x' as
content.
The inline box for the 'x' overlapped its parent.
This is visible in high contrast mode, breaking the
parent's border. Despite existing in CSS, the 'x'
is also announced by screen readers, which is not
what we want.
This changes it to be an inline SVG with a role of
image. It doesn't require as large an inline box
so doesn't cause visual issues in high contrast
modes. It also means we can set it's label similar to
how you would an image's alt text, giving us
control over what is announced by screen readers.
This commit also includes some extra CSS,
targeting high contrast modes, giving the
link button the following when viewed in those
modes:
- a complete border so it is
distinguishable from the list item
- a focus style
When the component was renamed from ‘API key’ to ‘Copy to clipboard’ the class for the thing to be copied changed from `api-key__key` to `copy-to-clipboard__value`. While the CSS was updated to reflect the change from `api-key` to `copy-to-clipboard` the change from `__key` to `__value` was not made.
Before: 4921e6d46e/app/templates/components/api-key.html
After: 85f6881a56/app/templates/components/copy-to-clipboard.html
This commit changes updates the CSS to reflect the latter change, so that the styles get applied properly.
Was just in one of those meetings where it felt like writing this would
take less time than I’d already spent talking about its relative
priority…
---
In the admin app you can already set the broadcast channel as 'test', 'severe' or 'government'.
Aim:
- Add the 'operator' channel to the list of channels you can pick for the admin app broadcast services
Note:
- The API already supports this - https://github.com/alphagov/notifications-api/pull/3262
- The CBC proxy does not yet support the operator channel and this will need a separate card. That card has not yet been written because the interface has not been agreed between us and the MNOs yet.
- Will need to have the ability to select the operator channel for just a single MNO like we do for the other channels
- If we add this, we shouldn't actually start using it until the MNO in question gives us the go ahead.
---
https://www.pivotaltracker.com/story/show/178485177
Previously we could only select a provider when using the test
channel, but this is also required for others channels when we
do tests on the production network with individual MNOs.
In order to reduce duplication and improve consistency, I've reused
the new broadcast_service_name_tag macro to show the setting.
At the moment if you’re invited to a live broadcast service you get the
training mode tour. This is misleading, and could make people think they
weren’t in danger of sending a real alert.
This commit adds a short, 2 step tour for users invited to a live
broadcast service.
Previously there was no indication that a service was suspended.
While this could also be shown for archived/deleted services, the
meaning is similar enough that it makes sense there too - the name
of the archived service should distinguish it as being archived.
We feel that this is more appropriate because it’s part of the
information you’re agreeing to before you hit submit.
Sometimes users can missing information that doesn’t start left-aligned
to the column they’re interacting with.
It also makes it closer to the Design System component.
We’re keeping it in the sticky footer, so that it’s always visible no
matter where in the message you’re scrolled to (this means you won’t
have to edited to content then scroll down to check whether you’ve
made it fit).
This looks tidy, and because of the sticky footer it means the message
is always visible, even if your template is quite long. So no matter
where you’re scrolled to in the template you don’t have to scroll to the
bottom to see the count update.
An accessiblity audit done as part of Notify's
service assessment raised the following problem
with our big_number component.
When you turn CSS off, the sentence in the
component is split onto separate lines.
This was because the number part is wrapped in a
<div> which browsers were interpreting as being a
separate sentence to the label.
So "1 letter", where "letter" is the label, was
seen as:
"1"
"letter"
The accessibility expert consulted on this pointed
out that this would sound confusing for users of
screen readers when moving through the document
sentence by sentence.
These changes:
- make the <div>s into <span>s which are 'phrasing
content' and so are interpreted as part of the
same sentence
- change the CSS so the number will still sit
on top of its label text
The HTML5 spec has a section on how browsers
should arrange text into paragraphs that explains
what was happening in more detail:
https://www.w3.org/TR/html52/dom.html#paragraphs
We use a hack to extend the focus style of single
links in template list items (those not part of a
path of links).
This extended the 'focus box' downwards so it
covered the hint text below the link by the height
of the link (which is block-level).
Problems happen if the link wraps to multiple
lines. The hint is always on one line so the focus
looks over-extended.
These changes guard against those problems by
using the line-height instead of the block-height.
They include adding a Sass function to reference
the line-heights in GOVUK Frontend's Sass API:
https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-typography-scale
These make space for the folder icon using
padding-left when they have ancestors as they are
inline so it only effects the line the first link
is on. Without ancestors they are block-level so
padding-left pads the whole block.
We had a block of CSS that fixed this, by using
text-indent for those without ancestors but the
selector was broken by changes to the HTML (it was
no longer the :first-child).
This uses the :first-of-type pseudo-class instead
to ignore preceding elements of different types.
Also includes changes that move styles for links
out from under elements with a class of
.message-name, which was removed in the previous
commit.
I'm mainly making this change because it's useful
for the CSS that styles the hint text when the
link is focused for the link to have no parent
container.
That being said, there isn't really enough content
underneath these headings to justify them as it is.
I've wrapped them in a list instead because:
- they're structured like a list
- we already called them a `template-list`
This commit also replaces the `message-type` class
on the paragraph below where the headings went,
for consistency. It also removes the CSS for that
class as I couldn't find anywhere else that used
it now.
Template list items without checkboxes use the
`.message-name` and `.message-type` classes for
their links and hints.
This means styles used to expand the focus area
previously are clashing with the new approach.
This removes the old ones and gives
`.message-type` paragraphs a non-static position
to give them a z-position and so raise them above
the expanded link area.
The font-size goes down to 16px on mobile. This
changes the line-height too which makes it too
small. This bumps it back up the be the same as on
desktop which makes space for the icon (if a
folder) and gives the link more space.
Also reduces the horizontal space between the icon
and its link by the same amount the font-size
changes.
When the list of areas is restricted to half the width of the page it
starts to look pretty higgledy-piggledy when you have lots of areas or
areas with very long names.
To do this I’ve ripped out the table markup in favour of headings,
paragraphs and lists. Probably pros and cons for each, but it was really
hard to do the layout with the content in a table.
This prefixes everything to do with areas/the map with `area-list`, so
from looking at one element you know which `.scss` file will contain the
relevant code.
We hide the map inside a details element.
Because the map has such a strong shape I don’t think it needs the grey
border to contain it. This commit removes the border, and adjusts the
spacing to group things by proximity alone.
By removing the border and associated gutter we can give more space to
the map, and make the page look less busy.
The preview of the broadcast message, with the 2px thick black lines no
longer matched the style of the area labels, which have moved to just
having a tinted background.
This commit restyles the broadcast message preview (including the
exclamation mark icon) to use shading only to differentiate the message
from the rest of the page.
This should make the page fit together more cohesively, and feel less
busy.
I’ve never liked the style of the selected areas on the preview of a
broadcast message. They were a compromise, taking what’s on the map page
and giving it a shaded background so it looks less like a text box.
The trouble is all these stroked elements jumbled together made the page
look very busy. I think it can be a bit calmer if they look more like
the ‘tag’ component[1] from the Design System, which only uses shading.
Going for black text not blue, because it’s one less piece of visual
differentiation – again, trying to keep the busyness level down.
1. https://design-system.service.gov.uk/components/tag/
