Commit Graph

616 Commits

Author SHA1 Message Date
Tom Byers
fe3baa25c2 Replace GOVUK Template anchor focus styles
Not moved across when the GOVUK Template CSS was
removed.
2019-11-27 16:42:07 +00:00
Tom Byers
39d955d93f Replace anchor style removed by mistake
Removed in:

c8de91c161
2019-11-27 14:15:32 +00:00
Tom Byers
34ef51980c Move global CSS to top of cascade
The global CSS we're keeping from the GOVUK
Template styles needs to go in the same position
as it was before, above GOVUK Elements.

This means we can't use any variables from GOVUK
Frontend in it so this changes the link colour
back to what it was (until all links get updated).
2019-11-27 14:15:32 +00:00
Tom Byers
8890b7c4de Fix footer on smaller screens 2019-11-27 14:15:32 +00:00
Tom Byers
ae27e94a35 Remove GOVUK Template files
Includes Sass that targeted GOV.UK Template HTML
and also moves some link styles to `globals.scss`.

Also removes bits of frontend build that copied
over GOVUK Template files.
2019-11-27 14:15:32 +00:00
Tom Byers
c06c8c0e5c Put basic print stylesheet back in
Replicates the GOV.UK template one, adjusted for
the GOV.UK Frontend template HTML.
2019-11-27 14:15:32 +00:00
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
e1b7042ea3 Add js-hidden class to globals.scss
It's used by the conditional content pattern
from GOV.UK Elements (which uses JS from the
GOV.UK Frontend Toolkit).
2019-11-27 14:15:32 +00:00
Tom Byers
a2075ecdd2 Replace removed global GOV.UK Template styles
GOV.UK Template included styles targeting elements
by their tag name, so affected all elements of
that type. Removing these files removes certain
styles from the top of the cascade.

Moving all components to GOV.UK Frontend (that are
possible) should fix this further down the
cascade. This adds them back to plug the gap in
the cascade until that work happens.
2019-11-27 14:15:32 +00:00
Tom Byers
bc8ebad421 Set vertical spacing for <main>
GOV.UK Frontend gives `<main>` different padding
on the top and bottom to us.

