Makes sure the tabindex we add for focusing is
removed.
Also removes the outer fieldset from the radios
for new templates. We don't wrap form buttons in
fieldsets anywhere else and it doesn't add any
useful semantics to the form.
Adds some extra styles so <fieldset>'s show as
focused when they are.
Also includes replacement of `overflow: hidden` on
sticky elements with a clearfix. hiding overflow
clips the outline and the clearfix can be used for
containing any floats instead. (I'm assuming that's
why it was set here.)
Bigger hit areas are generally better (cf Fitt’s law[1]), as long as
they’re not ambiguous.
This commit enlarges the hit area of the edit links (using a border) so
they fill the same vertical space as the smallest possible row (going
to the full height might look weird because some of these rows get very
tall).
Bigger hit areas are generally better (cf Fitt’s law[1]), as long as
they’re not ambiguous.
This commit enlarges the hit area of the edit links (using a border) so
they fill the same vertical space as the row they sit in.
We were removing the border to ‘unfold’ the corner of the page. This was
causing the size of the element to shrink.
This meant that it you hovered the bottom 1px of the element it would
cycle in and out of the hover state as fast as the browser could render
it.
This commit fixes that by making the border transparent, rather than
removing it.
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.
This commit applies a carefully selected blend of `white-space`,
`display` and `background-position` to ensure that:
- you can always see the full name of the current folder in the heading
(which is useful because people might have mutiple folders with the
same name, differentiated by some king of suffix)
- the clickable are of a single folder or template in the list is 100%
width, for the biggest possible hit area
- the name of a folder or template wraps underneath the folder icon (ie
the folder icon is treated like a normal character, not like a bullet
point)
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.
When mode === 'dialog', sticky elements are
stacked so we need to apply the box shadow to the
top (when sticking to the bottom edge) and bottom
(when sticking to the top edge) elements in the
stack.
From what I can see, we need the version of
`nth-child` that supports targeting by selector.
As of this date, support for this is only in
Safari:
https://caniuse.com/#feat=css-nth-child-of
Until we can use this version of `nth-child`, we
need to use JS to apply the styles.
We want a mode for when a single task is shared
between all sticky elements on the page and that
task has the highest priority on the page. In that
case:
- they should stack together into a single block,
attached to the top/bottom of the viewport
- that block should adjust to the vertical space
available
This should also adjust to the height of the
viewport, dropping whatever elements that don't
fit back into the page flow. When this happens, we
scroll the page so all the parts of the dialog are
seen together at the start of the task.
Uses some CSS to draw some grey lines to show which radios descend from
which.
I don’t feel like the intentation is enough, and it looks a bit messy
because the circles of the radio buttons don’t have straight edges
easily suggest visual alignment.
Copies the design from conditionally revealing content in the design
system:
https://design-system.service.gov.uk/components/radios/#conditionally-revealing-content
Implementation is done with pseudo elements, because borders can’t be
positionned exactly enough.
This is better because it saves vertical space for the contents of the
pop-up menu.
This commit also adds some padding to the cancel and clear buttons, to
make them easier targets to hit.
Being able to see how many things you have selected gives you positive
feedback that reinforces that what you’ve done has been recognised. It
helps you understand the implications of your actions (ie you see ‘3
selected’ before you press the ‘Move’ button). And it gives you an
escape hatch the get out of the state you’re in by providing the ‘Clear’
button.
We also found in prototyping that having a ‘Nothing selected’ message
helps draws people’s attention to the checkboxes when they first
encounter the folders feature.
This commit implements the counter and the cancel button. It tries to
follow the existing patterns for this module.
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.
Right-aligned so it lines up with the right edge of the page.
Moved down so its baseline aligns with the folder title.
In a narrower column so there’s more space for the folder title.
Added a link to cancel letters from the letter notification pages if the
letter is still able to be cancelled. Clicking on this link will show a
confirmation box, and will then cancel the letter if the user confirms.
Things in subfolders need to be in the page so we can search for them.
But the default view should be only the things are the current level.
So we can use CSS to hide items that are below the current level.
So that the live search can filter things, they need to be on the page
when it loads. We want to make search work across folders, so all the
things in subfolders need to be in the page.
They also need the full path appending to them, so that you can tell
which ones are in which folders.
This won’t show items that are in a folder above the one you’re
currently in – my reckon is that when you’re narrowing down by clicking
into a folder that you only want to search for things in that folder.
This makes its positioning consistent with the previous page in the
one-off sending journey.
It gives us more space to put information about the status of the letter
above the preview of the letter.
We’ve moved away from using the expand/collapse pattern on the page
where you click ‘send’. Instead we’re putting the send button in the
sticky footer.
So it’s a bit jarring to still have the expand/collapse on the page you
see after you’ve sent an email. This commit replaces it with the sticky
footer as well.
This is only relevant for emails because:
1. Text messages are generally short enough to fit on the screen
2. We don’t show the status of letters because they don’t really change
Currently if there’s nothing in a folder you just get an empty page.
This looks a bit broken, or like the page hasn’t finished loading.
This commit adds a message to the page to show that it’s intentionally
blank.
The message is contextual based on type of template, because there might
be templates in the current folder, even if you can’t see them at the
moment (because you’re filtering).
This makes the display of folders in the `<h1>` look like the prototype.
It alters the behaviour we’ve initially built here by only ever showing
a maximum of two levels of hierarchy (the current folders and its
parent).
This commit adds:
- checkboxes to let you select a template or folder
- radio buttons to let you select where to move those template(s) and/or
folder(s) to
It only does the `get` part of this work; handling the `post` and
calling API will be done in a subsequent commit.
