If you’ve chosen a text message sender then it’s good to see
confirmation of your choice.
This replicates what we do when you choose an email reply-to address.
Numbers over a billion overflow the two column layout. Numbers over one
hundred thousand overflow the three column layout.
This commit makes the type size smaller in these cases, so that the
numbers still fit in the boxes.
These are the settings that our analytics person has said we should be
using across all the GaaP products.
This commit also makes sure our tracking code is identical across all
the templates that have it in (including the obsfucation of UUIDs). We
may want to remove the ID obsfucation later on, but for now let’s make
sure it’s happening consistently in all the places.
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.
In user research, we’ve seen users copy/pasting the contents of the
inbound SMS page into a spreadsheet, in order to keep a record of the
messages they receive. They even went as far as to write a macro which
fixed the errors caused by copying and pasting.
It would be much easier if we just gave them the data already in a
spreadsheet format. Which is what this commit does.
One caveat is that, because spreadsheets can contain executable code (ie
formulas), and because we’re populating the spreadsheet with
user-submitted data (albeit via SMS) we need to be careful about
injection attacks.
The details of how these attacks work are detailed here (interesting
reading): http://georgemauer.net/2017/10/07/csv-injection.html
The mitigation is to not allow characters which initialise a formula
at the start of the cell.
GOV.UK Template hanged the colour of text in focused links in
79466a489c
It was done with greater specificity than before. This means that the
way we were previously overriding the focus colour (for links with a
dark background) no longer works.
This commit makes our override more specific, so that it works again.
Entering, or reading back sequences of digits is easier when they’re a
bit more spaced out.
This is because we read words as shapes, but read numbers
digit-by-digit.
So this commit adjusts the tracking of the type to put a bit more space
in for textboxes that are going to accept digits.
Most user will only have one reply to address. Which means they should
never have to worry about IDs. And if you only have one then you never
need its ID, because the last remaining address will always be the
default.
So IDs should only be shown when a service has created more than one
reply to address.
This required a bit of visual tweaking of the _user list_ pattern,
because its spacing wasn’t defined in a way that worked when only the
name of the thing, and not its details were shown on the page.
Something in a new version of GOV.UK Elements, Template, or Frontend
Toolkit has introduced a rules which removes padding for the last
column in a table.
This is undesirable in the case of email message previews.
Have seen users complaining that they got an invitation email twice.
This is probably because they clicked the button twice even though they
think they only clicked it once.
Double form submission is a common issue on web pages, and there are a
number of different ways to prevent it. I’ve chosen to do it this way
because:
- temporarily, not permanently disabling the button means that this
addresses the double clicking issue without breaking things if the
user did, really want to click the button again deliberately (for
whatever reason)
- doing it with a `data` attribute, rather than the `disabled` attribute
means that the interaction behaviour of the button doesn’t change (
`disabled` buttons can’t be focused, for example)
Think this broke when we split the setting page up into three sections.
This forces the text to wrap onto multiple lines even if it doesn’t
contain spaces (for example an email address).
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.
There are quite a few more options that there used to be in the settings
page. This means it’s hard to find the thing you want to change.
Grouping options is a common way of making things easier to find.
Grouping by channel (text, email, letter) is something we do elsewhere
that seems to work pretty well.
There is padding on the switch service link so that:
- it lines up with the service name
- it has a bigger hit area (because Fitt’s law[1])
This means that visually, the default focus state overlaps the blue
bar under the GOV.UK banner. So it needs a bit of custom CSS to make it
look right visually.
The green bordered banner feels too much like ‘success’ or
‘confirmation’. Doesn’t feel like it’s something which just gives you
the status of a thing, or here’s a thing you should be aware of.
We use panels with a blue banner to indicate something that’s clickable.
So we should move away from this style for things that are just
notifications. We can’t use teal like other bits of GOV.UK because it
doesn’t pass colour contrast.
Pay are using a box with a green border, similar to the error validation
box (which has a red border). So let’s do the same for now.
Google analytics lets you send:
- pageviews
- events
Page views are used by default. But sometimes you wanna count something
which isn’t the user navigating to a new page, or you wanna track
something which isn’t just what page they were looking it. This is where
events are useful.
This commit adds a small JS module that lets us fire off an event when
the presence of an element with the right data attributes are present on
the page.
The visual convention for redaction is heavy black crossing-out.
Our text colour isn’t always black exactly though (usually it’s very
dark grey, sometimes just dark grey). `currentColor` is a magical CSS
value that let’s us set the background colour to whatever the text
colour is. So both the text and redaction look like they are part of the
same thing.
Couple of subtle visual things here:
- opacity to make the colour better match the text colour – a filled box
naturally looks darker than thin text, so this knocks it back a bit
- an inset shadow to take a few pixels of the bottom edge – the visual
weight of text is biased upwards because text has ore capital letters
and ascenders than descenders – this make it look aligned visually
We’ve made a few changes to the tour recently, without changing the
help text on the left hand side of the screen. So the stuff you see on
the right side of the screen doesn’t quite sync up any more.
This commit adds an extra, introductory page that just shows the
template and a next button, which better matches the ‘every message
starts with a template’ help text.
Works similarly to the delete template flow, because it’s a destructive,
one-way action.
Not on the edit template page, because it’s not something you want to be
considering every time you’re editing a template. And we saw that people
couldn’t find the delete button when it was on this page.
Adds a bit more CSS for the `dangerous` banner type, because the content
here is quite complicated. Breaking it into a list helps, but the
spacing didn’t look right, so needed some tweaking.
Can ship independently of the code that shows the redaction, but needs
the API first.
