There are a few places where we missed updating to the new focus styles
because they were using the `$yellow` SASS variable and not the
`$focus-colour` variable.
This commit updates them to the new colour, and where needed adds the
black lower border to match.
Replaced `$gutter` and similar variables such as `$gutter-half` with the
`govuk-spacing()` static spacing function. This uses `govuk-spacing()`
instead of `$govuk-gutter` because `$govuk-gutter` should only be used
for the gaps in between grid columns and we were mostly using `$gutter`
to add more space around elements.
There are other places in the SCSS files where we had hardcoded a
measurement in px which could be replaced with `govuk-spacing`, but this
commit only replaces the existing uses of `$gutter`.
Converts links in the following:
- the page-footer component
- the table component
- the browse-list component
- the notification status, when reporting failures
- validation messaging in the whitelist page
Converts links in the following:
- the page-footer component
- the table component
- the browse-list component
- the notification status, when reporting failures
- validation messaging in the whitelist page
This is semantically more accurate because it’s describing the whole
table, not just the first column.
Adjusting the font-size to make it sit within the ‘In the last 7 days’
section. Adjusting the spacing because now that we have more borders we
don’t need quite so much whitespace to separate different bits of the
page.
This makes the template statistics section of the dashboard look less
like its own weird thing and more like:
- the templates page
- the upcoming changes to the styling of the received text messages
banner on the dashboard
Our table rows take up 65px vertical space.
We also have things that look like rows that say:
- there are no rows
- there are more rows than can be shown on screen
This commit makes them appear the same height.
The mixture of three column/two column layouts on this page has always
looked a bit disjointed. And since the left column will only even
contain the names of months, which are short, it doesn’t need a full
half of the page width.
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.
The right aligned cells contain ‘Change’ links. These have a large
`border` to make the clickable area bigger. This commit removes the
`overflow: hidden` from these cells, so that the larger border remains
visible.
I think this is something we inherited from the Digital Marketplace
code. We only use this for organisation settings are the moment, but
the list markers are redundant because each item will never wrap onto a
new line; it will truncate instead. Still keeps a little sliver of
spacing just so it doesn’t look like a paragraph.
Most of the content of our ‘settings’ tables is in the value, not the
key. The value is in the middle column. So we should allocate the most
space to the value.
The previous layout was based on the premise that most pages divided the
grid like this:
```
_______ _______ _______ _______ _______ _______ _______ _______
| 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 |
| | | | |
| 2/8 | 2/8 | 2/8 | 2/8 |
| | | | |
|–Navigation––––|–Main column–––––––––––––––––––––––––––––––––––|
| | | |
| | 3/8 | 3/8 |
| | | |
| |–Label–––––––––––––––––|–Value––––––––––––Link–|
| | | |
|_______________|_______________________|_______________________|
```
This was because a lot of pages had a left column for emails, and a
right column for text messages, so it felt consistent for tables to
always default to 50% of the width of the main column.
This consistency has faded with time, especially as we added letters.
So this commit changes these tables to allocate more space to the
central column, but still sticking to the grid like this:
```
_______ _______ _______ _______ _______ _______ _______ _______
| 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 |
| | | | | | | | |
| 2/8 | 2/8 | 4/8 |
| | | |
|–Navigation––––|–Main column–––––––––––––––––––––––––––––––––––|
| | | | |
| | 2/8 | 3/8 | 1/8 |
| | | | |
| |–Label–––––––––|–Value–––––––––––––––––|–––Link|
|_______________|_______________|_______________________|_______|
```
Since there’s more space to display the value of a setting this commit
also truncates settings that are too long to fit in the width of the
column (for example a long email address) rather than the previous
behaviour of truncating them. This all just makes things look a bit
cleaner.
Bigger hit areas are generally better (cf Fitt’s law[1]), as long as
they’re not ambiguous.
This commit enlarges the hit area of the edit links (using a border) so
they fill the same vertical space as the smallest possible row (going
to the full height might look weird because some of these rows get very
tall).
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.
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
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
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.
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.
Basically:
- shows all the months from start of given financial year to now or end
of given financial year (whichever is earliest)
- shows a breakdown of free and paid text messages for each of these
months
Depends on:
- [x] https://github.com/alphagov/notifications-api/pull/699
This commit changes the tables of notifications from 3 columns to two
columns. This is so the text has more room, so it doesn’t start
overlapping.
It also makes sure that if the recipient gets really long that it will
be cut off with an ellipsis, rather than overlapping…
I hypothesize that if a notification fails you probably don’t care when
it failed, just that it failed.
The way that we collapse column headings so that they don’t take up any
vertical space is by setting their `font-size` to zero. However this
seems to take them out of the flow of the document, so their top border
also disappears. This commit sets the `font-size` to the smallest
non-zero value to avoid this.
On the dashboard:
- adds a new ‘in the next 24 hours’ section to the dashboard which lists
upcoming jobs
- tweaks some spacing on the dashboard so that it doesn’t look like too
much of a mess
- don’t show scheduled jobs in the table of normal jobs
On the jobs page:
- don’t show scheduled jobs
Tables with a `layout` of `fixed` determine column widths from the
width of the column headings.
We weren’t setting the width of the first column heading, so our tables
were getting out of alignment.
Since this page is more than just your API keys, it should be named
something else.
Hopefully the word ‘integration’ will give non-techical users a clue
that it’s possible to use Notify without doing the CSV dance.
a9f79bcf07 made all tables have a `fixed`
layout. This causes issues with the spreadsheet-looking tables.
This commit treats tables with half-width first columns as the
exception, not the rule, and makes other tables display as before.
The first column of a table is a heading, and will always be 50% wide.
It makes the table harder to scan when the information in the first
column breaks onto multiple lines, and introduces uneven whitespace in
the table.
This commit adds some CSS to force things in the first column to only
ever be one line. If they are too long to fit, they get truncated with
an ellipsis (`…`)