This adds our spacing to `<main>` for pages
without a side nav (except the product page which
is special) and to the row containing the `<main>`
and side nav sections on pages that have a side
nav.
2019-11-27 14:15:32 +00:00
Tom Byers
9441dd0b37 Make <main> section position: relative
The content of the GOV.UK Frontend header
component is `position: relative`. This changed
the [default z-index
stacking](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index_
so it was above `<main>`.

This aligns `<main>` with the header, meaning
`<main>` appears above it due to being below it in
the document.
2019-11-27 14:15:32 +00:00
Tom Byers
f26ea5b3d8 Make header & footer components look like Notify
Notify has 4 columns of links in the footer and
its header navigation aligns to the right on
desktop.
2019-11-27 14:15:32 +00:00
Tom Byers
6712327315 Add GOVUK Frontend Sass, configured for this app
Like:

https://github.com/alphagov/govuk-frontend/blob/v2.13.0/package/all.scss

...but specifying the components to include,
starting with the ones that make up the
govuk_template and setting any variables needed.
2019-11-27 14:15:31 +00:00
Chris Hill-Scott
98edecbe29 Stop recipient address wrapping to multiple lines
Stops the sticky footer getting too tall. Added a title attribute so
people can hover and see the whole thing if they really need to.
2019-11-27 11:24:50 +00:00
Tom Byers
e09d510ab8 Revert "Replace govuk template with govuk frontend components - rewrite" 2019-11-26 12:14:09 +00:00
Tom Byers
0ff6054dac Move global CSS to top of cascade
The global CSS we're keeping from the GOVUK
Template styles needs to go in the same position
as it was before, above GOVUK Elements.

This means we can't use any variables from GOVUK
Frontend in it so this changes the link colour
back to what it was (until all links get updated).
2019-11-25 11:43:30 +00:00
Tom Byers
0aa7b7c3cd Fix footer on smaller screens 2019-11-25 11:43:30 +00:00
Tom Byers
c8de91c161 Remove GOVUK Template files
Includes Sass that targeted GOV.UK Template HTML
and also moves some link styles to `globals.scss`.

Also removes bits of frontend build that copied
over GOVUK Template files.
2019-11-25 11:43:30 +00:00
Tom Byers
d435301895 Put basic print stylesheet back in
Replicates the GOV.UK template one, adjusted for
the GOV.UK Frontend template HTML.
2019-11-25 11:43:30 +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
3109f733ff Add js-hidden class to globals.scss
It's used by the conditional content pattern
from GOV.UK Elements (which uses JS from the
GOV.UK Frontend Toolkit).
2019-11-25 11:43:30 +00:00
Tom Byers
32eaebbe1e Replace removed global GOV.UK Template styles
GOV.UK Template included styles targeting elements
by their tag name, so affected all elements of
that type. Removing these files removes certain
styles from the top of the cascade.

Moving all components to GOV.UK Frontend (that are
possible) should fix this further down the
cascade. This adds them back to plug the gap in
the cascade until that work happens.
2019-11-25 11:43:30 +00:00
Tom Byers
5b11b63e07 Set vertical spacing for <main>
GOV.UK Frontend gives `<main>` different padding
on the top and bottom to us.

This adds our spacing to `<main>` for pages
without a side nav (except the product page which
is special) and to the row containing the `<main>`
and side nav sections on pages that have a side
nav.
2019-11-25 11:43:30 +00:00
Tom Byers
f692d876f3 Make <main> section position: relative
The content of the GOV.UK Frontend header
component is `position: relative`. This changed
the [default z-index
stacking](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index_
so it was above `<main>`.

This aligns `<main>` with the header, meaning
`<main>` appears above it due to being below it in
the document.
2019-11-25 11:43:30 +00:00
Tom Byers
a2367bcab8 Make header & footer components look like Notify
Notify has 4 columns of links in the footer and
its header navigation aligns to the right on
desktop.
2019-11-25 11:43:30 +00:00
Tom Byers
47f1e90546 Add GOVUK Frontend Sass, configured for this app
Like:

https://github.com/alphagov/govuk-frontend/blob/v2.13.0/package/all.scss

...but specifying the components to include,
starting with the ones that make up the
govuk_template and setting any variables needed.
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
c93acf2362 Move global CSS to top of cascade
The global CSS we're keeping from the GOVUK
Template styles needs to go in the same position
as it was before, above GOVUK Elements.

This means we can't use any variables from GOVUK
Frontend in it so this changes the link colour
back to what it was (until all links get updated).
2019-11-22 17:45:46 +00:00
Tom Byers
e441e038ea Fix footer on smaller screens 2019-11-22 17:45:45 +00:00
Tom Byers
278a70ecc7 Remove GOVUK Template files
Includes Sass that targeted GOV.UK Template HTML
and also moves some link styles to `globals.scss`.

Also removes bits of frontend build that copied
over GOVUK Template files.
2019-11-22 17:45:45 +00:00
Tom Byers
faf2357ddf Put basic print stylesheet back in
Replicates the GOV.UK template one, adjusted for
the GOV.UK Frontend template HTML.
2019-11-22 17:44:17 +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
Tom Byers
19823e8ac1 Add js-hidden class to globals.scss
It's used by the conditional content pattern
from GOV.UK Elements (which uses JS from the
GOV.UK Frontend Toolkit).
2019-11-22 17:44:17 +00:00
Tom Byers
905dce2f49 Replace removed global GOV.UK Template styles
GOV.UK Template included styles targeting elements
by their tag name, so affected all elements of
that type. Removing these files removes certain
styles from the top of the cascade.

Moving all components to GOV.UK Frontend (that are
possible) should fix this further down the
cascade. This adds them back to plug the gap in
the cascade until that work happens.
2019-11-22 17:44:17 +00:00
Tom Byers
6957a95121 Set vertical spacing for <main>
GOV.UK Frontend gives `<main>` different padding
on the top and bottom to us.

This adds our spacing to `<main>` for pages
without a side nav (except the product page which
is special) and to the row containing the `<main>`
and side nav sections on pages that have a side
nav.
2019-11-22 17:44:17 +00:00
Tom Byers
e366bdadb0 Make <main> section position: relative
The content of the GOV.UK Frontend header
component is `position: relative`. This changed
the [default z-index
stacking](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index_
so it was above `<main>`.

This aligns `<main>` with the header, meaning
`<main>` appears above it due to being below it in
the document.
2019-11-22 17:44:17 +00:00
Tom Byers
8fc510384c Make header & footer components look like Notify
Notify has 4 columns of links in the footer and
its header navigation aligns to the right on
desktop.
2019-11-22 17:44:17 +00:00
Tom Byers
32aba71ab7 Add GOVUK Frontend Sass, configured for this app
Like:

https://github.com/alphagov/govuk-frontend/blob/v2.13.0/package/all.scss

...but specifying the components to include,
starting with the ones that make up the
govuk_template and setting any variables needed.
2019-11-22 17:44:16 +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
Chris Hill-Scott
8782049548 Merge pull request #3165 from alphagov/letters-always-on-usage
Always show letters on the dashboard and usage page
2019-11-04 14:49:47 +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
e73ce0561d Merge branch 'master' into add-get-started-page 2019-10-31 10:54:11 +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
d298949a5a Style the page to look like the Pay one 2019-10-31 10:10:01 +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
b2ebaf153a Chunk events by day
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.
2019-10-23 13:06:25 +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