Detach all methods from sticky reference so they
can be attached to different objects.
Split sticky into stickAtTop and stickAtBottom and
make new versions of all methods and properties
specific to stickAtBottom.
Add CSS for stickAtBottom and call on load
It’s annoying that this button moves after you click on it. It’s
happening because the API key is wrapping onto multiple lines.
This commit fixes the height of the container so that it doesn’t reflow
when it has less content in it.
Uses a bit of flexbox to vertically centre the text.
The prototype for folders tightens up the templates page to fit more
templates on the screen. Partly because it looks better, and partly
because the sticky bottom toolbar means that there’s less available
space. So reducing the spacing means that roughly the same number of
templates fit on the screen.
For those who won’t see the checkboxes (people who don’t have the send
permission) or use folders, this just means that they’ll have slightly
less scrolling to do if they have a lot of templates.
Doing this before adding the folders so that:
- we roll out changes more gradually
- once we add the folders we can see if the spacing has stayed
consistent
- changing where the margins are applied to resolve the inconsistent
spacing when there is/isn’t tabbed navigation or a search box shown
We’ve found a significant property of users (about 25%) who request to
go live aren’t completing all the items on the checklist.
In 1 of 6 (17%) of the usability testing sessions we did on this process
we saw someone skip straight past the checklist page because of big
green button syndrome. While 1 in 6 people would normally be a small
number[1] in the context of a usability testing session, it’s enough to
cause a big workload for our team (assuming it is the sole cause of
people not completing the items on the checklist).
The initial reason for using the tick cross pattern for the checklist
was:
- it was coherent with the rest of Notify
- the task list pattern didn’t have a way of showing that something
still needed doing – it put more visual emphasis on the things
the user had already done
There’s been some interesting discussion on the GOV.UK Design System
backlog about users failing to complete items in the task list. A few
people have tried different patterns for communicating that items in the
task list still need ‘completing’.
So this commit:
- adds a task list pattern
- uses the task list pattern for the request to go live checklist
The task list is adapted from the one in the design system in that:
- the ‘completed’ label has a black, not blue background (because Notify
often uses blocks of blue to indicate something that’s clickable)
- it adds an explicit ‘not complete’ label which is visually not
filled in (sort of how ticked/unticket radio buttons work)
1. With the caveat that looking only at task completion, or quantifying
qualitative not good practices and the intention here is to show that
the numbers are close enough to say that they could be symptomatic of
the same problem. Leisa Reichelt’s Mind the Product talk is good on
this https://vimeo.com/284015765
This commit improves the code that previews a hex colour when setting up
or changing an email branding.
Specifically it:
- refactors the Javascript to conform to our patterns (module pattern,
preprocessed with Gulp)
- makes the code work when there are multiple colour previews on one
page
It also does some visual prettifying, because I couldn’t help myself…
One of the big things we found in user research was that people were
uncertain what the effect of giving someone basic view was.
So in the spirit of ‘show don’t tell’, this commit adds a way for users
to preview basic view. They can go into the preview and click around as
much as they like, just as if they really had the basic view assigned to
them.
Once they have seen enough they can return to the settings page where
they can decide whether or not to switch basic view on for real.
In research we found that:
- people didn’t initially realise that the permissions expanded when the
‘admin’ option was selected
- not having all the options visible at once makes it hard to know what
permissions you are (and more importantly aren’t) giving to people
This commit makes it so that:
- the options within the ‘admin’ option are always visible
- a bit of Javascript logic makes it so you can pick ‘caseworker’ and
‘manage service’, for example (by deselecting one when you pick the
other)
This commit changes the form that the user sees when inviting or editing
another user, if the service has the ‘caseworking’ permission set.
This will allow creating a new type of user, one who only has the
`send_messages` permission, without the `view_activity` permission.
We are doing this because we think there are a number of services with a
lot of users who don’t need to see the dashboard, or the other team
members, and that we can make a simpler interface for these users.
Added a new platform admin page, at '/plaform-admin-new' which shows
different data. This no longer offers the option to filter by test-key,
only by date, and also gives a more detailed break-down of the
notifications and failures sent with a normal / research key.
The existing platform admin stats page ('/platform-admin') has not been
deleted yet so that both pages can be compared.
The contact link on the settings page should be truncated instead of the
text being wrapped and overflowing on to multiple lines. This adds in an
option to the text_field macro to truncate long text fields. This
setting has been used to truncate the API callback URLs too on the
services/<service_id>/api/callbacks page.
In research I’ve sometimes seen people click the wrong nav item. I
reckon that people’s concept of which pages live behind which navigation
items isn’t very strong.
We can reinforce this relationship by showing, for every page, which is
the corresponding nav item. The conventional way of doing this is either
with some kind of emphasis, typically colour or bold. I’ve gone for bold
because colour would be weird.
---
The implementation of this is quite loosely coupled to our application
code because:
- our application code is not well structured (eg we don’t make any use
of blueprints)
- spreading this change across lots of files in our application would
make it harder to test without actually hitting each endpoints; such
tests would be slow and verbose
So I’ve gone for more of a meta approach. Rather than testing that each
endpoint has a specific navigation item selected, I’ve gone for
validating that:
- all endpoints being mapped to are real
- all endpoints have _a_ selected navigation item (or are specifically
excluded)
This means that it’s impossible to add, change or remove an endpoint
without also updating which navigation item should be selected. And the
actual mapping is so declarative that it testing it would be redundant.
We have teams who are using the dashboard every day, and being
confronted with this alarming yellow banner. There’s no action they need
to do since they’re only looking at the messages sent.
So this commit removes that banner from the dashboard. It also removes
the CSS and HTML for it from the app entirely because this is the last
remaining place we were using this style of banner.
Things in CSS stack top to bottom like this:
- image
- `box-shadow`
- `background`
We are drawing the border around the letter using `box-shadow`. This was
working fine because the images of our letters had a transparent
background, so you could see the border through them.
At some point our letters have changed to have a white background. So
you can no longer see the border.
This commit:
- adds a new pseudo element which stacks above the image of the letter
- moves the border from the image itself to said pseudo element
It was too far apart.
Can’t be fixed by reducing the margin on the table because this would
bring the table too close to other elements when the ‘only showing’
thing isn’t present.
It’s noticeable when clicking from row to row in the spreadsheet that
the page jumps around a fair bit on load because there are a couple of
Javascript-powered components.
This commit makes sure:
- the radio select component doesn’t change height when rendering for
the first time
- the scrollable table doesn’t show parts of the table that should be
hidden by overflow for a fraction of second before all the JS has
run
- the right-hand shadow on horizontally scrollable tables doesn’t fade
in on initial page load but shows at 100% opacity immediately
Fitt’s law[1] states that bigger click areas are quicker and easier for
people to click. Therefore we should make click areas as big as
possible, without being ambiguous about what the outcome of clicking
will be or increasing the potential for accidental clicks.
The click areas of the row numbers in the table were very small – this
commits makes them as big as the containing table cells.
Uses this technique to achieve the bigger click areas without disrupting
the layout:
http://authenticff.com/journal/css-pro-tip-expanding-clickable-area
1. https://en.wikipedia.org/wiki/Fitts%27s_law
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.
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.
