Commit Graph

434 Commits

Author SHA1 Message Date
Tom Byers
ab4ec7197a Put cookies message back in
The cookie_message block was part of GOV.UK
template but is not included in the GOV.UK
Frontend template.

This adds it back in along with JS to set the
cookies from GOV.UK template and styles, taken
from the Design System's website (which I assume
has the right colour contrast).
2019-11-27 14:15:32 +00:00
Tom Byers
e09d510ab8 Revert "Replace govuk template with govuk frontend components - rewrite" 2019-11-26 12:14:09 +00:00
Tom Byers
b9c035fdab Put cookies message back in
The cookie_message block was part of GOV.UK
template but is not included in the GOV.UK
Frontend template.

This adds it back in along with JS to set the
cookies from GOV.UK template and styles, taken
from the Design System's website (which I assume
has the right colour contrast).
2019-11-25 11:43:30 +00:00
Tom Byers
e02f94f238 Revert "Replace govuk template with govuk frontend components" 2019-11-25 10:37:35 +00:00
Tom Byers
7f0b207f0a Put cookies message back in
The cookie_message block was part of GOV.UK
template but is not included in the GOV.UK
Frontend template.

This adds it back in along with JS to set the
cookies from GOV.UK template and styles, taken
from the Design System's website (which I assume
has the right colour contrast).
2019-11-22 17:44:17 +00:00
Chris Hill-Scott
32cc08432c Merge pull request #3160 from alphagov/no-min-height-sticky-button
Remove min-height from sticky submit buttons
2019-11-15 12:35:21 +00:00
David McDonald
4ca4cef1b3 Merge pull request #3144 from alphagov/choose-postage
Choose postage
2019-11-05 10:14:40 +00:00
David McDonald
1c3095329b Change radio buttons to inline
Adds ability to have inline radio buttons using the fieldset.inline
functionality from gov.uk elements.

Then implements this for the radio buttons for choosing postage
class.

Also overrides the gov uk elements styling for the inline radio
buttons to place them slightly closer together as this looks
better.
2019-11-01 10:47:42 +00:00
Chris Hill-Scott
4e026bc306 Make sure all sticky footer variants are aligned
The bottom margin should always be consistent. Height of footers doesn’t
have to be consistent. Items on the left and right should baseline
align.
2019-10-31 10:49:02 +00:00
Chris Hill-Scott
2732a0b80b Make things line up on the usage page
The mixture of three column/two column layouts on this page has always
looked a bit disjointed. And since the left column will only even
contain the names of months, which are short, it doesn’t need a full
half of the page width.
2019-10-29 16:18:31 +00:00
Chris Hill-Scott
8a5e7a00dc Remove min-height from sticky submit buttons
It makes them get out of alignment with other things in sticky footers.

The problem of buttons getting too close to the bottom of the window can
be fixed with some min-height on the container instead.
2019-10-25 15:15:44 +01:00
Chris Hill-Scott
5d82dc8b36 Make text transparent on conditional placeholders
Otherwise you have a visible copy of the text underlapping the text in the textbox. Which, when they don’t quite align makes the text look bold. Seems to be more noticeable on some browsers/operating systems than others, but a bug all the same.
2019-10-11 10:05:51 +01:00
Tom Byers
d0b6f844ce Move focus of legends to their fieldsets
When testing with the JAWS screenreader, we found
a bug around getting it to announce the name of a
fieldset when we ask the user to select from it.

Bug on pivotal:

https://www.pivotaltracker.com/story/show/165565088

The flows for adding a new template and moving a
template/folder both need the user to select an
option from a radio group. When we add the radio
group to the UI, we need to move focus to it so
the user is in the right place to choose an
option.

The expectation of the original code was that
focusing the field set's legend would work like
focusing the heading of a section of content and
announce the label of it. This didn't happen with
JAWS. This tries to achieve the same by focusing
the whole fieldset instead.

When doing this we also hide the focus style, to
follow the convention for this across www.gov.uk.
2019-10-01 08:26:08 +01:00
Chris Hill-Scott
47d5593f5f Merge pull request #3114 from alphagov/no-ie8
Remove code specific to IE8 and below
2019-09-11 11:14:27 +01:00
Chris Hill-Scott
e0ab43f988 Let GPs nominate service name
Most GP practice services are named after the practice, which is the
organisation.

