This is borrowed from an earlier prototype, and is meant to be temporary
– something better than just plain text.
Text in generated content isn’t always announced by screen readers, so
we should definitely move away from that once we understand what text
will be shown on the phone and where it comes from.
International letters aren’t sent by first or second class post. In
keeping with the little touch of skeumorphism, let’s label them with the
commonly recognised marker of international mail instead.
Our usage for these browsers in the last month is down to 0.2% of all
users, or 14 individual users, according to Google Analytics.
These users also visit about half the number of pages per sessions,
suggesting that they’re not signed in.
This is for use in the folder permissions UI. It’s designed to be sized
at the same width as a GOV.UK style checkbox. The CSS to render it is
something like:
```css
background-image: file-url('folder-black.svg');
background-repeat: no-repeat;
background-size: 39px auto;
background-position: 0px 4px;
```
Sometimes people print stuff under where we’re folding the letter. It’s
annoying to not be able to see it.
This commit adds a little detail where, once you’ve sent the letter
you can unfolds the corner to see what’s underneath.
It’s better that we do this for all letters for discoverability.
To avoid the problem of having confusing defaults, the postage is now
set explicitly on every template.
Putting the postage ‘inside’ the letter template makes the interaction
for changing it consistent with how other parts of the template are
added.
Plus everyone loves skeumorphism.
Duplicates e0ecc95ac6
Copies the code from the normal folder icon, and manually tweaks the
colour, to also get the benefits of minification.
***
IE 10 supports using SVG[1] but has some buggy behaviour when they’re
used as background images.
Without an explicit width/height it stretches the viewBox of the SVG to
fill the containing element. This causes the content of the file to
display centered within the viewBox.
Explicitly setting the width and height seems to be the thing that fixes
this. Out of the suggested fixes on Stackoverflow[2] this one seems to
be the most straightforward.
1. https://caniuse.com/#feat=svg
2. https://stackoverflow.com/questions/17944354/svg-background-image-position-is-always-centered-in-internet-explorer-despite-b
It’s a bit rudimentary to only show the current place in the hierarchy
and the parent. You lose a sense of how deep you are.
But we can’t just show the full path, because it can be arbitrarily
long. So what this commit does is show the full path, but truncates the
display of any items. Further-up than the current folder or its parent.
This also helps disambiguate between folders and templates, because
folders are always shown with the folder icon.
This probably won’t affect many teams, because we don’t anticipate a lot
of deep nesting.
After showing this to a few people the consensus seems to be that
‘Templates’ isn’t itself a folder. Therefore it shouldn’t have a folder
icon.
This has the advantage of disambiguating between being in a folder:
> [screenshot]
…and being in a subfolder:
> [screenshot]
IE8 doesn’t support SVG images as CSS backgrounds. We still have users
on IE8, as I saw yesterday.
This commit adds fallback PNG images for these users. The images are
rendered at 1x (because no-one is using IE8 on a retina screen) and
have been run through `pngcrush -brute` for the smallest possible file
size.
This is needed for when the icon is displayed at a larger size. The
thicker blue icon looks too big if it’s displayed at over 20px high
(the use case for this is displaying it at 30px high).
These are copied from the prototype but with the following changes:
- redrawn to snap exactly to pixels
- slightly thicker border for the blue version, and a thinner border for
the black version, so they look better in situ
- run through https://jakearchibald.github.io/svgomg/ for optimal file
size
This commit doesn’t do anything with the images yet, it just adds them
to the repo.
At the moment branding is an undocumented feature. We get a bunch of
support tickets from teams asking its possible.
This commit:
- lets people know it’s possible, and what the options are
- is the first step towards making this process as self-service as
possible
In some cases we will be able to infer a user’s organisation from there
email address, and Google image search their logo. So the experience for
them is that they press a button and government just sorts it out for
you (also known as "the dream").
In other cases we will have to get back to people asking for a copy of
their logo, or to find out about their service, but this is what we have
to do at the moment anyway.
* Moved the notifications code to go to admin to get the the template
preview document rather than go to template preview.
This will remove the logic from admin and place it in api so it is
easier to expand on later when there are precompiled PDFs
* Added some error handling if API returns an API error.
Caught the error and displayed an error PNG so it is obvious something
failed. Currently it displayed a thumbnail of a png over the top of the
loading page, and therefore it wasn't obvious of the state.
Caught the error and displayed an error PNG so it is obvious something
failed. Currently it displayed a thumbnail of a png over the top of the
loading page, and therefore it wasn't obvious of the state.
Letters is now a mature enough feature that we should:
- be raising awareness amongst our users that it’s a thing we offer
- not have letters be a surprise to anyone creating a Notify account for
the first time
Shouldn’t be merged until:
- [ ] https://github.com/alphagov/notifications-api/pull/1600
We’re showing these kinds of logos bigger as of this PR:
https://github.com/alphagov/notifications-utils/pull/170
If we don’t increase the resolution of the asset to be bigger then it
will look blurry.
New image is `108px` high, which is `2 * 54px`, in order for it to look
as good as possible on retina screens.
The message text in our previous illustration was white on light blue,
which didn’t meet WCAG AA colour contrast. WCAG AA requires a contrast
ratio of 4.5:1. The text in our image was only 3.8:1.
The text in this new image has a contrast ratio of 19.8:1, so easily
passes WCAG AAA.
Required a slight tweak to the positioning of the image because it’s
dimensions weren’t exactly the same as the previous one.
The ticks and crosses on the team page are served bigger than actual
size (128×128px). They are then resized using CSS3 `background-size`
to their displayed size (19px).
The reason for doing this is so they display crisply on retina screens.
IE8 doesn’t support `background-size` (see
http://caniuse.com/#feat=background-img-opts). This means that the ticks
and crosses get show at their original size (way too big).
This commit adds resized versions of the ticks and crosses which are
then served to these older browsers only.
Non-outlined text requires the correct font to be installed to display
properly.
Outlined text is the shapes of the letters converted to vector, so it
doesn’t need any font installed to display.
Since we don’t have the right fonts installed on the boxes yet, this
will make things look better.
This addresses part of the ‘is Notify dependable’ group of needs.
The ones it specifically and partially addresses are:
- is it reliable
- how is it supported
There’s more to come in this section, we’re doing this bit now because
it’s a nice conclusion to the page.
This is the first step towards a fully-fledged ‘product’ page.
The needs for the top, blue section of the page are:
- what is Notify?
- can I use it?
- can I test it out?
- how do I create a log in
The needs for the next section of this page (which is the only one added
by this commit) are:
- how will Notify help me work?
- will it work with my service?
This commit shows 4 features of Notify on the home page which address
those needs. They are illustrated because:
1. We want to catch people’s attention – users are reluctant to scroll
on this page because they just want to click the ‘create account
button’. But we hypothesize that they will get on better
with Notify if they look at some of this stuff first.
2. The concepts that they’re talking about are hard to explain with just
words because they’re quite abstract. The illustrations help us be
more specific.
3. Feedback we got from user research was that the product page didn’t
give users any sense of what it was like to actually use Notify.
