It was a `<dl>` before which is kinda weird. Especially when the jobs
table was a real `<table>`.
It also means we can give it column headings so that new and invited
users have a better idea of what it is.
A long email message needs to be collapsed to only show the first few
lines. The problem is that we were doing this by adding a class with
Javascript, meaning that the email wasn’t being collapsed until the
script in the footer ran.
This caused a jump in the page because the browser was painting the
whole email message, then repainting it once it was collapsed.
This commit takes advantage of the `.js-enabled` class added to the
`<body>` by a script in the `<head>` of GOV.UK template.
This means that the email message is collapsed with CSS before the first
paint of the page, so no jump.
This introduces some complexity in how we determine which emails get the
expander toggle. Because they’re already collapsed we can’t get their
height and work out if they’re long enough to need collapsing.
So we need to take a copy of the message, put it off-screen, expand it,
get its height, then remove it from the DOM. Bit of a faff.
Because of this there’s still a quick flash of the toggle if you see an
email message that’s too short to need collapsing. I think this is the
lesser of two evils—very short email messages will be few and far
between in the real world.
These numbers don’t look very clickable white-on-black.
Blue is the colour of links, so lets see if they are more clickable in
blue.
The same clicking-a-big-number thing is also happening on the activity
page, so this commit also changes the activity page to look the same.
We can filter notifications on the activity page by state.
This commit adds counts to those filters.
This is mainly so that we can consistently do the same thing on the job
page later on.
The graphs of template usage feel a bit weird to me now.
1. They are counts of messages, but the numbers are very small
not big like we do everywhere else (eg the counts on a job)
2. There’s a lot of blue, especially for something that you can’t
click
This commit makes the numbers bigger and the bar chart grey.
With sending, delivered and failed all on one line there’s not much
space. When these numbers get relatively big (in the 000s) they can
start mushing into each other.
This commit makes them smaller so that they remain separate.
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.
With the change in implementation in the previous commit, any error
(eg server responds with `500`) would cause the page to not be updated
again.
This is better than the previous implementation, whereby the browser
would re-request as fast as it could until it got a successful response.
This commit handles errors by clearing the render queue if the server
returns an error. So:
- Any updates that would have been performed based on this request are
dropped
- Subsequent updates will be attempted as if it was the first load of
the page, ie after a delay of `x` seconds
The `updateContent` module updates a section of the page based on an
AJAX request.
The current implementation will poll every `x` seconds. If the server
takes a long time to respond, this results in a the browser queuing up
requests. If a particular endpoint is slow, this can result in one
client making enough requests to slow down the whole server, to the
point where it gets removed from the loadbalancer, eventually bringing
the whole site down.
This commit rewrites the module so that it queues up the render
operations, not the requests.
There is one queue per endpoint, so for
`http://example.com/endpoint.json`:
1. Queue is empty
```javascript
{
'http://example.com/endpoint.json': []
}
```
2. Inital re-render is put on the queue…
```javascript
{
'http://example.com/endpoint.json': [
function render(){…}
]
}
```
…AJAX request fires
```
GET http://example.com/endpoint.json
```
3. Every `x` seconds, another render operation is put on the queue
```javascript
{
'http://example.com/endpoint.json': [
function render(){…},
function render(){…},
function render(){…}
]
}
```
4. AJAX request returns queue is flushed by executing each queued
render function in sequence
```javascript
render(response); render(response); render(response);
```
```javascript
{
'http://example.com/endpoint.json': []
}
```
5. Repeat
This means that, at most, the AJAX requests will never fire more than
once every `x` seconds, where `x` defaults to `1.5`.
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 (`…`)
We have tables listing notifications on:
- the job page
- the ‘activity’ page
Previously that had subtly different information, in a different order.
This commit makes them exactly the same.
The first columns of our tables are always headings for the
subsequent columns, even though they go horizontally.
HTML has the `<th>` tag, which doesn’t just have to be used for headings
along the top of a table. So this commit changes the first column to be
a `<th>`.
This then allows us to style these elements differently, specifically
making them 50% wide. This makes pages like the dashboard align more
nicely.
Depends on:
- [ ] https://github.com/alphagov/notifications-utils/pull/40
In research we’ve noticed two problems with the appearance of
placeholders:
1. We are inconsistent about when we display the ((double brackets)).
Sometimes we show them, sometimes we don’t. This doesn’t help user’s
understanding about where the column names in their CSV file come
from, or how they can edit the template to fix any errors.
2. Because they look so different from normal `<textarea>` text, it’s
not immediately obvious that they can be edited just like normal
text. They look more like something that can be dragged/inserted.
So this commit:
1. Makes the brackets always-visible.
2. Makes the text colour of the placeholder `$text-colour`, and only
highlights the name of the ‘variable’, not the brackets themselves.
When a user adds or removes placeholders in their template we should consider
this a ‘breaking change’ and warn them accordingly.
Implementing this mostly relies on using
https://github.com/alphagov/notifications-utils/pull/37
Temporarily storing the new template until the user confirms that they want to
make the changes in done using hidden fields. This is a bit hacky, but the
complexity of making sessions interact with WTForms was just too much to handle.
This commit also changes the example spreadsheet that we show on this page to
look more like a spreadsheet.
This commit refactors the `email_message` and `sms_message` UI components to
take fewer parameters.
`name`, `edit_link` and anything to do with versions are identical for both
text and email messages so I’ve moved them to the pages where you choose a
template or see the versions.
This commit also tidies up the wording and styling of the template history
stuff.
_The code for this is quite hacky and light on tests. But I’d really like to get
it in the app for the research tomorrow to see how well the feature works._
This commit changes the tour from being a set of static screens to some help
which guides you through the process of sending your first test message.
The theory behind this is that what users are really struggling with is the
concept of a variable, rather than the relationship between the placeholders and
the column headers. And like learning to program, the best way to learn is by
taking an example and modifying it to your own needs.
This means that when someone adds their first service we set them up an
example email template and an example text message template. Then there is a
guided, three step process where _all_ the user can do is send a test message to
themselves.
Once the message is sent, the user still has the example templates which they
can edit, rather than having to remember what they’re supposed to be doing.
I don’t think that if there’s only one version of the template that it’s
useful to see the created at date.
The auditing stuff only becomes relevant once someone a template has been
changed.
The details element is fairly new. It doesn’t work in all browsers,
and isn’t keyboard/screenreader accessible even in some new browsers.
This commit adds the Polyfill script from GOV.UK elements[1] which
polyfills these features for browsers that don’t support them.
1. http://govuk-elements.herokuapp.com/typography/#typography-hidden-text
> On the send pages, we have a call to action in the middle of the
> page with lots of words and placeholder buttony looking things
> above and below it....
>
> You'll also see this every time you use this page, even though you
> probably get it after a single use.
>
> So let's wrap it up under a usefully titled (?) help link that
> expands to reveal all the things.
This commit implements the above.
It also rewords the messaging to talk about various spreadsheet formats,
not just CSV.
It’s possible that users will have email and SMS templates with similar
names, and will send them depending on their users’ contact preferences.
So it’s useful to be able to compare how many emails vs SMS you’re
sending, even if the template names are similar.
The dashboard looked a bit table-y. This commit makes four main changes:
- show a bar chart (drawn in CSS) for template usage (only shown if
you’ve used more than one template recently)
- only break down template usage by template name, not template type
(because that’s happening with the big numbers)
- change the style of the ‘show more’ links under each section so that
they are all consistent, and a little less busy (one less keyline)
- remove the ‘recent templates‘ title so that the first two sections of
the page group under ‘in the last 7 days’
- adds a background colour, to words wrapped in `<code>` tags, like we
have for whole snippets of code
- reduces the font size of all code blocks
a) to differentiate them further
b) to fit more on the screen
This commit does two main things:
- adds textboxes to the send yourself a test page, so you can replace
((name)) with ‘Chris’, or whatever your name is
- rejigs the send page a bit to make it clearer what the CSV upload is
for and how to use it
The idea being that, since most users go into ‘send yourself a test’
first, it teaches them about how placeholders work by making them do the
replacing themselves.
When previewing a template on the send page, having the recipient appear
as a placeholder should help reinforce the relationship between the
columns in the CSV and the placeholders.
Then, when previewing a message, having the template populated with the
first recipient’s email address/phone number should reinforce that
relationship again.
Takes the number of emails and SMS fragments sent from:
https://github.com/alphagov/notifications-api/pull/273
Using these numbers it’s possible to show:
- how much of your allowance is left
- or how much you have spent
For now the allowance and rates are hard coded.
Only for users that have manage service.
The big numbers on the home page relate directly to the notifications on
the notification page. So let’s link them. With a _hyper_ link.
This commit actually adds two links, one of which is semantically
correct, and one of which is visually correct, ie makes the whole black
area of the box clickable/hoverable.
Currently, when we update a section of the page with AJAX we replace the
entire HTML of the section with the new HTML. This causes problems:
- if you’re trying to interact with that section of the page, eg by
inpecting it, clicking or hovering an element
- (probably) for screenreaders trying to navigate a page which is
changing more than is necessary
This commit replaces the call to `.html()` with a pretty clever library
called diffDOM[1]. DiffDOM works by taking a diff of the old element and
the new element, then doing a patch update, ie only modifying the parts
that have changed.
This is similar in concept to React’s virtual DOM, while still allowing
us to render all markup from one set of templates on the server-side.
1. https://github.com/fiduswriter/diffDOM
https://www.pivotaltracker.com/story/show/117630691
There is a limit of 50 messages per day in trial mode. Right now, we
don’t tell you this, we just start failing your messages.
This commit adds an error message if you upload a CSV file that has too
many rows in it.
For users who:
- want to send messages from a template
- want to edit templates
For developers:
- who need to get the ID of a template
This commit mainly cleans up the choose template page so there are less
options, and the options that are there are less wordy.
This means:
- moving ‘send yourself a test’ onto the send messages page, and making
it button
- stripping a lot of stuff out of the ‘send from API’ page, so it’s more
obvious what the template ID is
This commit adds some basic type sizes, weights and spacing for HTML
elements scoped inside a `.documentation` container.
It also tweaks some of the Markdown so that it renders the same as it
does on Github.
This commit makes the placeholder hint not be dependent on their only
being one textbox with placeholders on a page.
To do this it needs to be its own module, because the two textboxes are
each self-contained instances of the same module.
The way I’ve gone about this is to make the placeholder hint accept a
list of textboxes it should look in when deciding what message to
display to the user.
Most of the code is extracted from the existing placeholder highlighting
module.
At two lines the subject textbox was expanding even when it was empty.
This commit makes the distance at which textboxes start expanding less
sensitive.
