The content length message was making the page jumpy and causing reflows
in three ways. This commit addresses each of those ways:
As the user scrolled
---
The footer went from fixed to sticky and the spacing around the message
changed. This change in spacing was needed so that the message looked
right in both contexts.
I think the best way to resolve this is to not use the sticky footer
when editing text message or broadcast templates.
On my 1440×900 screen I can fit a 5 fragment text message, plus the
‘will be charged as 5 text messages’ message, plus the save button.
Our top 10 screen resolutions according to our analytics are:
Position | Resolution | Percentage of users
---------|------------|--------------------
1 | 1920x1080 | 27.37%
2 | 1280×720 | 11.07%
3 | 1366×768 | 8.88%
4 | 1536×864 | 5.79%
5 | 1440×900 | 4.52%
6 | 1600×900 | 3.71%
7 | 1280×1024 | 3.10%
8 | 1680×1050 | 2.42%
9 | 1920×1200 | 2.33%
10 | 2560×1440 | 1.99%
When the page first loaded
---
The message is empty so takes up no space, then the javascript fires
and inserts the message, taking up a line of space.
This is resolved by making the empty message take up space with a
non-breaking space character.
When the user first typed
---
We previously didn’t show any message until the user started typing.
This meant that, with the above fix, there was a larger than normal
empty space between the textarea and the save button.
This is resolved by always showing the message, even when the user
hasn’t typed anything yet.
***
These are design decisions which made sense when the message was
displayed along side the button, but we’ve had to change now that the
message is above the button.
We feel that this is more appropriate because it’s part of the
information you’re agreeing to before you hit submit.
Sometimes users can missing information that doesn’t start left-aligned
to the column they’re interacting with.
It also makes it closer to the Design System component.
We’re keeping it in the sticky footer, so that it’s always visible no
matter where in the message you’re scrolled to (this means you won’t
have to edited to content then scroll down to check whether you’ve
made it fit).
This looks tidy, and because of the sticky footer it means the message
is always visible, even if your template is quite long. So no matter
where you’re scrolled to in the template you don’t have to scroll to the
bottom to see the count update.
Since the focus background colour is now Design System yellow, the text
should be black for sufficent contrast.
This wasn’t happening because the `:link` selector’s definition had
greater specificity.
When the list of areas is restricted to half the width of the page it
starts to look pretty higgledy-piggledy when you have lots of areas or
areas with very long names.
To do this I’ve ripped out the table markup in favour of headings,
paragraphs and lists. Probably pros and cons for each, but it was really
hard to do the layout with the content in a table.
Make heading break on whitespace - it means if the combination
of name and email address is too long for the line, email address
will go underneath and be more visible.
If email address too big for the allotted space, it will break onto
the next line and all of it will be visible.
Change the HTML & CSS for user-list-item's to
support their content being split into 2 columns
of a grid instead of the edit link being
positioned absolutely.
Also includes:
1. removes `<div>`s from `<ul>` (non-valid HTML)
2. split action link out from permissions list
3. split summary of folder permissions out from
permissions list
4. introduces a class for blocks of text that
appear when there are no items.
5. fixes tests broken by changes to HTML
Since these two paragraphs sit on a blue background, they should have
white text. But this was getting overridden when the `govuk-body` class
was added in a previous commit, and the paragraphs appeared with black
text.
Previously these paragraphs were inheriting their colour from a parent
element. But a class applied directly to the element is more specific.
So this commit fixes the problem by being more specific again, by
applying the colour to the element, in the context of it’s parent’s
class.
24px with 19px is what we use on the uploads page. On notifications page
we use 19px with 16px.
There’s some loose idea that the bigger size is for items that contain
other items.
This also increases the line height for recipients of PDF letters to
make things line up.
Replaced `$gutter` and similar variables such as `$gutter-half` with the
`govuk-spacing()` static spacing function. This uses `govuk-spacing()`
instead of `$govuk-gutter` because `$govuk-gutter` should only be used
for the gaps in between grid columns and we were mostly using `$gutter`
to add more space around elements.
There are other places in the SCSS files where we had hardcoded a
measurement in px which could be replaced with `govuk-spacing`, but this
commit only replaces the existing uses of `$gutter`.
Giving all links the GOVUK Frontend classes, and
the new `govuk-link--destructive` class, means
some styles are already applied.
This strips out those styles.
Note: there's still a good amount of styling, most
of which is to make the focus styles specific to
the space the link is in. These will need
reviewing when GOVUK Frontend is bumped past
version 3 as this brings in new focus styles.
Giving all links the GOVUK Frontend classes, and
the new `govuk-link--destructive` class, means
some styles are already applied.
This strips out those styles.
Note: there's still a good amount of styling, most
of which is to make the focus styles specific to
the space the link is in. These will need
reviewing when GOVUK Frontend is bumped past
version 3 as this brings in new focus styles.
This makes the template statistics section of the dashboard look less
like its own weird thing and more like:
- the templates page
- the upcoming changes to the styling of the received text messages
banner on the dashboard
Includes:
- new content
- added option to turn analytics on/off
- non-js version for the on/off switch
- a banner to confirm user's choice was saved,
shown when they click the save button
- the cookie banner that appears on all other
pages removed from this page
Includes:
- new content
- added option to turn analytics on/off
- non-js version for the on/off switch
- a banner to confirm user's choice was saved,
shown when they click the save button
- the cookie banner that appears on all other
pages removed from this page
It’s useful to get some kind of preview of the report before you
download it.
And if there’s only a few letters in there then you might not even need
to download it at all.
For teams with lots of letters we don’t want the page to load too slowly
so let’s cap the number of displayed items to 50, same as previewing
a spreadsheet.
The GOV.UK Frontend details component macro
wraps its `<summary>` text in a `<span>`.
We put a `<h3>` in the `<summary>` (actually valid
use, based on the spec) so this breaks when the
`<span>` wraps it.
This converts the existing `<details>` tag to use
all the class names the macro creates, but with
all the `<summary>` contents in the `<h3>`.
Also adds font-smoothing to the messages on the
API page. This was previously set globally for
all fonts in the GOV.UK Template CSS but is now
just set for the New Transport 'nta' font.
Included because the messages use the monospace
font so don't have it by default.
Their priority should always add up to 100%. Currently we have to ensure
this by hand. Adding this form means there’s no way to not set their
combined priorities to 100%. And it’s a bit more of an intuitive UI than
two textboxes on separate pages.
It’s not very useful to know the priority of one provider without
knowing the other. And these pages were never really designed, so they
weren’t super easy to understand anyway.
This commit adds a page that takes the first two text message providers
and shows their relative priority against each other.
It follows the design of the events page, as a pattern for showing a
log of historical events.
The GOV.UK Frontend details component macro
wraps its `<summary>` text in a `<span>`.
We put a `<h3>` in the `<summary>` (actually valid
use, based on the spec) so this breaks when the
`<span>` wraps it.
This converts the existing `<details>` tag to use
all the class names the macro creates, but with
all the `<summary>` contents in the `<h3>`.
Also adds font-smoothing to the messages on the
API page. This was previously set globally for
all fonts in the GOV.UK Template CSS but is now
just set for the New Transport 'nta' font.
Included because the messages use the monospace
font so don't have it by default.
Was set to `position: relative` to solve an issue
on the produce page. This introduced other issues
with the sticky JS and the fix is only needed for
the product page so this moves it to that CSS.
The previous fix was applied here:
9441dd0b37
Scanning the page is difficult at the moment because it’s hard to tell
how far apart in time events are, and thereby determine which events
might be related.
Grouping the events by day quickly lets users narrow their focus to
a meaningful subset of the events.
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.
Now that there’s a bit more stuff in the service name area at the top
of the page it looks a bit cramped. Moving the heading down gives it a
bit more space to breath, and associates the heading a bit more closely
with the content after it.
Because some people don’t know they can put their own logo on letters:
> The HM Government Logo is at the top of the letter and we can't see
> a way of putting the [organisation] logo on
> We are intending to use the letter template feature for the first time
> and wondered whether the branding is configurable or whether the HM
> Government header is the standard default.
> Can we replace HM Government logo with our own in the letter? IF yes,
> then how?
> I don't seem to be able to set the branding on the letters to be
> [organisation]. it's always HM government. Is there something that
> needs enabling for this account?
No-one actually wants the HM Government logo (no-one is sending real
letters using it). So we should leave the space blank and put a button
there prompting people to add their own logo.
The contact block fills from the bottom upwards. So if it only has a few
lines then the ‘Edit’ link button sits quite far away from where the
text appears in the letter. This commit moves the link button to bottom
align with the contact block, so it’s always in close visual proximity.
We adjust the spacing under the textbox when doing the send one off
flow. This was based on the assumption that there would always be a
sticky header in the send one off flow.
This assumption is no longer true, so this commit implements the same
spacing in an independent way.
