Skewing the letter results in a bunch of slightly-off-vertical diagonal
lines. This is a bit visually jarring when everything else on the page
lines up vertically or horizontally.
This commit makes the bottom half of the letter straight, by offsetting
it instead of transforming it. The ‘fold’ now has depth, so it has to
be drawn in somehow, that’s what the `:before` is doing.
This might be taking the skeumorphism too far (especially with the
animation). But it’s a way of indicating that the letter will ‘unfold’
if you click it. Might revert this, but let’s see how it feels.
Users might wonder why they can’t see the whole letter. We should make
it obvious that it’s because the letter is folded. We can use CSS to
draw the bottom half of the page behind the top half. With some
transforms this makes it look like the letter is actually folded.
It’s a bit skeumorphic but:
- I think it achives the desired effect
- the way we show emails and text messages is also mildly skeuomorphic
The letter previews take up too much space on the page (more than a
typical email or text message). This means that users have to scroll too
much.
When we send the real letters they will be folded in half to fit in the
envelope.
So by showing the letter previews on the page cropped to half the
letter’s height:
- it reduces the need for scrolling
- it gives an accurate preview of how the letter will be delivered
This is acheived without hard-coding any heights by using a little-known
quirk of CSS, namely that padding set as a percentage is calculated from
the width of the element, even for top/bottom padding. This means that
we can always set the ratio of the displayed letter to be A4 folded in
half – the square root of 2.
The PNGs we were generating looked a bit fuzzy, and the text rendering
was a bit off.
This is because we weren’t rendering them at a high enough resolution.
I’m guessing the default was 72dpi. This commit increases the resolution
to 96dpi, which (locally) seems to be enough to give a good-looking
preview.
Right now we can show what a letter template looks like as a PDF or PNG.
This commit completes the work so this is also possible when:
- showing a template with the placeholders replaced
- showing any version of a template
Also removes dependency on `Exception().message`, which was deprecated
in Python 2.6. See
97f82d565f
for full details.
The flow is as follows:
If the invited user clicks on the /invitation/<token> link in the email (now on /register-from-invite),
then goes to another browser and registers for Notify.
Coming back to the other browser, submit the form for /register-from-invite.
This PR fixes that bug and adds a couple tests for register_from_invite
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.
One of the user needs that we identified is not wanting to be the first
to use it. It feels like a much less risky choice if there are already
other people in government using it.
The easiest way to communicate this is with counts of how many services.
The count of departments is good because it shows breadth, where the
count of services shows depth.
Hard coded for now because we have no automatic way of splitting our
test services from real live services.
