We weren’t calculating the height quite right; we were trying to
compensate for something that should have been compensated for in the
`stick-at-top-when-scrolling` code.
Add the 5px to the shim there is required because we’re adding it to the
element that the shim in replacing.
There were three problems with showing tables fullscreen:
- it was over-optimised for very big spreadsheets, whereas most users
will only have a few columns in their files
- it was jarring to go from full screen and back to the normal layout
- it was a bit change for existing users, where we prefer incremental
changes that make things better without disrupting people’s work
(where possible)
So this commit changes the big table to scroll horizontally in the page,
not take up the full width of the page.
From the fullscreen table it keeps:
- the shimming method to keep the horizontal scrollbar at the bottom of
the screen at all times
It introduces some more refinements to make it nicer to use:
- fixing the first column, so you always know what row you’re on
- adding shadows indicate where there is content that’s scrolled outside
the edges of the container
Two bits of context:
1. As we start dealing with letters, which have more columns, it’s more
likely that people’s spreadsheets won’t fit in our current layout.
2. We already removed the view of the template from the page that shows
row-level errors (eg bad phone number or missing personalisation) in
spreadsheets because you don’t need to know about the content of the
message in order to fix the errors.
This commit goes further by removing anything that isn’t to do with
the errors, including the normal GOV.UK header and the service’s
navigation.
This means the content can go the width of the page, which means it can
be allowed to scroll horizontally without being a usability car
crash. Which means that the layout doesn’t break with a spreadsheet that
has lots of columns.
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.
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.
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.
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.
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.