So rather than make people re-type the name of their organisation (and
potentially make a typo) let’s just let them say ‘yes, that’s the name
of my organisation’.
2019-09-05 15:01:12 +01:00
Chris Hill-Scott
cc713b4057 Remove code specific to IE8 and below
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.
2019-09-03 10:10:27 +01:00
Tom Byers
26e1e3a5cb Remove CSS tied to .js-enabled class
Not as obviously connected to expandCollapse but
no longer needed.
2019-08-30 08:44:14 +01:00
Tom Byers
c9c3f90fd8 Remove CSS used by expandCollapse.js 2019-08-29 16:42:47 +01:00
Tom Byers
64c6d1fbc7 Make clicking 'Done' preserve any selection made
Clicking the 'Done' button resets the module to
its default state. 'Done' implies you've
completed your selection so this doesn't make
sense.

This changes it so any selection made will be
confirmed when 'Done' is clicked.
2019-08-07 10:23:09 +01:00
Chris Hill-Scott
c1a5383a3f Even out the spacing on the settings page
This makes the spacing above and below each heading on the settings
page consistent.
2019-07-22 11:37:15 +01:00
Chris Hill-Scott
e4abc74b80 Add a tiny bit more spacing under the folder heading when the user has no template search or channel filters 2019-07-12 16:03:52 +01:00
Chris Hill-Scott
7901d08781 Style soft folder separators
If you can see a folder but not its parents we concatenate the
breadcrumb into one link.

This styles folder separators inside these links a bit differently to
make them do a bit less visual separation than the ones outside the
links.
2019-07-03 15:17:36 +01:00
Chris Hill-Scott
e731dd70d1 Use chevrons not slashes to separate folders
It looks weird to have two different visual treatments for showing a
navigable hierarchy.

I reckon losing the slash won’t make things less folder like – Windows
for example uses chevrons as foler separators.
2019-07-03 15:17:36 +01:00
Chris Hill-Scott
acd992183c Use design system icon for breadcrumb
This is nicer because it’s drawn with CSS (so is resolution independent)
and is a bit darker to match the border colour (visually if not
actually).
2019-07-03 15:17:36 +01:00
Chris Hill-Scott
b4dde3842e Make spacing below template folder heading even
It was a bit inconsistent depending on whether there was/wasn’t a search
box or channel tabs on the page.

I found this just too complicated to do in pure CSS, so added a new
spacing class which gets toggled on and off.
2019-07-03 15:17:35 +01:00
Chris Hill-Scott
003e926f27 Stop service name overflowing
This is just to stop it looking broken. 50% column width chosen to
maintain the rhythm of the grid.
2019-07-03 15:17:35 +01:00
Chris Hill-Scott
555b811fa7 Push headings down a bit
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.
2019-07-03 15:17:35 +01:00
Chris Hill-Scott
6338795e52 Make ‘switch service’ the same as ‘Change’ links
It looks inconsistent when the switch service link is 16px, right next
to a change link and organisation breadcrumb which is 19px.
2019-07-03 15:17:35 +01:00
Chris Hill-Scott
d382385b69 Make things line up
This commit aligns and spaces elements on the page to show which are
related to others.

This needs some adjustment now because we potentially have more things
on the page now – we need to make space for them.
2019-07-03 15:17:34 +01:00
Chris Hill-Scott
96bd0a55b2 Move the breadcrumb inside the link
Putting the background image on the preceding breadcrumb item will allow
us to replace it with a pseudo element in a subsequent commit.
2019-07-03 15:17:34 +01:00
Chris Hill-Scott
27f1eeca0b Restrict max width of org and service name
Service names can be quite long. Organisation names can be quite long.
Together they can be very long. This isn’t great because:
- sometimes they overflow the width of the container, which looks broken
- even if they’re not that long they can make the UI look quite
  cluttered

This commit restricts them to widths that should stop the above from
happening. In the case of the organisation name the width has
specifically been chosen to line up with the ¼ and ¾ column grid
used by the navigation.
2019-07-03 15:11:42 +01:00
Chris Hill-Scott
eb3f9aad2a Add pages to let users accept the agreement online
At the moment, the process for accepting the data sharing and financial
agreement is:

1. download a pdf
* print it out
* get someone to sign it
* scan it
* email it back to us
* we rename the file and save it in Google Drive
* we then update the organisation to say the MOU is signed
* sometimes we also:
 * print it out and get it counter-signed
 * scan it again
 * email it back to the service

Let's not do that any more.

When the first service for an organisation that doesn't have the
agreement in place is in the process of going live, then they should
be able to accept the agreement online as part of the go live flow. This
commit adds the pages that let someone do that.

Where the checklist shows the agreement as **[not completed]** then
they can follow a link where they can download it (as happens now).
From here, they should then also be able to provide some info to accept
it. The info that we need is:

**Version** – because we version the agreements occasionally, we need to
know which version they are accepting.  It may not be the latest one if
they downloaded it a while ago and it took time to be signed off

