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.
Means you can see, for example emails that have failed.
Means adding:
- logic to generate links which can have a type parameter, a status
parameter, or both
- a ‘pill’ UI component for seeing which filters you currently have
applied
- some logic to change the page title based on which filters you have
applied
This table had a lot of columns, which meant that some of them became
very narrow, wrapping the text awkwardly.
This commit groups some of the data into a chunk, which occupies the
first column.
If you put, for example, a URL in an email template it can be very long.
This can cause it to overflow its container. This commit forces it to
wrap instead.
We should (and do) keep exact copies of SCSS files that have come from
elsewhere so that we can easily upgrade them. But sometimes they don’t
always pass our linting rules, or throw a lot of warnings, which is
noisy.
This commit:
- moves such files into their own subdirectory
- tells SCSS Lint to ignore files in this directory
> At the moment, we have an all email templates page, and an edit an
> individual page.
>
> This gets messy when we refer to templates like the dashboard and the
> activity views. We solve this currently by using anchor links to the
> list page, but this is clunky.
>
> So lets add it, then update the links on the dash and activity to the
> new view page.
>
> Should be a link from the view a single template page, to the template
> hub page.
https://www.pivotaltracker.com/story/show/117349227
It’s a bit silly to have email templates expandable if you’re only going
to reveal a couple more lines.
This commit adds a data attribute which specifies how high (in pixels)
the email template can be before it gets truncated. It then changes the
script to only truncate emails which are naturally taller than this
height.
Currently the cut off is at 200px, which is approximately 8 lines of
text: `200px / (font-size: 19px * line-height: 1.31) = 8.03`
Emails can get very long.
When you’re trying to do other things on the page this results in a lot
of scrolling.
This commit truncates email messages to about 3 lines, and adds a JS
toggle which reveal the full contents of the email.
If a user puts a linebreak in an SMS template then the recipient will
see these linebreaks on their phone. So when we show a preview of an SMS
template, it should have linebreaks in it.
We have lots of keylines in our pages, eg tables, email message previews
This makes the pages look quite cluttered, especially because the
keylines don’t always align.
I think it looks much cleaner without the keylines in the nav, and we
have few enough nav items that we don’t need to chunk them up.
We’ve seen users try to click the upload again when their file doesn’t
upload in time. This is because we’re giving them no feedback that
something is happening.
I reckon that changing the button to a cancel button is the easiest way
to show that something is happening, and also means that (unlike
disabling the send button) the user can’t get stuck if the connection
drops completely.
We put a border on text boxes that have errors. This means that they
take up more space than the layers above them which don’t have borders.
This makes the layers that highlight the fields in a template misalign.
This commit adds a line to make the borders match, which fixes this.
Right now the crown logo in email templates is hosted on Github. Github
is not a CDN.
For now, hosting it in the app is a better solution. At some point we
should have a CDN for all assets on the app, which would be even better.
https://www.pivotaltracker.com/story/show/116952911
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)
Some pages with AJAX should update quickly, because the data is likely
to be changing quickly, and be finished changing sooner. Other pages we
want to have tick over a bit slower.
This commit adds an optional ‘interval’ parameter to the updateContent
modules, which sets how often the page should ping the server for an
update.
It then sets the interval for the dashboard page to be 10 seconds,
rather than the default 1.5 seconds.
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’
