When a table is showing the contents of a CSV file, it should look
something like a spreadsheet.
The minimally skeuomorphic way to do this is by adding row numbers.
This commit doesn’t
- make the row numbers monospace (it’s barely noticeable and doesn’t
reflect what actual spreadsheets do)
- make the first column heading ‘Row’ (again, doesn’t reflect how actual
spreadsheets work, and takes up more valuable space)
This link wasn’t styled, therefore it had, by default, the same colour
as its background (blue).
This commit explicitly sets it to be white, so it is visible against its
background.
SVG images will look sharper and scale more cleanly. However they are
not supported on older browsers[1]
> The <picture> element allows for fallback images when the browser
> doesn't support a specified image format.
`<picture>` is supported in the latest versions of Chrome, Firefox, IE
(Edge), Safari and Android, so all these browsers will get the SVG
version.
Older browsers will fall back to the PNG version.
[1] http://caniuse.com/#feat=svg
[2] https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-svg-as-img-picture
[3] http://caniuse.com/#feat=SVG
This commit makes the ‘how to do placeholders’ box part of the tour,
with the same blue background.
It also adds some Javascript enhancement so that:
- it responds to the contents of the message template
- has a ‘show me’ link which inserts ‘Dear ((name))’ into the template
contents textbox
We’ve found that this has helped people understnad what placeholders
are, and how to do them.
This commit adds a 3 screen tour, similar to those used on GOV.UK Verify
and Passports.
We guerilla tested this on Friday, and it really helped users to build a
mental model of how Notify works, so that when they’re playing around
with it they have a greater sense of what they’re aiming to do. This
makes concepts like templates and placeholders click more quickly.
https://www.pivotaltracker.com/story/show/116710119
Underscores at the start of filenames are a convention that’s supposed
to tell a preprocessor to ignore a file. Since we’re explicitly
specifying which files need to be preprocessed, this isn’t necessary.
Also, it makes SASS lint throw a warning.
When the first heading on the page is inside a grid row, it doesn’t
vertically align properly with the navigation. This is because it
isn’t targeted by the selector that does this for pages without
an initial grid row.
This commit:
- adds an extra selector to target these headings
- makes the ‘add new thing’ buttons maintain their alignment with
the page heading
https://www.pivotaltracker.com/story/show/116052359
- add absolute numbers for failures
- make percentages accurate to 1 decimal place (50.0%)
- make error colour appear if failures go above 3.0%
- make error colour boolean (don’t interpolate between the colours)
The yes/no pattern didn’t work too well, because:
- it didn’t read naturally as a question and answer
- often users left them completely unclicked if they didn’t want to set
the permission (rather than clicking no)
This commit changes both the invite and edit user pages to use
checkboxes to set permissions. If also rewords these pages to read more
naturally, and explain what the permissions mean.
This meant changing some of the view logic around invites and
persmissions, and I ended up refactoring a bunch of it because I found
it hard to understand what was going on.
This applies to any textbox which has placeholders.
There are two reasons to do this:
1. Scrolling in textboxes is fiddly, especially on touch devices
2. Keeping the placeholders aligned with the textbox is fiddly too
These can both be avoided by always having the textbox be larger than its
contents so it never needs to scroll.
By default—and unlike other block-level elements—textboxes dont expand to fit
their contents. The layer with the placeholders in _does_ however, because it’s
a normal block-level element.
Since the layer with the placeholders always has an exact copy of what in the
textbox, we can set the textbox’s height to match the height of the layer with
the placeholders, and do this every time the content changes.
This commit adds two new sections to the dashboard
1. A banner telling you about trial mode, including a count of how many messages
you have left today, which is a restriction of trial mode
2. Panels with counts of how many emails and text messages have been sent in a
day, plus the failure rates for each
It does **not**:
- link through to any further information about what trial mode is (coming
later)
- link through to pages for the failure rates (coming later)
- change the ‘recent jobs’ section to ‘recent notifications’
Would like to test something like this and see how well it works.
Intention of having this page is so:
- template IDs are discoverable (https://www.pivotaltracker.com/story/show/115404593)
- it’s obvious there’s an ‘automated’ way to send messages, as well as the CSV
way (we’ve seen people oblivious to this in research)
On the send messages and manage team pages we have big green buttons for
adding/inviting a new template or team member.
On the add template page it was at the bottom, and often got missed.
On the manage team page it was at the top, but maybe too prominent because it’s
big and green.
This commit tries putting it in the top right of the page instead (except when
the template page is empty, in which case it’s unchanged).
In research we’ve seen users struggle with this. Often they’d type
((Joe Bloggs)) or ((XX/XX/XXXX)) instead of a sensible name.
Lets see if explaining it differently helps.
Error messages were added to the yes/no fields on the invite user page in:
4c323a9a99
This commit fixes the margins and padding on these fields so they look
consistent with how we do validation errors elsewhere.
t
The template for viewing a job was not getting all the variables it needed in
order to display an email template. Hadn’t noticed this before, because email
templates require more variables than SMS templates.
This commit fixes that bug.
Makes uses of the additions to utils in https://github.com/alphagov/notifications-utils/pull/9
This commit strips out a lot of the complex stuff that the views and templates
in this app were doing. There is now a cleaner separation of concerns:
- utils returns the number and type of errors in the csv
- `get_errors_for_csv` helper in this app maps the number and type of errors
onto human-friendly error messages
- the view and template just doing the glueing-together of all the pieces
This is (hopefully) easier to understand, definitely makes the component
parts easier to test in isolation, and makes it easier to give more specific
error messages.
This commit adds some guidance on the ‘Add recipients’ page about what should
be in the CSV file. The guidance is contextual to the template, and based on
the problems that we saw users having yesterday.
The email pattern looked a bit shonky when displayed in a narrower column. This
commit fixes it by making the email’s metadata (eg subject, from) into a table,
which it sort of is. This means that it is more flexible about the size of
container in which it sits.
This commit parameterises all methods in the send view so that they can send
either emails or SMS messages.
It works out what kind of message it is sending from the `template_type`
property of the template object.
This means that the `Template` util class needs to know about these properties,
which means that this commit depends on:
https://github.com/alphagov/notifications-utils/pull/2
This commit does _not_ add tests for sending emails. The existing tests for
sending SMS still pass, but actually sending emails is outside the scope of
this story.
As part of https://github.com/alphagov/notifications-admin/pull/187 the file
upload pattern was changed to auto-submit once a file had been picked. The
form that was submitted was, however, missing a CSRF token, as well as a submit
button for non-JS users.
This commit makes the file upload pattern self-contained, so that it will always
include a form with a CSRF token in a hidden input and a submit button, which is
then hidden when Javascript loads.
The ‘manage templates’ page was almost identical to the ‘send text messages’
page.
This commit consolidates them into one and makes them all hang together.
Part of this means tweaks to the javascript so that files upload as soon as
you’ve chosen them.
This takes the original prototype version of this page, and, using the same
fake data (ie nothing is wired up):
- adds an invite users page
- adds an edit (and delete) user page
Both these pages allow the user to set another user’s permissions.
This commit adds images for the ticks and crosses, so we have control over their
appearance.
This commit adds a new page, which appears after a user enters the name for
their new service. It shows how the service name will appear in emails and
text messages.
This means that the new service is not created until after they have confirmed
that the name is appropriate in context.
This has also involved:
- visual changes to the ‘email template’ pattern, which wasn’t very refined
before
- removing a bunch of words from the enter service name page, because most users
don’t read them, and we reckon that showing a preview is a better way of
getting them to understand what is meant by service name
Still to do:
- validating the the generated email address for a service is unique (on the
API) side
- having the API return the generated email address, rather than determining it
in the admin app
This commit adds a shortcut, which (in the background) does the creation and
uploading of a CSV file for you.
This enables users to send themselves a test message without having to fiddle
about with CSV files.
Since placeholders (almost) work now, it’s worth telling people what the syntax
is.
This commit also removes the ‘template type’ picker, since you can only create
SMS templates at the moment. This will be revisited when we start looking at how
you add an email template.
This commit extends the existing function to validate each row’s phone number
to also validate that all the required data is present.
It does this using the checking that the `Template` class can do when given
a template and a `dict` of values.
This commit adds a first stab at checking whether a CSV file has the right
data to fill the placeholders.
The UI is very much first bash, but I’d like to get this merged and see how it
feels. The main thing is that we’ve got all the bit in place now to do this
logic.
> Tabular numbers have numerals of a standard fixed width. As all numbers have
> the same width, sets of numbers may be more easily compared. We recommend
> using them where different numbers are likely to be compared, or where
> different numbers should line up with each other, eg in tables.
The big number pattern is good candidate for tabluar numbers, especially if
we ever have these numbers update dynamically (in that case tabular numbers
won’t jump around like lining ones would).
This involves:
- removing the hard coded width on any textbox that does placeholder
highlighting
- adding JS to make sure that the extra layers on top of the textbox inherit
the width of the textbox that the user types in (so the layers don’t get
misaligned)
Keeping the textboxes at 2/3 width for consistency with how wide the messages
are on the ‘manage templates’ page.
This commit brings back the ‘link under the green button’ bit of the page footer
component.
Previous it had been changed to be a grey button. But there are use cases for
both, maybe even simultaneously.