**Who is accepting the agreement** – this will often be someone in the
finance team, and not necessarily a team member, so we should let the
person either accept as themselves, or on behalf of someone else. If
it's on behalf of someone else we need to the name and email address of
that person so we have that on record. Obvs if it's them accepting it
themselves, we have that already (so we just store their user ID and
not their name or email address).

We then replay the collected info back in a sort of legally
binding kind of way pulling in the organisation name too. The wording
we’re using is inspired by what GOV.UK Pay have. Then there’s a big
green button they can click to accept the agreement, which stores their
user ID and and timestamp.
2019-06-19 13:14:02 +01:00
Chris Hill-Scott
1a3df7039f Fix rendering of scrollable tables
The scrollable tables code styles some of the cells in the target table
by looking for the `table-field-center-aligned` class.

This class was renamed in 0512f40ad3

This commit updates the scrollable tables code to refer to the new
classname, which means that things should line up properly when drawing
the table.
2019-06-17 16:15:34 +01:00
Chris Hill-Scott
451fadb1b3 Hide H1 for grid layout
With the `<h2>`s on this page it’s fairly explicit what the page is
listing, so user doesn’t need the context provided by the `<h1>`.
2019-06-13 13:47:29 +01:00
Chris Hill-Scott
3137c5acf6 Remove spacing tweak on loading indicator
It’s not needed when there’s no whitespace around the text.
2019-05-23 11:34:34 +01:00
Chris Hill-Scott
2dc731c2d8 Merge pull request #2971 from alphagov/loading-indicator
Add a loading indicator component
2019-05-17 11:18:14 +01:00
Chris Hill-Scott
5b4edc92fd Add a loading indicator component
This will let us design a page which tells the user they need to wait.
2019-05-15 15:29:47 +01:00
Tom Byers
ccd09b9fd7 Revert "Merge pull request #2969 from alphagov/revert-2956-progressively-enhance-folder-permissions"
This reverts commit 8266f3d65c, reversing
changes made to b2a38fe222.
2019-05-15 14:26:51 +01:00
Tom Byers
0e6caa7fda Revert "Progressively enhance folder permissions" 2019-05-13 16:19:24 +01:00
Tom Byers
b2a38fe222 Merge pull request #2956 from alphagov/progressively-enhance-folder-permissions
Progressively enhance folder permissions
2019-05-13 14:41:43 +01:00
Tom Byers
cd5f6251d1 Adjust selection summary spacing
Co-Authored-By: Chris Hill-Scott <me@quis.cc>
2019-05-13 13:15:45 +01:00
Tom Byers
bbc962298c Make selection summary use tabular numbers
Stops them jumping around as much when the numbers change. As requested in: https://github.com/alphagov/notifications-admin/pull/2956/files#r283271635

Co-Authored-By: Chris Hill-Scott <me@quis.cc>
2019-05-13 13:07:28 +01:00
Tom Byers
fe457464a8 Fixes for folder .svg icon
Match format of .svg file to others in the same
folder to fix issues in IE11.

Add a .png alternative for IE8 users.
2019-05-10 14:59:31 +01:00
Tom Byers
7328649537 Combine 'Change' and 'Done' buttons into one
Includes addition of classes by JS to ensure CSS
selectors don't have to reference the data
attributes.
2019-05-10 14:16:03 +01:00
Tom Byers
1ffa8c8915 Only show the folder icon if fields are folders 2019-05-09 11:25:28 +01:00
Chris Hill-Scott
3dc2130926 Align baseline of summary text with button text 2019-05-09 10:30:46 +01:00
Chris Hill-Scott
89478ac2ca Use larger folder icon 2019-05-09 10:27:14 +01:00
Tom Byers
33d074c00a Allow nested checkboxes to be collapsible
Expands the API of the macro to allow nested
checkboxes to have a summary tracking the current
selection, the fieldset to expand/collapse and
buttons to be added to allow jumping between
states.

Includes making 'Done' button inline on mobile.
Helps differentiate it form the form submit.
2019-05-08 17:08:16 +01:00
Chris Hill-Scott
a67e14b900 Even out the spacing a bit 2019-05-02 14:17:14 +01:00
Chris Hill-Scott
71835a4182 Style radio select controls as buttons
For the upcoming user permissions enhancements we want to differentiate
between actions that take the user to a new page (eg changing a user’s
phone number or email address) and actions that reveal extra controls in
the current page (which will be changing the folders a team member can
see).

This change will be inconsistent with the interaction for scheduling a
job, which uses links to reveal other controls in the page.

This commit changes the scheduling interaction to use grey ‘secondary’
buttons for revealing extra controls in the page, for consistency with
the upcoming folder permissions work.
2019-05-02 11:19:29 +01:00