darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-16 11:20:12 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
4d0da6594de60fcf37dc7796279462e32072d7a1
notifications-admin/app/assets/stylesheets/_grids.scss

116 lines
1.9 KiB
SCSS
Raw Normal View History

Page for adding a new service This page is exactly the same as the page for adding your first service, save the heading text. So all this commit does is: - set up two routes (`/add-service`, `/add-service/first`) for each of the two journeys and change the existing journeys to use the `/add-service/first` route - add logic to show different heading text depending on the journey - add a link to the new (`/add-service`) route in the service chooser dropdown
2016-01-18 10:47:53 +00:00
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-02-20 16:55:56 +00:00
.govuk-grid-column-one-sixth {
@include govuk-grid-column(one-sixth, $class: false);
Put some statistics on the dashboard This commit adds two new sections to the dashboard 1. A banner telling you about trial mode, including a count of how many messages you have left today, which is a restriction of trial mode 2. Panels with counts of how many emails and text messages have been sent in a day, plus the failure rates for each It does **not**: - link through to any further information about what trial mode is (coming later) - link through to pages for the failure rates (coming later) - change the ‘recent jobs’ section to ‘recent notifications’
2016-03-17 11:45:48 +00:00
}
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-02-20 16:55:56 +00:00
.govuk-grid-column-five-sixths {
@include govuk-grid-column(five-sixths, $class: false);
Make the tour interactive _The code for this is quite hacky and light on tests. But I’d really like to get it in the app for the research tomorrow to see how well the feature works._ This commit changes the tour from being a set of static screens to some help which guides you through the process of sending your first test message. The theory behind this is that what users are really struggling with is the concept of a variable, rather than the relationship between the placeholders and the column headers. And like learning to program, the best way to learn is by taking an example and modifying it to your own needs. This means that when someone adds their first service we set them up an example email template and an example text message template. Then there is a guided, three step process where _all_ the user can do is send a test message to themselves. Once the message is sent, the user still has the example templates which they can edit, rather than having to remember what they’re supposed to be doing.
2016-05-20 12:05:05 +01:00
}
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-02-20 16:55:56 +00:00
.govuk-grid-column-one-eighth {
@include govuk-grid-column(one-eighth, $class: false);
Preview service name when adding a new service This commit adds a new page, which appears after a user enters the name for their new service. It shows how the service name will appear in emails and text messages. This means that the new service is not created until after they have confirmed that the name is appropriate in context. This has also involved: - visual changes to the ‘email template’ pattern, which wasn’t very refined before - removing a bunch of words from the enter service name page, because most users don’t read them, and we reckon that showing a preview is a better way of getting them to understand what is meant by service name Still to do: - validating the the generated email address for a service is unique (on the API) side - having the API return the generated email address, rather than determining it in the admin app
2016-02-18 14:54:59 +00:00
}
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-02-20 16:55:56 +00:00
.govuk-grid-column-five-eighths {
@include govuk-grid-column(five-eighths, $class: false);
Increase width of edit letter textbox The textbox we use for editing letters is the same size as that for email and text messages. This is problematic because: - it feels quite cramped – letters will often be longer than emails or text messages - it has a narrower line length than the printed letters (which is a constant, unlike for emails and text messages) The printed letters have a line length of 137.5mm and a font size of 12.5pt. 137.5mm = 5.41 inches = 389.7pt line length 389.7pt/12.5pt = 31.8em So we could make the box 31.8em wide, but then it wouldn’t align to our grid. Our grid splits the page into quarters initially because this is how wide the navigation is. So this means that we can use grid units of 1/multiples of four, eg 1/4, 1/8, 1/12, 1/16, etc. But the smaller the denominator, the less effective the grid will be – it gets closer to no grid at all. After having a play around, 5/8 of the page looks closest to 31.8em. Since the main column of the page is 3/4, we set a column of 5/6 width inside that, which equals 5/8 of the total page.
2017-04-07 18:27:00 +01:00
}
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-02-20 16:55:56 +00:00
.govuk-grid-column-seven-eighths {
@include govuk-grid-column(seven-eighths, $class: false);
Preview service name when adding a new service This commit adds a new page, which appears after a user enters the name for their new service. It shows how the service name will appear in emails and text messages. This means that the new service is not created until after they have confirmed that the name is appropriate in context. This has also involved: - visual changes to the ‘email template’ pattern, which wasn’t very refined before - removing a bunch of words from the enter service name page, because most users don’t read them, and we reckon that showing a preview is a better way of getting them to understand what is meant by service name Still to do: - validating the the generated email address for a service is unique (on the API) side - having the API return the generated email address, rather than determining it in the admin app
2016-02-18 14:54:59 +00:00
}
Replace test with one-off It’s a confusing proposition to have two features which are almost identical. Even differentiating between them in the template menu would be tricky. I think the better thing to do is rename the whole feature to ‘send one-off message’. Then if someone wants to use there own phone number or email address, give them a quick shortcut to doing that, once they’re in the flow. In the background this reuses the ‘send yourself a test’ code, but the user is never aware that they’re going through a different route to send an individual message. So the proposition stays nice and clean.
2017-05-25 13:31:51 +01:00
%top-gutter,
.top-gutter {
@extend %contain-floats;
display: block;
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-02-21 13:21:44 +00:00
margin-top: govuk-spacing(6);
Replace test with one-off It’s a confusing proposition to have two features which are almost identical. Even differentiating between them in the template menu would be tricky. I think the better thing to do is rename the whole feature to ‘send one-off message’. Then if someone wants to use there own phone number or email address, give them a quick shortcut to doing that, once they’re in the flow. In the background this reuses the ‘send yourself a test’ code, but the user is never aware that they’re going through a different route to send an individual message. So the proposition stays nice and clean.
2017-05-25 13:31:51 +01:00
clear: both;
}
.top-gutter-4-3 {
@extend %top-gutter;
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-02-21 13:21:44 +00:00
margin-top: govuk-spacing(7);
Replace test with one-off It’s a confusing proposition to have two features which are almost identical. Even differentiating between them in the template menu would be tricky. I think the better thing to do is rename the whole feature to ‘send one-off message’. Then if someone wants to use there own phone number or email address, give them a quick shortcut to doing that, once they’re in the flow. In the background this reuses the ‘send yourself a test’ code, but the user is never aware that they’re going through a different route to send an individual message. So the proposition stays nice and clean.
2017-05-25 13:31:51 +01:00
}
Let users archive their own trial mode services At the moment we have a blanket rule that users can’t archive their own services, to prevent someone accidentally deleting a real live service, because that would be Very Bad. But the tickets we get from users asking us to delete services are for services they set up when they were just trying out Notify. There’s not much harm in letting users delete these services, the consequences of doing so are much lower than those of deleting a live service. And it should mean fewer support tickets for us to deal with.
2019-05-29 16:51:25 +01:00
.top-gutter-1-2 {
Let users download a CSV of inbound messages In user research, we’ve seen users copy/pasting the contents of the inbound SMS page into a spreadsheet, in order to keep a record of the messages they receive. They even went as far as to write a macro which fixed the errors caused by copying and pasting. It would be much easier if we just gave them the data already in a spreadsheet format. Which is what this commit does. One caveat is that, because spreadsheets can contain executable code (ie formulas), and because we’re populating the spreadsheet with user-submitted data (albeit via SMS) we need to be careful about injection attacks. The details of how these attacks work are detailed here (interesting reading): http://georgemauer.net/2017/10/07/csv-injection.html The mitigation is to not allow characters which initialise a formula at the start of the cell.
2017-10-17 11:41:12 +01:00
@extend %top-gutter;
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-02-21 13:21:44 +00:00
margin-top: govuk-spacing(3);
Let users download a CSV of inbound messages In user research, we’ve seen users copy/pasting the contents of the inbound SMS page into a spreadsheet, in order to keep a record of the messages they receive. They even went as far as to write a macro which fixed the errors caused by copying and pasting. It would be much easier if we just gave them the data already in a spreadsheet format. Which is what this commit does. One caveat is that, because spreadsheets can contain executable code (ie formulas), and because we’re populating the spreadsheet with user-submitted data (albeit via SMS) we need to be careful about injection attacks. The details of how these attacks work are detailed here (interesting reading): http://georgemauer.net/2017/10/07/csv-injection.html The mitigation is to not allow characters which initialise a formula at the start of the cell.
2017-10-17 11:41:12 +01:00
}
Add line to template page if you can’t do anything If someone has no permissions but needs permissions the thing they’re probably going to need is to send a message or edit a template. The place they will probably come to is the place where the buttons would be – users with these permissions are finding the thing they need to do on this page. So this commit adds a line to this page which (hopefully) makes it clear they’re in the right place, but need to go and speak to someone.
2018-03-12 15:46:54 +00:00
.top-gutter-1-3 {
@extend %top-gutter;
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-02-21 13:21:44 +00:00
margin-top: govuk-spacing(2);
Add line to template page if you can’t do anything If someone has no permissions but needs permissions the thing they’re probably going to need is to send a message or edit a template. The place they will probably come to is the place where the buttons would be – users with these permissions are finding the thing they need to do on this page. So this commit adds a line to this page which (hopefully) makes it clear they’re in the right place, but need to go and speak to someone.
2018-03-12 15:46:54 +00:00
}
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-09 11:31:47 +01:00
.top-gutter-2-3 {
@extend %top-gutter;
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-02-21 13:21:44 +00:00
margin-top: govuk-spacing(4);
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-09 11:31:47 +01:00
}
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:36:40 +01:00
.top-gutter-0 {
margin-top: 0;
}
Make vertical spacing CSS classes work with floats We have a bunch of helper classes (bottom gutter) which are used to vertically separate components on the page. This vertical spacing might get ignored if one of these containers contains floated items. This is because: > elements that contain floated items don't take those floated items > into account in calculating their height – https://css-tricks.com/containers-dont-clear-floats/ GOV.UK Frontend toolkit has a shim to prevent this from happening. https://github.com/alphagov/govuk_frontend_toolkit/blob/d15e738b92312028635acd6514c95a4799d47da4/stylesheets/_shims.scss#L38-L55 So this commit uses that shim to make the spacing consistent in older and newer browsers, irrespective of whether floats are being applied. This hasn’t been a problem because we’re not using a lot of `float` in Notify. But we are using it now to work around some other inconsistencies in old browsers.
2017-01-23 10:58:13 +00:00
%bottom-gutter,
Page for adding a new service This page is exactly the same as the page for adding your first service, save the heading text. So all this commit does is: - set up two routes (`/add-service`, `/add-service/first`) for each of the two journeys and change the existing journeys to use the `/add-service/first` route - add logic to show different heading text depending on the journey - add a link to the new (`/add-service`) route in the service chooser dropdown
2016-01-18 10:47:53 +00:00
.bottom-gutter {
Make vertical spacing CSS classes work with floats We have a bunch of helper classes (bottom gutter) which are used to vertically separate components on the page. This vertical spacing might get ignored if one of these containers contains floated items. This is because: > elements that contain floated items don't take those floated items > into account in calculating their height – https://css-tricks.com/containers-dont-clear-floats/ GOV.UK Frontend toolkit has a shim to prevent this from happening. https://github.com/alphagov/govuk_frontend_toolkit/blob/d15e738b92312028635acd6514c95a4799d47da4/stylesheets/_shims.scss#L38-L55 So this commit uses that shim to make the spacing consistent in older and newer browsers, irrespective of whether floats are being applied. This hasn’t been a problem because we’re not using a lot of `float` in Notify. But we are using it now to work around some other inconsistencies in old browsers.
2017-01-23 10:58:13 +00:00
@extend %contain-floats;
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-02-21 13:21:44 +00:00
margin-bottom: govuk-spacing(6);
Preview service name when adding a new service This commit adds a new page, which appears after a user enters the name for their new service. It shows how the service name will appear in emails and text messages. This means that the new service is not created until after they have confirmed that the name is appropriate in context. This has also involved: - visual changes to the ‘email template’ pattern, which wasn’t very refined before - removing a bunch of words from the enter service name page, because most users don’t read them, and we reckon that showing a preview is a better way of getting them to understand what is meant by service name Still to do: - validating the the generated email address for a service is unique (on the API) side - having the API return the generated email address, rather than determining it in the admin app
2016-02-18 14:54:59 +00:00
clear: both;
Page for adding a new service This page is exactly the same as the page for adding your first service, save the heading text. So all this commit does is: - set up two routes (`/add-service`, `/add-service/first`) for each of the two journeys and change the existing journeys to use the `/add-service/first` route - add logic to show different heading text depending on the journey - add a link to the new (`/add-service`) route in the service chooser dropdown
2016-01-18 10:47:53 +00:00
}
Give users better guidance about CSV files This commit adds some guidance on the ‘Add recipients’ page about what should be in the CSV file. The guidance is contextual to the template, and based on the problems that we saw users having yesterday.
2016-02-26 16:22:07 +00:00
.bottom-gutter-2-3 {
Make vertical spacing CSS classes work with floats We have a bunch of helper classes (bottom gutter) which are used to vertically separate components on the page. This vertical spacing might get ignored if one of these containers contains floated items. This is because: > elements that contain floated items don't take those floated items > into account in calculating their height – https://css-tricks.com/containers-dont-clear-floats/ GOV.UK Frontend toolkit has a shim to prevent this from happening. https://github.com/alphagov/govuk_frontend_toolkit/blob/d15e738b92312028635acd6514c95a4799d47da4/stylesheets/_shims.scss#L38-L55 So this commit uses that shim to make the spacing consistent in older and newer browsers, irrespective of whether floats are being applied. This hasn’t been a problem because we’re not using a lot of `float` in Notify. But we are using it now to work around some other inconsistencies in old browsers.
2017-01-23 10:58:13 +00:00
@extend %bottom-gutter;
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-02-21 13:21:44 +00:00
margin-bottom: govuk-spacing(4);
Give users better guidance about CSV files This commit adds some guidance on the ‘Add recipients’ page about what should be in the CSV file. The guidance is contextual to the template, and based on the problems that we saw users having yesterday.
2016-02-26 16:22:07 +00:00
}
Move ‘new thing’ buttons alongside heading On the send messages and manage team pages we have big green buttons for adding/inviting a new template or team member. On the add template page it was at the bottom, and often got missed. On the manage team page it was at the top, but maybe too prominent because it’s big and green. This commit tries putting it in the top right of the page instead (except when the template page is empty, in which case it’s unchanged).
2016-03-11 07:47:46 +00:00
Tighten up spacing around download link
2016-08-02 16:43:47 +01:00
.bottom-gutter-1-2 {
Make vertical spacing CSS classes work with floats We have a bunch of helper classes (bottom gutter) which are used to vertically separate components on the page. This vertical spacing might get ignored if one of these containers contains floated items. This is because: > elements that contain floated items don't take those floated items > into account in calculating their height – https://css-tricks.com/containers-dont-clear-floats/ GOV.UK Frontend toolkit has a shim to prevent this from happening. https://github.com/alphagov/govuk_frontend_toolkit/blob/d15e738b92312028635acd6514c95a4799d47da4/stylesheets/_shims.scss#L38-L55 So this commit uses that shim to make the spacing consistent in older and newer browsers, irrespective of whether floats are being applied. This hasn’t been a problem because we’re not using a lot of `float` in Notify. But we are using it now to work around some other inconsistencies in old browsers.
2017-01-23 10:58:13 +00:00
@extend %bottom-gutter;
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-02-21 13:21:44 +00:00
margin-bottom: govuk-spacing(3);
Tighten up spacing around download link
2016-08-02 16:43:47 +01:00
}
Put versions at bottom of single template page Like the template ID this is an infrequently-used action on a template and doesn’t belong at the same level as ‘Upload recipients’ or ‘Send yourself’ a test. We don’t think it’s information that’s useful to working out which template you want to interact with, so it shouldn’t be on the choose template page any more.
2017-03-16 16:25:47 +00:00
.bottom-gutter-1-3 {
@extend %bottom-gutter;
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-02-21 13:21:44 +00:00
margin-bottom: govuk-spacing(2);
Put versions at bottom of single template page Like the template ID this is an infrequently-used action on a template and doesn’t belong at the same level as ‘Upload recipients’ or ‘Send yourself’ a test. We don’t think it’s information that’s useful to working out which template you want to interact with, so it shouldn’t be on the choose template page any more.
2017-03-16 16:25:47 +00:00
}
Remove banner for trial mode message The yellow banner didn’t make this information much more noticeable, and it made some people miss the request to go live link because it wasn’t blue. This commit brings the design back to where it was as of this PR: https://github.com/alphagov/notifications-admin/pull/904
2016-11-04 09:50:11 +00:00
.bottom-gutter-3-2 {
Make vertical spacing CSS classes work with floats We have a bunch of helper classes (bottom gutter) which are used to vertically separate components on the page. This vertical spacing might get ignored if one of these containers contains floated items. This is because: > elements that contain floated items don't take those floated items > into account in calculating their height – https://css-tricks.com/containers-dont-clear-floats/ GOV.UK Frontend toolkit has a shim to prevent this from happening. https://github.com/alphagov/govuk_frontend_toolkit/blob/d15e738b92312028635acd6514c95a4799d47da4/stylesheets/_shims.scss#L38-L55 So this commit uses that shim to make the spacing consistent in older and newer browsers, irrespective of whether floats are being applied. This hasn’t been a problem because we’re not using a lot of `float` in Notify. But we are using it now to work around some other inconsistencies in old browsers.
2017-01-23 10:58:13 +00:00
@extend %bottom-gutter;
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-02-21 13:21:44 +00:00
margin-bottom: govuk-spacing(6) * 3/2;
Remove banner for trial mode message The yellow banner didn’t make this information much more noticeable, and it made some people miss the request to go live link because it wasn’t blue. This commit brings the design back to where it was as of this PR: https://github.com/alphagov/notifications-admin/pull/904
2016-11-04 09:50:11 +00:00
}
Explain trial mode on the settings page The previous text on this page around trial mode was a bit of a mouthful. Also it only really made sense if you already knew what trial mode was. This commit tries to make it really explicit: - that you’re in trial mode - what it means to be in trial mode (copied from the trial mode page) - where you go to not be in trial mode
2016-08-22 15:39:50 +01:00
.bottom-gutter-2 {
Make vertical spacing CSS classes work with floats We have a bunch of helper classes (bottom gutter) which are used to vertically separate components on the page. This vertical spacing might get ignored if one of these containers contains floated items. This is because: > elements that contain floated items don't take those floated items > into account in calculating their height – https://css-tricks.com/containers-dont-clear-floats/ GOV.UK Frontend toolkit has a shim to prevent this from happening. https://github.com/alphagov/govuk_frontend_toolkit/blob/d15e738b92312028635acd6514c95a4799d47da4/stylesheets/_shims.scss#L38-L55 So this commit uses that shim to make the spacing consistent in older and newer browsers, irrespective of whether floats are being applied. This hasn’t been a problem because we’re not using a lot of `float` in Notify. But we are using it now to work around some other inconsistencies in old browsers.
2017-01-23 10:58:13 +00:00
@extend %bottom-gutter;
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-02-21 13:21:44 +00:00
margin-bottom: govuk-spacing(9);
Explain trial mode on the settings page The previous text on this page around trial mode was a bit of a mouthful. Also it only really made sense if you already knew what trial mode was. This commit tries to make it really explicit: - that you’re in trial mode - what it means to be in trial mode (copied from the trial mode page) - where you go to not be in trial mode
2016-08-22 15:39:50 +01:00
}
Add option to copy existing template when adding Sometimes when setting up a service you might have a few very similar templates, in which only a small amount of content. Or you might even have a few of services, which are used by different teams but have similar templates. Copy and pasting, especially from one service to another, is a pain. This commit makes it easier by allowing users to copy an existing template when choosing to add a new one, instead of starting from scratch.
2018-07-19 12:30:04 +01:00
.left-gutter {
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-02-21 13:21:44 +00:00
padding-left: govuk-spacing(6);
Add option to copy existing template when adding Sometimes when setting up a service you might have a few very similar templates, in which only a small amount of content. Or you might even have a few of services, which are used by different teams but have similar templates. Copy and pasting, especially from one service to another, is a pain. This commit makes it easier by allowing users to copy an existing template when choosing to add a new one, instead of starting from scratch.
2018-07-19 12:30:04 +01:00
}
.left-gutter-4-3 {
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-02-21 13:21:44 +00:00
padding-left: govuk-spacing(7);
Add option to copy existing template when adding Sometimes when setting up a service you might have a few very similar templates, in which only a small amount of content. Or you might even have a few of services, which are used by different teams but have similar templates. Copy and pasting, especially from one service to another, is a pain. This commit makes it easier by allowing users to copy an existing template when choosing to add a new one, instead of starting from scratch.
2018-07-19 12:30:04 +01:00
}
Move ‘new thing’ buttons alongside heading On the send messages and manage team pages we have big green buttons for adding/inviting a new template or team member. On the add template page it was at the bottom, and often got missed. On the manage team page it was at the top, but maybe too prominent because it’s big and green. This commit tries putting it in the top right of the page instead (except when the template page is empty, in which case it’s unchanged).
2016-03-11 07:47:46 +00:00
.align-with-heading {
display: block;
text-align: center;
Move switch service out of black header Also following the pattern work that Tim and Stephen have done.
2016-11-18 11:18:29 +00:00
margin-top: 13px;
Move ‘new thing’ buttons alongside heading On the send messages and manage team pages we have big green buttons for adding/inviting a new template or team member. On the add template page it was at the bottom, and often got missed. On the manage team page it was at the top, but maybe too prominent because it’s big and green. This commit tries putting it in the top right of the page instead (except when the template page is empty, in which case it’s unchanged).
2016-03-11 07:47:46 +00:00
padding-left: 2px;
padding-right: 2px;
}
Add cookie banner text, page, and footer links > Let’s start the footer links with the cookie page. > Banner to say: "GOV.UK Notify uses cookies to make the site simpler. Find out > more about cookies" > Standard style one... see > https://www.registertovote.service.gov.uk/register-to-vote/cookies or > https://www.digitalmarketplace.service.gov.uk/cookies > > Let's link to the feedback form too... > https://docs.google.com/forms/d/1AL8U-xJX_HAFEiQiJszGQw0PcEaEUnYATSntEghNDGo/viewform > Call it Support and feedback https://www.pivotaltracker.com/story/show/115483375
2016-03-16 11:01:19 +00:00
Add usage to the dashboard Takes the number of emails and SMS fragments sent from: https://github.com/alphagov/notifications-api/pull/273 Using these numbers it’s possible to show: - how much of your allowance is left - or how much you have spent For now the allowance and rates are hard coded. Only for users that have manage service.
2016-04-20 15:37:17 +01:00
.align-with-heading-copy {
display: block;
Fix alignment of year label on usage It got pushed down too far when we added the switch service bar in https://github.com/alphagov/notifications-admin/pull/1029 This commit fixes it so that the text aligns with the baseline of the `<h1>`.
2016-12-05 13:02:19 +00:00
margin-top: 25px;
Add usage to the dashboard Takes the number of emails and SMS fragments sent from: https://github.com/alphagov/notifications-api/pull/273 Using these numbers it’s possible to show: - how much of your allowance is left - or how much you have spent For now the allowance and rates are hard coded. Only for users that have manage service.
2016-04-20 15:37:17 +01:00
}
Add log of notifications to API integration page Now that we’ve removed simulated notifications from the dashboard and activity pages they’re not visible anywhere in the app. While they should’t be visible to non-technical users, developers have a real need for Notify to confirm that their code is doing what they expect. This is needed especially when they’re just getting started with Notify. There’s no way of seeing this info from the API either, because a key can only get notifications created with a key of that type. It doesn’t make sense to make this a ‘mode’ of the dashboard or activity because the information about notifications that developers need is also different. So this commit adds up to 50 of the most recent notifications sent via the API to the page that developers use as their ‘home’ page. This also lets us explain the 7 days thing to developers via the empty slate state of this area of the page.
2016-09-21 10:13:25 +01:00
.align-with-heading-copy-right {
display: block;
Normalise heading sizes Since we added template folders the templates page has had a ‘medium’ sized heading, where other pages have stuck with a ‘large’ size. This commit rationalises the decision around which pages have which heading size: - ‘navigation’ pages (eg templates, team members, email reply to addresses) have medium sized headings - transactional pages (ie ones which have a green button) keep the larger heading size
2019-04-23 10:03:28 +01:00
margin: 21px 0 19px 0;
Add log of notifications to API integration page Now that we’ve removed simulated notifications from the dashboard and activity pages they’re not visible anywhere in the app. While they should’t be visible to non-technical users, developers have a real need for Notify to confirm that their code is doing what they expect. This is needed especially when they’re just getting started with Notify. There’s no way of seeing this info from the API either, because a key can only get notifications created with a key of that type. It doesn’t make sense to make this a ‘mode’ of the dashboard or activity because the information about notifications that developers need is also different. So this commit adds up to 50 of the most recent notifications sent via the API to the page that developers use as their ‘home’ page. This also lets us explain the 7 days thing to developers via the empty slate state of this area of the page.
2016-09-21 10:13:25 +01:00
text-align: right;
}
Update product page to talk about letters Letters is now a mature enough feature that we should: - be raising awareness amongst our users that it’s a thing we offer - not have letters be a surprise to anyone creating a Notify account for the first time Shouldn’t be merged until: - [ ] https://github.com/alphagov/notifications-api/pull/1600
2018-01-18 16:38:15 +00:00
.align-with-big-number-hint {
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-02-21 13:21:44 +00:00
margin-top: govuk-spacing(8);
Update product page to talk about letters Letters is now a mature enough feature that we should: - be raising awareness amongst our users that it’s a thing we offer - not have letters be a surprise to anyone creating a Notify account for the first time Shouldn’t be merged until: - [ ] https://github.com/alphagov/notifications-api/pull/1600
2018-01-18 16:38:15 +00:00
}
Reference in New Issue Copy Permalink