Commit Graph

25 Commits

Author SHA1 Message Date
Tom Byers
024812b49a Turn on compatibility mode for GOVUK Frontend
Automatically fixes a load of known issues that
arise when you use GOVUK Frontend at the same time
as GOVUK Frontend Toolkit, GOVUK Template and
GOVUK Elements.
2020-01-07 10:00:08 +00:00
Tom Byers
8291378ee2 Reduce size of footer column headings 2019-12-30 14:30:21 +00:00
Tom Byers
62fbc07bff Use --end class for header nav
Uses `govuk-header__navigation--end` class which
does away with the need for a custom override.

Based on suggestion by @quis:

https://github.com/alphagov/notifications-admin/pull/3181#discussion_r361977771
2019-12-30 14:26:48 +00:00
Tom Byers
810e880bb5 Update all, but one, <details> to component
Includes:

- in gulpfile.js:
  - add details macro to list of those copied from GOVUK Frontend
  - remove existing details polyfill
- convert all, but one, <details> tags to use GOVUK Frontend details component
- add jinja boolean filter to help setting 'open' attribute of <details> tags

Notes on the `<details>` not included in this:

The `<details>` used for notifications items on
the API integration page is not possible to
reproduce with the GOV.UK Frontend macro so I'm
splitting the resulting work out into it's own
commit.
2019-12-17 10:26:16 +00:00
Tom Byers
de6281bc0e Revert "Add GOVUK Frontend details component" 2019-12-16 16:20:03 +00:00
Tom Byers
61eaad9a9f Update all, but one, <details> to component
Includes:

- in gulpfile.js:
  - add details macro to list of those copied from GOVUK Frontend
  - remove existing details polyfill
- convert all, but one, <details> tags to use GOVUK Frontend details component
- add jinja boolean filter to help setting 'open' attribute of <details> tags

Notes on the `<details>` not included in this:

The `<details>` used for notifications items on
the API integration page is not possible to
reproduce with the GOV.UK Frontend macro so I'm
splitting the resulting work out into it's own
commit.
2019-12-06 08:20:49 +00:00
Tom Byers
44492abef7 Add Sass for GOVUK Frontend backlink 2019-12-03 09:59:32 +00:00
Tom Byers
f05f7b2661 Return main content area to position: static
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
2019-11-28 11:32:32 +00:00
Tom Byers
8890b7c4de Fix footer on smaller screens 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
Tom Byers
e09d510ab8 Revert "Replace govuk template with govuk frontend components - rewrite" 2019-11-26 12:14:09 +00:00
Tom Byers
0aa7b7c3cd Fix footer on smaller screens 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
e441e038ea Fix footer on smaller screens 2019-11-22 17:45:45 +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