Commit Graph

714 Commits

Author SHA1 Message Date
Chris Hill-Scott
7578bbcf0b Fix paragraphs with reversed-out text
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.
2020-06-02 11:10:09 +01:00
Chris Hill-Scott
85dbe19611 Add envelope for international letters
International letters aren’t sent by first or second class post. In
keeping with the little touch of skeumorphism, let’s label them with the
commonly recognised marker of international mail instead.
2020-05-15 15:13:31 +01:00
Tom Byers
f0f461f5c9 Revert "Change checkboxes to GOVUK frontend" 2020-05-14 16:59:34 +01:00
Tom Byers
1240ca47a9 Remove all unused checkbox macros and imports 2020-05-13 17:37:44 +01:00
Tom Byers
33d8171675 Update templates page
Includes:
- changes to the govukCheckboxesField class
  to allow params to be extended at render time
- updates to templates and folders CSS
2020-05-13 17:37:42 +01:00
Tom Byers
efc4aff4fe Add govukCollapsibleNestedCheckboxesField
Includes:
1. changes to make NestedFieldMixin work
  with new fields and CSS for nested checkboxes
2. adds custom version of GOVUK checkboxes
  component to allow us to:
  - add classes to elements currently inaccessible
  - wrap the checkboxes in a list
  - add child checkboxes to each checkbox (making
    tree structures possible through recursion

Change 2. should be pushed upstream to the GOVUK
Design System as a proposal for changes to the
GOVUK Checkboxes component.
2020-05-13 16:20:10 +01:00
Tom Byers
187e23315c Bring in Jinja and Sass for checkboxes component 2020-05-13 16:13:51 +01:00
Chris Hill-Scott
84dbae6e39 Use tabular numbers for dashboard banner counts
We use tabular (not lining) figures everywhere else that we display counts, so that they don’t shift around as the AJAX updates the numbers.

There’s a good explanation of the difference here: https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures
2020-04-29 15:17:12 +01:00
Chris Hill-Scott
dd6944e8ef Use tabular figures for template statistics
We use tabular (not lining) figures everywhere else that we display
counts, so that they don’t shift around as the AJAX updates the numbers.

There’s a good explanation of the difference here:
https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures
2020-03-27 09:30:28 +00:00
Chris Hill-Scott
341b9009f3 Harmonise the typography when listing uploads
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.
2020-03-16 14:14:29 +00:00
Chris Hill-Scott
6b17fb1dce Merge pull request #3350 from alphagov/org-breadcrumb-alignment
Tweak the spacing of the organisation breadcrumb
2020-03-06 16:40:05 +00:00
Katie Smith
ee9a396de1 Stop using -govuk-spacing(n) in SASS
Using `-govuk-spacing(n)` in the SASS files was not working, so this
replaces it with `-1 * govuk-spacing(n)` instead.
2020-03-06 11:23:24 +00:00
Katie Smith
66006e24b0 Stop importing layout from GOV.UK Elements 2020-03-06 11:11:41 +00:00
Katie Smith
bc83ff6c09 Replace $gutter with govuk-spacing function
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`.
2020-03-06 11:11:41 +00:00
Katie Smith
a85f7fa2c1 Replace the .column-... classes in _grids.scss
We had 7 classes in _grids.scss named `.column-...` which were being
used to give a certain column width. These worked by using `@include
grid column()`, which is now deprecated.

`.column-whole` and `.column-three-quarters` can be removed and replaced
with `govuk-grid-column-full` and `govuk-grid-column-three-quarters`
respectively. The other column classes don't have a direct replacment in
GOV.UK Frontend. To get round this, we overwrite the `$govuk-grid-width`
SASS map in `extensions.scss` to add in extra widths, then use this with
the `govuk-grid-column` mixin to create new classes in for our custom
widths in `_grids.scss`
2020-03-06 11:11:41 +00:00
Katie Smith
e2952e6a7a Replace site-width-container with govuk-width-container 2020-03-06 11:11:41 +00:00
Katie Smith
6f8cc1f003 Remove unecessary id and class from product page
Stopped using `#content` on the product page - this was from GOV.UK elements.
Also removed the `override-elements-content` class since the page looks
the same without it.
2020-03-06 11:11:41 +00:00
Katie Smith
b9b9a138f9 Replace grid-row with govuk-grid-row
Replaced all instances of `grid-row` in the HTML and JavaScript with
`govuk-grid-row`, which is the new GOV.UK Frontend class.
2020-03-06 11:11:41 +00:00
Chris Hill-Scott
6f99395b0c Tweak the spacing of the organisation breadcrumb
The service name wasn’t quite lining up with the column.
2020-03-05 14:08:04 +00:00
Chris Hill-Scott
ee8436ca85 Differentiate between different kinds of uploads
Knowing what kind of upload a thing is is useful.

And the information that is useful to show about each upload depends on
what kind of upload it is.
2020-02-27 17:34:51 +00:00
Chris Hill-Scott
0d4c97e64a Make sticky footer clear the previous/next nav
If we don’t do this then the sticky footer only takes up half the width
of the column.
2020-02-27 16:46:52 +00:00
Tom Byers
efa892423a Fix issues raised on pull request
Includes:
- make 'remove team member' link, on edit member
  permissions page, destructive
- convert missed links on /features pages
- convert missed links on /using-notify/guidance and sub pages
- give links in browse-lists back their size and
  weight (needed for lists of live and trial
  services on Platform Admin)
- give links on Platform Admin inbound numbers
  page back their size and weight
- update links in JS tests
2020-02-25 10:52:03 +00:00
Tom Byers
dc941bc9bc Remove all redundant link CSS
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.
2020-02-25 10:52:03 +00:00
Tom Byers
8996b43496 Remove style for deleted elements
The `.global-cookie-message` and `.footer-nav`
classes were for elements in the govuk_template.
This used to be the base layout for this app but
was changed here:

https://github.com/alphagov/notifications-admin/pull/3198
2020-02-25 10:52:03 +00:00
Tom Byers
2a71cc5481 Convert warning links to govuk-link--destructive
Converts links in the following:
- the page-footer component
- the table component
- the browse-list component
- the notification status, when reporting failures
- validation messaging in the whitelist page
2020-02-25 10:52:03 +00:00
Tom Byers
9a6916ff31 Replace links in navigation
Includes:
- removing all styling of those links
  outside of GOV.UK Frontend (except for a few fixes
  due to their interaction with our design)
- bringing together some duplicate styles into one
  block
- changing how links are marked as selected, now
  they have multiple classes

Fix Sass-lint error in navigation.scss
2020-02-25 10:52:03 +00:00
Tom Byers
58c08ad89b Replace browse-list links 2020-02-25 10:52:03 +00:00
Tom Byers
61afbe7a8f Add styles for destructive links
This colour is used in a few places so worth
making into its own block and classes.

Note: this establishes a
`app/assets/stylesheets/local` folder for any Sass
files whose names clash with files from vendored
libraries.

`_typography.scss` already exists in GOV.UK
Elements Sass.

This will no longer be needed when GOV.UK Elements
is gone and GOV.UK Frontend is at version 3, where
all its folders are in a `govuk` folder.
2020-02-25 10:52:02 +00:00
Tom Byers
34e1eee364 Add font-smoothing as global style
Making all links GOV.UK Frontend styled means some
will sit in content that doesn't use the GOV.UK
Frontend font styles yet.

This applies the font-smoothing that comes with
those styles to all text so links do not look out
of place on browsers that support it.

Note: font-smoothing was part of the GOV.UK
Template styles which have now been removed:

https://github.com/alphagov/govuk_template/blob/master/source/assets/stylesheets/_basic.scss#L68
2020-02-25 10:47:31 +00:00
Tom Byers
36ddd52db1 Remove global link styles
All links, that need it, now have the GOVUK
Frontend link class so we no longer need this
CSS.
2020-02-25 10:47:30 +00:00
Tom Byers
5b306dde4d Revert "Convert all links to govuk frontend" 2020-02-24 11:56:38 +00:00
Tom Byers
5459dd8c13 Fix issues raised on pull request
Includes:
- make 'remove team member' link, on edit member
  permissions page, destructive
- convert missed links on /features pages
- convert missed links on /using-notify/guidance and sub pages
- give links in browse-lists back their size and
  weight (needed for lists of live and trial
  services on Platform Admin)
- give links on Platform Admin inbound numbers
  page back their size and weight
- update links in JS tests
2020-02-20 09:19:06 +00:00
Tom Byers
6d349b514c Remove all redundant link CSS
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.
2020-02-20 09:11:26 +00:00
Tom Byers
b5af89fe02 Remove style for deleted elements
The `.global-cookie-message` and `.footer-nav`
classes were for elements in the govuk_template.
This used to be the base layout for this app but
was changed here:

https://github.com/alphagov/notifications-admin/pull/3198
2020-02-20 09:11:26 +00:00
Tom Byers
548265dbe4 Convert warning links to govuk-link--destructive
Converts links in the following:
- the page-footer component
- the table component
- the browse-list component
- the notification status, when reporting failures
- validation messaging in the whitelist page
2020-02-20 09:11:26 +00:00
Tom Byers
378c26ee2a Add styles for destructive links
This colour is used in a few places so worth
making into its own block and classes.

Note: this establishes a
`app/assets/stylesheets/local` folder for any Sass
files whose names clash with files from vendored
libraries.

`_typography.scss` already exists in GOV.UK
Elements Sass.

This will no longer be needed when GOV.UK Elements
is gone and GOV.UK Frontend is at version 3, where
all its folders are in a `govuk` folder.
2020-02-20 09:11:26 +00:00
Tom Byers
c51d414197 Replace links in navigation
Includes:
- removing all styling of those links
  outside of GOV.UK Frontend (except for a few fixes
  due to their interaction with our design)
- bringing together some duplicate styles into one
  block
- changing how links are marked as selected, now
  they have multiple classes

Fix Sass-lint error in navigation.scss
2020-02-20 09:11:26 +00:00
Tom Byers
a61856ffe1 Replace browse-list links 2020-02-20 09:11:26 +00:00
Tom Byers
5e07ef484f Add font-smoothing as global style
Making all links GOV.UK Frontend styled means some
will sit in content that doesn't use the GOV.UK
Frontend font styles yet.

This applies the font-smoothing that comes with
those styles to all text so links do not look out
of place on browsers that support it.

Note: font-smoothing was part of the GOV.UK
Template styles which have now been removed:

https://github.com/alphagov/govuk_template/blob/master/source/assets/stylesheets/_basic.scss#L68
2020-02-20 09:11:26 +00:00
Tom Byers
7ec191bbac Remove global link styles
All links, that need it, now have the GOVUK
Frontend link class so we no longer need this
CSS.
2020-02-20 09:11:26 +00:00
Chris Hill-Scott
3bbd5381c6 Revert "Revert "Restyle template statistics and received text messages"" 2020-02-18 16:16:51 +00:00
Chris Hill-Scott
6bdd776780 Revert "Restyle template statistics and received text messages" 2020-02-18 14:58:33 +00:00
Chris Hill-Scott
a86f0a6efc Merge pull request #3295 from alphagov/restyle-template-stats
Restyle template statistics and received text messages
2020-02-18 14:30:06 +00:00
Tom Byers
0335e7ad17 Give dashboard banner items some vertical space
Giving the count-label some vertical margin means
it has enough space when the flexbox contents
wrap.

This requires a bit extra on the top to counter
the negative margin the count has subtracting 5px
from the parent box.
2020-02-18 13:14:56 +00:00
Tom Byers
08781a497f Update app/assets/stylesheets/components/banner.scss
Put borders back on dashboard banner focus state

Co-Authored-By: Chris Hill-Scott <me@quis.cc>
2020-02-18 11:55:20 +00:00
Tom Byers
6911319298 Update app/assets/stylesheets/components/banner.scss
Adjustment to the vertical padding on the dashboard

Co-Authored-By: Chris Hill-Scott <me@quis.cc>
2020-02-18 11:54:26 +00:00
Tom Byers
484bcfbae7 Update app/assets/stylesheets/components/banner.scss
Slight adjustment to vertical spacing on the dashboard banner count. See: https://github.com/alphagov/notifications-admin/pull/3295#discussion_r380616204

Co-Authored-By: Chris Hill-Scott <me@quis.cc>
2020-02-18 11:53:21 +00:00
Tom Byers
cd262559cc Refactor dashboard banner CSS and fix its text
Switches the CSS to use flexbox for layout and
uses a macro to let the text support single and
multiple messsages.
2020-02-17 16:44:41 +00:00
Chris Hill-Scott
84df70e520 Use a <caption> for the template statistics table
This is semantically more accurate because it’s describing the whole
table, not just the first column.

Adjusting the font-size to make it sit within the ‘In the last 7 days’
section. Adjusting the spacing because now that we have more borders we
don’t need quite so much whitespace to separate different bits of the
page.
2020-02-17 11:11:53 +00:00
Chris Hill-Scott
b65b417a08 Restyle inbound text messages
This commit adds a new kind of banner to the dashboard for summarising
things you might need to action.

This way we’ll be able to have multiple instances of this banner on the
same page without it looking too intense.

I never really liked the big blue banner for inbound text messages
because it became the most prominent thing on the page. It was an
interim solution that let us ship the feature until we had something
better.
2020-02-17 10:31:59 +00:00