Includes:
- new content
- added option to turn analytics on/off
- non-js version for the on/off switch
- a banner to confirm user's choice was saved,
shown when they click the save button
- the cookie banner that appears on all other
pages removed from this page
It’s useful to get some kind of preview of the report before you
download it.
And if there’s only a few letters in there then you might not even need
to download it at all.
For teams with lots of letters we don’t want the page to load too slowly
so let’s cap the number of displayed items to 50, same as previewing
a spreadsheet.
The GOV.UK Frontend details component macro
wraps its `<summary>` text in a `<span>`.
We put a `<h3>` in the `<summary>` (actually valid
use, based on the spec) so this breaks when the
`<span>` wraps it.
This converts the existing `<details>` tag to use
all the class names the macro creates, but with
all the `<summary>` contents in the `<h3>`.
Also adds font-smoothing to the messages on the
API page. This was previously set globally for
all fonts in the GOV.UK Template CSS but is now
just set for the New Transport 'nta' font.
Included because the messages use the monospace
font so don't have it by default.
Their priority should always add up to 100%. Currently we have to ensure
this by hand. Adding this form means there’s no way to not set their
combined priorities to 100%. And it’s a bit more of an intuitive UI than
two textboxes on separate pages.
It’s not very useful to know the priority of one provider without
knowing the other. And these pages were never really designed, so they
weren’t super easy to understand anyway.
This commit adds a page that takes the first two text message providers
and shows their relative priority against each other.
It follows the design of the events page, as a pattern for showing a
log of historical events.
The GOV.UK Frontend details component macro
wraps its `<summary>` text in a `<span>`.
We put a `<h3>` in the `<summary>` (actually valid
use, based on the spec) so this breaks when the
`<span>` wraps it.
This converts the existing `<details>` tag to use
all the class names the macro creates, but with
all the `<summary>` contents in the `<h3>`.
Also adds font-smoothing to the messages on the
API page. This was previously set globally for
all fonts in the GOV.UK Template CSS but is now
just set for the New Transport 'nta' font.
Included because the messages use the monospace
font so don't have it by default.
Was set to `position: relative` to solve an issue
on the produce page. This introduced other issues
with the sticky JS and the fix is only needed for
the product page so this moves it to that CSS.
The previous fix was applied here:
9441dd0b37
Scanning the page is difficult at the moment because it’s hard to tell
how far apart in time events are, and thereby determine which events
might be related.
Grouping the events by day quickly lets users narrow their focus to
a meaningful subset of the events.
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.
Now that there’s a bit more stuff in the service name area at the top
of the page it looks a bit cramped. Moving the heading down gives it a
bit more space to breath, and associates the heading a bit more closely
with the content after it.
Because some people don’t know they can put their own logo on letters:
> The HM Government Logo is at the top of the letter and we can't see
> a way of putting the [organisation] logo on
> We are intending to use the letter template feature for the first time
> and wondered whether the branding is configurable or whether the HM
> Government header is the standard default.
> Can we replace HM Government logo with our own in the letter? IF yes,
> then how?
> I don't seem to be able to set the branding on the letters to be
> [organisation]. it's always HM government. Is there something that
> needs enabling for this account?
No-one actually wants the HM Government logo (no-one is sending real
letters using it). So we should leave the space blank and put a button
there prompting people to add their own logo.
The contact block fills from the bottom upwards. So if it only has a few
lines then the ‘Edit’ link button sits quite far away from where the
text appears in the letter. This commit moves the link button to bottom
align with the contact block, so it’s always in close visual proximity.
We adjust the spacing under the textbox when doing the send one off
flow. This was based on the assumption that there would always be a
sticky header in the send one off flow.
This assumption is no longer true, so this commit implements the same
spacing in an independent way.
At the moment we are manually cancelling letters for people when they
ask us to. Once’s we’ve done this there is no indication that it’s
happened except for the date going red on the list of letters.
This commit adds some error messaging and styling to show when a letter
is cancelled.
Letting people cancel their own letters will be a future enhancement.
Letters is now a mature enough feature that we should:
- be raising awareness amongst our users that it’s a thing we offer
- not have letters be a surprise to anyone creating a Notify account for
the first time
Shouldn’t be merged until:
- [ ] https://github.com/alphagov/notifications-api/pull/1600
Linebreaks are an important part of the letter contact block, and make
it easier to read.
Bold text works for short pieces of info like email addresses or phone
numbers, but is too heavy for the letter contact blocks because they
tend to be longer.
Inbound text messages can run over multiple lines. This makes the page
harder to scan. Your phone, and the outbound messages page, only show
the first line of the text message, and truncate the rest with an
ellipsis.
This commit does the same for inbound text messages.
It also stops the timestamp for the inbound messages being squashed and
wrapping over multiple lines, which looks messy.
We couldn’t do this before, because it would have stopped people from
being able to copy/paste the full message content from this page.
We’ve moved from three to four permissions. Four permissions don’t fit
in the exiting horizontal layout.
This commit makes the permissions stack vertically instead.
This approach has some downsides:
- makes the permissions less easy to scan vertically
- makes them take up a lot more space (and at lives services, most of
them have somewhere around 15 team members)
But I think for now it’s better than any horizontal alternative that I
tried.
Generally, bigger click areas are better[1], as long as they don’t cause
ambiguity or accidental clicks.
This commit expands the clickable area of tables where the left-hand
column is a link to include the meta information under the link.
We can’t make the whole row clickable, because sometimes we have links
in the right hand column which go to a different place
This commit also removes the CSS for `.spark-bar-label`, because these
elements are visually identical to `file-list`s now.
1. https://en.wikipedia.org/wiki/Fitts%27s_law
Most of our tables are now lists which have:
- a thing you click on
- some secondary info about that thing underneath
- some extra numbers/status on the right hand side
Since these are so similar, they should share the same pattern, which
this commit does (using the `file-list` pattern).
Visually this means:
- the secondary text on the inbox becomes grey not black, for
consistency
- the status bit of the notifications tables bottom align like the
status of messages in the inbox
These both seem like OK changes to make for the sake of consistency.
Since we’ve removed the table of notifications from the single
notification page there’s no way of knowing the status of a
notification.
This re-adds it in a way that’s similar to how it looks on inbound
messages.
This commit adds two things:
a section on the dashboard to show how many inbound messages the
service has received in the last 7 days, and how recently an inbound
message has been received
---
Doesn’t show the contents of any messages, just like how the rest of the
dashboard is an aggregation, never individual messages.
a page to show all the inbound messages the service has received in
the last 7 days
---
This shows the first line of the message. Eventually this will link
through to a ‘conversation’ page, where a service can see all the
messages it’s received from a given phone number.
Previously they were relative (ie percentages). This made sure that they
worked on mobile, when the letter might be narrower.
However it broke when the preview was more than one page, because
13% of the height of 2 pages is different to 13% of the height of one
pages.
This commit changes the positions to be pixel values, which match the
calculated percentage values when the preview is one page.
It’s uneven ever since we upgraded the toolkit. Guess it’s probably
allowing space for an arrow image. But I don’t like the arrow image
because it looks like it’s pointing at the ‘or sign in’ link.
So this commit overrides the button’s default spacing.
Not sure how these got out of line (maybe when we brought the date into
the left-hand text area). But this commit updates the percentages to
match the comments.
This is so it’s clear from the position of the link which part of the
letter you’re editing.
Making the navigation narrower means that we have more space on every
page. So on pages where we had to use 16px type just to fit stuff on the
page we can now bump the type size up to something less miserly. This is
mainly the team and settings pages.
We still need to use 16px on pages which list notifications or previews
of spreadsheets, because we’re still trying to fit a lot of information
onto these pages, so every little space-saving helps.
Letter templates have (or will have) multiple different editable
regions. I think that the most intuitive way for this to work is to have
- an edit link for each of these areas
- positioned next to the thing to be edited
Again, this isn’t fully hooked up, but since no-one is using letters
live yet this is a good way of getting research feedback and pointing
towards where we want the feature to go.
Uses percentages for the positioning so that the alignment is maintained
on mobile.
The message text in our previous illustration was white on light blue,
which didn’t meet WCAG AA colour contrast. WCAG AA requires a contrast
ratio of 4.5:1. The text in our image was only 3.8:1.
The text in this new image has a contrast ratio of 19.8:1, so easily
passes WCAG AAA.
Required a slight tweak to the positioning of the image because it’s
dimensions weren’t exactly the same as the previous one.
The bars were sitting in a table cell with some right padding, so they
never extended all the way to the right. Making it right-aligned removes
this padding, then setting the text to left aligned keeps things looking
the same.
The previous, weekly activity breakdown was what we reckoned might be
useful. But now that we have people using the platform it feels like
aggregating a service’s usage by month is:
- matches the timeframe users report on within their organisation
- is consistent with the usage page
And like the usage page this commit also limits the page to only show
one financial year’s worth of data at once (rather than data for all
time).
This commit also makes some changes to the jobs view code so that our
aggregation of failure states is consistent between the dashboard pages
and the jobs pages.
This copies what the other GaaP components will be doing for their
product pages.
The SASS and HTML is taken from here:
f05ca1fb71/source/stylesheets/modules/_breadcrumbs.scss
Only changes I’ve made are:
- making the file paths work with our build pipeline
Changes to our code to accomodate this are:
- putting the padding on the product page `<h1>` not its container
- moving the hero image accordingly so that it lines up
- making the `<main>` element on the product page into an anchor so that
the breadcrumb can link to it – screenreader will then announce the
link as “GOV.UK Notify, same page”
‘How much does it cost’ is one of the user needs that we identifed for
the product page.
Cost is not the primary reason someone would use Notify (they’re more
likely to cite ease, or that it’s ‘official’). However if you _don’t_
mention cost then it looks like we’re hiding something or that there’s
a catch. So putting it on the page allays fears that people might have,
rather than pushing them towards using it.
Visually I’ve dropped the size of the `<h2>`s on this page so that
there’s enough difference between them and the big numbers. The idea of
the big numbers being big is to catch people’s attention as they scroll
down the page, by breaking up the rythmn.
The button was inheriting a green box shadow from the default GOV.UK
button style, which is typically used on a white background. On the blue
background, a darker blue shadow looks better I think.
The 15% darkening is the same as used by the default green button:
a3fe44e00e/stylesheets/design-patterns/_buttons.scss (L36)
Internet Explorer 11 and below don’t scale SVG images properly when
they’re used in `<img>` tags. See
https://gist.github.com/larrybotha/7881691 for details.
This manifested itself as the SVG images on the product page being
smaller when viewed in IE11 than other browsers.
This commit explicitly sets them the be 100% wide, which seems to fix
the problem.
