darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-15 15:28:50 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
b8f652cb2e15b22b01ac3dca8797fa63cebf52d5
notifications-admin/app/assets/stylesheets/components/banner.scss

218 lines
3.9 KiB
SCSS
Raw Normal View History

Replace `message_status` component with `banner` Message status was almost identical to banner, visually and semantically. This consolidates the two into one component. This means adding an extra parameter which controls whether or not the banner has a tick (with and without a tick are the only two variations currently).
2016-01-11 11:27:42 +00:00
%banner,
Make 'API key was revoked' banner green
2016-01-26 16:26:08 +00:00
.banner,
.banner-default {
Add a banner ✔
2015-12-17 14:05:35 +00:00
Change text style of default banner The green text looks nicer than the black text. The bold makes it stand out more.
2017-09-25 15:09:26 +01:00
@include bold-19;
color: $button-colour;
Add a banner ✔
2015-12-17 14:05:35 +00:00
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
padding: govuk-spacing(3);
margin: govuk-spacing(3) 0 govuk-spacing(6) 0;
Various tweaks - remove black border from banner - make banners have internal columns - make nav 2/3rd width, 19px text and more spaced out - only show the ‘restricted mode’ banner where it’s needed - rename ‘restricted mode’ to ‘trial mode’
2016-02-02 13:38:39 +00:00
text-align: left;
Add a banner ✔
2015-12-17 14:05:35 +00:00
position: relative;
Updates to send and check SMS pages Adds a back button instead of a back link (more prominent, you’re likely to go back on these pages if you’ve made a mistake) Tweaks to wording
2016-02-03 15:24:50 +00:00
clear: both;
Use black text with a border for default banner We use panels with a blue banner to indicate something that’s clickable. So we should move away from this style for things that are just notifications. We can’t use teal like other bits of GOV.UK because it doesn’t pass colour contrast. Pay are using a box with a green border, similar to the error validation box (which has a red border). So let’s do the same for now.
2017-07-24 16:19:09 +01:00
border: 5px solid $button-colour;
Add a banner ✔
2015-12-17 14:05:35 +00:00
Give the user better error messages for CSV files Makes uses of the additions to utils in https://github.com/alphagov/notifications-utils/pull/9 This commit strips out a lot of the complex stuff that the views and templates in this app were doing. There is now a cleaner separation of concerns: - utils returns the number and type of errors in the csv - `get_errors_for_csv` helper in this app maps the number and type of errors onto human-friendly error messages - the view and template just doing the glueing-together of all the pieces This is (hopefully) easier to understand, definitely makes the component parts easier to test in isolation, and makes it easier to give more specific error messages.
2016-03-07 18:47:05 +00:00
&-title {
@include bold-24;
}
p {
margin: 10px 0 5px 0;
}
.list-bullet {
@include copy-19;
}
Add button to approve broadcast Since new broadcasts will go into `pending-approval`, we now need a way of approving them. This commit adds a button to this page to start (or approve) the broadcast. This button is wrapped in a bordered box, to emphasise that it’s something consequential.
2020-07-17 08:07:44 +01:00
.page-footer {
margin-bottom: govuk-spacing(1);
}
Replace `message_status` component with `banner` Message status was almost identical to banner, visually and semantically. This consolidates the two into one component. This means adding an extra parameter which controls whether or not the banner has a tick (with and without a tick are the only two variations currently).
2016-01-11 11:27:42 +00:00
}
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
%banner-with-tick,
.banner-with-tick {
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: govuk-spacing(3) (govuk-spacing(6) + govuk-spacing(3));
Use black text with a border for default banner We use panels with a blue banner to indicate something that’s clickable. So we should move away from this style for things that are just notifications. We can’t use teal like other bits of GOV.UK because it doesn’t pass colour contrast. Pay are using a box with a green border, similar to the error validation box (which has a red border). So let’s do the same for now.
2017-07-24 16:19:09 +01:00
background-image: file-url('tick.png');
Add pages to invite, edit, and delete users This takes the original prototype version of this page, and, using the same fake data (ie nothing is wired up): - adds an invite users page - adds an edit (and delete) user page Both these pages allow the user to set another user’s permissions. This commit adds images for the ticks and crosses, so we have control over their appearance.
2016-02-19 15:02:13 +00:00
background-size: 19px;
background-repeat: no-repeat;
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
background-position: govuk-spacing(3) govuk-spacing(3);
Fix colour contrast on confirmation banner White on turquoise is not enough colour contrast to pass WCAG AA.
2017-02-13 12:48:05 +00:00
Add a banner ✔
2015-12-17 14:05:35 +00:00
}
Add link to delete a template This is a link not a button because: - it’s less prominent—delete is an infrequent action - it’s a two-step process, and only the second part changes any data (so it has a button)
2016-01-14 09:44:06 +00:00
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
.banner-default-with-tick {
@extend %banner;
@extend %banner-with-tick;
}
Add link to delete a template This is a link not a button because: - it’s less prominent—delete is an infrequent action - it’s a two-step process, and only the second part changes any data (so it has a button)
2016-01-14 09:44:06 +00:00
.banner-dangerous {
Fix problems found by SASS Lint
2016-02-08 11:11:55 +00:00
@extend %banner;
@include bold-19;
Add link to delete a template This is a link not a button because: - it’s less prominent—delete is an infrequent action - it’s a two-step process, and only the second part changes any data (so it has a button)
2016-01-14 09:44:06 +00:00
background: $white;
Make text black in error/danger banners For consistency with what GOV.UK Elements does, the text in our banners should be black, not red. See examples here: http://govuk-elements.herokuapp.com/errors/#summarise-errors This also makes us consistent with what Pay are doing.
2017-07-24 14:26:26 +01:00
color: $text-colour;
Add link to delete a template This is a link not a button because: - it’s less prominent—delete is an infrequent action - it’s a two-step process, and only the second part changes any data (so it has a button)
2016-01-14 09:44:06 +00:00
border: 5px solid $error-colour;
margin: 15px 0;
text-align: left;
Send focus to error summary before single error > If both sections of the page have errors and the page is submitted, > focus moves to the mobile numbers section so screen reader users may > not be aware of preceding errors - focus should move to a dedicated > error summary at the top of the page. Right now we use Javascript to focus the first error on a page (if any errors are found). This commit adds more JS to then focus the error summary, if there is one on the page. So this is where the focus will rest. It also makes some modifications to the ‘dangerous’ banner to make it focusable, and to visually indicate that it is focused.
2017-02-13 12:11:32 +00:00
&:focus {
Replace uses of $yellow for focus There are a few places where we missed updating to the new focus styles because they were using the `$yellow` SASS variable and not the `$focus-colour` variable. This commit updates them to the new colour, and where needed adds the black lower border to match.
2020-09-23 10:50:43 +01:00
outline: 3px solid $govuk-focus-colour;
Send focus to error summary before single error > If both sections of the page have errors and the page is submitted, > focus moves to the mobile numbers section so screen reader users may > not be aware of preceding errors - focus should move to a dedicated > error summary at the top of the page. Right now we use Javascript to focus the first error on a page (if any errors are found). This commit adds more JS to then focus the error summary, if there is one on the page. So this is where the focus will rest. It also makes some modifications to the ‘dangerous’ banner to make it focusable, and to visually indicate that it is focused.
2017-02-13 12:11:32 +00:00
}
Add feature to mark a template as redacted Works similarly to the delete template flow, because it’s a destructive, one-way action. Not on the edit template page, because it’s not something you want to be considering every time you’re editing a template. And we saw that people couldn’t find the delete button when it was on this page. Adds a bit more CSS for the `dangerous` banner type, because the content here is quite complicated. Breaking it into a list helps, but the spacing didn’t look right, so needed some tweaking. Can ship independently of the code that shows the redaction, but needs the API first.
2017-06-26 14:41:00 +01:00
.list {
margin-bottom: 0;
}
Add link to delete a template This is a link not a button because: - it’s less prominent—delete is an infrequent action - it’s a two-step process, and only the second part changes any data (so it has a button)
2016-01-14 09:44:06 +00:00
}
Add a new style of banner—‘tip’ This banner is meant for onboarding users and giving them prompts about what they should do next.
2016-02-02 09:38:31 +00:00
Show a tour when users first create a service This commit adds a 3 screen tour, similar to those used on GOV.UK Verify and Passports. We guerilla tested this on Friday, and it really helped users to build a mental model of how Notify works, so that when they’re playing around with it they have a greater sense of what they’re aiming to do. This makes concepts like templates and placeholders click more quickly. https://www.pivotaltracker.com/story/show/116710119
2016-04-01 10:54:55 +01:00
.banner-tour {
@extend %banner;
background: $govuk-blue;
color: $white;
Fix misaligned sidebar on the tour Got broken when we moved the service name out of the nav.
2016-12-14 16:40:50 +00:00
margin-top: 10px;
Change step 1 of tour to only show the template We’ve made a few changes to the tour recently, without changing the help text on the left hand side of the screen. So the stuff you see on the right side of the screen doesn’t quite sync up any more. This commit adds an extra, introductory page that just shows the template and a next button, which better matches the ‘every message starts with a template’ help text.
2017-06-29 10:02:53 +01:00
margin-bottom: 0;
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: govuk-spacing(6);
Change step 1 of tour to only show the template We’ve made a few changes to the tour recently, without changing the help text on the left hand side of the screen. So the stuff you see on the right side of the screen doesn’t quite sync up any more. This commit adds an extra, introductory page that just shows the template and a next button, which better matches the ‘every message starts with a template’ help text.
2017-06-29 10:02:53 +01:00
height: 425px;
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
overflow: hidden;
box-shadow: inset 0 -1em 1.6em 0 rgba(0, 0, 0, 0.05);
Fix green border on tour banner
2017-08-30 16:36:48 +01:00
border: 0;
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
Add a tour for users new to broadcast services This is an initial, prototype-quality attempt at introducing some kind of tour for users new to broadcasting. A lot of the users we’re speaking to don’t have a good concept of what broadcasting means, which is causing usability problems down the line. We did a similar thing in the early days of Notify to explain the concept of message templates and personalisation.
2020-08-03 13:37:34 +01:00
&-no-fixed-height {
height: auto;
Refine broadcast tour based on research learnings We’ve shown the broadcast tour to a few users now. We’ve learned what concepts about broadcasting are and aren’t getting through. So what we’re emphasising here is: - the thing that appears on the phone (the ‘emergency alert’) not the technology (a ‘broadcast’) - how it’s different to other channels of messaging, eg text We’ve generally spent a lot more time on the content and illustrations this time around, so overall it’s should be clearer and shorter. This also expands the communication of training mode into the header, so it’s visible on every page (we can add another one for ‘live’ services later on).
2020-08-19 14:54:50 +01:00
padding-top: govuk-spacing(8);
Add a tour for users new to broadcast services This is an initial, prototype-quality attempt at introducing some kind of tour for users new to broadcasting. A lot of the users we’re speaking to don’t have a good concept of what broadcasting means, which is causing usability problems down the line. We did a similar thing in the early days of Notify to explain the concept of message templates and personalisation.
2020-08-03 13:37:34 +01:00
min-height: 425px;
}
Refine broadcast tour based on research learnings We’ve shown the broadcast tour to a few users now. We’ve learned what concepts about broadcasting are and aren’t getting through. So what we’re emphasising here is: - the thing that appears on the phone (the ‘emergency alert’) not the technology (a ‘broadcast’) - how it’s different to other channels of messaging, eg text We’ve generally spent a lot more time on the content and illustrations this time around, so overall it’s should be clearer and shorter. This also expands the communication of training mode into the header, so it’s visible on every page (we can add another one for ‘live’ services later on).
2020-08-19 14:54:50 +01:00
&-with-service-name {
margin-top: -10px;
padding-top: 0;
box-shadow: 0 -1px 0 0 darken($govuk-blue, 10%);
}
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
.heading-medium {
@include core-24;
Show a tour when users first create a service This commit adds a 3 screen tour, similar to those used on GOV.UK Verify and Passports. We guerilla tested this on Friday, and it really helped users to build a mental model of how Notify works, so that when they’re playing around with it they have a greater sense of what they’re aiming to do. This makes concepts like templates and placeholders click more quickly. https://www.pivotaltracker.com/story/show/116710119
2016-04-01 10:54:55 +01:00
}
p {
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
margin-top: 0;
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);
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
color: $white;
Show a tour when users first create a service This commit adds a 3 screen tour, similar to those used on GOV.UK Verify and Passports. We guerilla tested this on Friday, and it really helped users to build a mental model of how Notify works, so that when they’re playing around with it they have a greater sense of what they’re aiming to do. This makes concepts like templates and placeholders click more quickly. https://www.pivotaltracker.com/story/show/116710119
2016-04-01 10:54:55 +01:00
&:last-child {
Don’t lint SCSS files that have come from outside We should (and do) keep exact copies of SCSS files that have come from elsewhere so that we can easily upgrade them. But sometimes they don’t always pass our linting rules, or throw a lot of warnings, which is noisy. This commit: - moves such files into their own subdirectory - tells SCSS Lint to ignore files in this directory
2016-04-13 12:50:13 +01:00
margin-bottom: 0;
Show a tour when users first create a service This commit adds a 3 screen tour, similar to those used on GOV.UK Verify and Passports. We guerilla tested this on Friday, and it really helped users to build a mental model of how Notify works, so that when they’re playing around with it they have a greater sense of what they’re aiming to do. This makes concepts like templates and placeholders click more quickly. https://www.pivotaltracker.com/story/show/116710119
2016-04-01 10:54:55 +01:00
}
& + p {
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
margin-top: -1 * govuk-spacing(3);
Show a tour when users first create a service This commit adds a 3 screen tour, similar to those used on GOV.UK Verify and Passports. We guerilla tested this on Friday, and it really helped users to build a mental model of how Notify works, so that when they’re playing around with it they have a greater sense of what they’re aiming to do. This makes concepts like templates and placeholders click more quickly. https://www.pivotaltracker.com/story/show/116710119
2016-04-01 10:54:55 +01:00
}
}
Add a tour for users new to broadcast services This is an initial, prototype-quality attempt at introducing some kind of tour for users new to broadcasting. A lot of the users we’re speaking to don’t have a good concept of what broadcasting means, which is causing usability problems down the line. We did a similar thing in the early days of Notify to explain the concept of message templates and personalisation.
2020-08-03 13:37:34 +01:00
ul {
@include core-24;
color: $white;
margin-bottom: govuk-spacing(5);
}
li {
margin-bottom: govuk-spacing(3);
list-style-type: disc;
margin-left: govuk-spacing(6);
}
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
a {
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-11 22:23:03 +00:00
font-weight: bold;
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
display: block;
padding: 0 ;
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: 0 0 govuk-spacing(6) 0;
Show a tour when users first create a service This commit adds a 3 screen tour, similar to those used on GOV.UK Verify and Passports. We guerilla tested this on Friday, and it really helped users to build a mental model of how Notify works, so that when they’re playing around with it they have a greater sense of what they’re aiming to do. This makes concepts like templates and placeholders click more quickly. https://www.pivotaltracker.com/story/show/116710119
2016-04-01 10:54:55 +01:00
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
&:link,
&:visited {
color: $white;
}
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-11 22:23:03 +00:00
&:hover {
color: $white;
background-color: $link-hover-colour;
Replace uses of $yellow for focus There are a few places where we missed updating to the new focus styles because they were using the `$yellow` SASS variable and not the `$focus-colour` variable. This commit updates them to the new colour, and where needed adds the black lower border to match.
2020-09-23 10:50:43 +01:00
box-shadow: 0 0 0 10px solid $link-hover-colour;
}
&:focus,
&:active {
color: $govuk-focus-text-colour;
background-color: $govuk-focus-colour;
box-shadow: 0 0 0 10px $govuk-focus-colour, 0 4px 0 10px $govuk-focus-text-colour;
Revert "Convert all links to govuk frontend"
2020-02-24 11:56:38 +00:00
}
Show a tour when users first create a service This commit adds a 3 screen tour, similar to those used on GOV.UK Verify and Passports. We guerilla tested this on Friday, and it really helped users to build a mental model of how Notify works, so that when they’re playing around with it they have a greater sense of what they’re aiming to do. This makes concepts like templates and placeholders click more quickly. https://www.pivotaltracker.com/story/show/116710119
2016-04-01 10:54:55 +01:00
}
Add a tour for users new to broadcast services This is an initial, prototype-quality attempt at introducing some kind of tour for users new to broadcasting. A lot of the users we’re speaking to don’t have a good concept of what broadcasting means, which is causing usability problems down the line. We did a similar thing in the early days of Notify to explain the concept of message templates and personalisation.
2020-08-03 13:37:34 +01:00
img {
width: 100%;
height: auto;
Refine broadcast tour based on research learnings We’ve shown the broadcast tour to a few users now. We’ve learned what concepts about broadcasting are and aren’t getting through. So what we’re emphasising here is: - the thing that appears on the phone (the ‘emergency alert’) not the technology (a ‘broadcast’) - how it’s different to other channels of messaging, eg text We’ve generally spent a lot more time on the content and illustrations this time around, so overall it’s should be clearer and shorter. This also expands the communication of training mode into the header, so it’s visible on every page (we can add another one for ‘live’ services later on).
2020-08-19 14:54:50 +01:00
position: relative;
top: -1 * govuk-spacing(2);
Add a tour for users new to broadcast services This is an initial, prototype-quality attempt at introducing some kind of tour for users new to broadcasting. A lot of the users we’re speaking to don’t have a good concept of what broadcasting means, which is causing usability problems down the line. We did a similar thing in the early days of Notify to explain the concept of message templates and personalisation.
2020-08-03 13:37:34 +01:00
}
Add a link to help page from the trial mode banner
2016-03-17 14:56:52 +00:00
Fix highlighted step on tour in IE8 We grey-out the non-current step in the tour so the user knows whether they’re at step 1, 2, or 3. This is done using CSS opacity. IE8 doesn’t support the standard CSS opacity syntax. But it does support the weird, old, Microsoft-specific `filter:` syntax. So this commit: - makes the greying out a class rather than an inline style, to reduce duplication - adds the filter syntax so the greying out works in IE8
2017-01-23 12:47:37 +00:00
.greyed-out-step {
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
opacity: 0.6;
Fix highlighted step on tour in IE8 We grey-out the non-current step in the tour so the user knows whether they’re at step 1, 2, or 3. This is done using CSS opacity. IE8 doesn’t support the standard CSS opacity syntax. But it does support the weird, old, Microsoft-specific `filter:` syntax. So this commit: - makes the greying out a class rather than an inline style, to reduce duplication - adds the filter syntax so the greying out works in IE8
2017-01-23 12:47:37 +00:00
}
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
}
Revert "Revert "Restyle template statistics and received text messages""
2020-02-18 16:16:51 +00:00
.banner-dashboard {
$baseline-shift: 5px;
display: block; // for browsers that don't support flexbox
display: flex;
align-items: baseline;
flex-wrap: wrap;
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: (govuk-spacing(3) - 1px) 0 (govuk-spacing(3) + 1px) 0;
Revert "Revert "Restyle template statistics and received text messages""
2020-02-18 16:16:51 +00:00
border-top: 1px solid $border-colour;
border-bottom: 1px solid $border-colour;
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);
Revert "Revert "Restyle template statistics and received text messages""
2020-02-18 16:16:51 +00:00
text-decoration: none;
&:focus {
border-top: 1px solid transparent;
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
border-bottom: 1px solid transparent;
Revert "Revert "Restyle template statistics and received text messages""
2020-02-18 16:16:51 +00:00
}
&-count,
&-meta {
float: left; // for browsers that don't support flexbox
}
&-count {
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 13:36:13 +01:00
@include govuk-font(36, $weight: bold, $tabular: true);
Revert "Revert "Restyle template statistics and received text messages""
2020-02-18 16:16:51 +00:00
padding-right: 8px;
position: relative;
// remove the top of the extra line-height this introduces
top: $baseline-shift;
margin-top: -$baseline-shift;
flex: 0 1 0.85ch;
}
&-count-label {
@include govuk-font(24, $weight: bold);
text-decoration: underline;
padding-right: govuk-spacing(6);
margin: 10px 0px 5px; // 10px includes 5px extra to counter the -5px margin-top on the count item
flex: 2 1 auto;
}
&-meta {
@include govuk-font(19);
float: right;
text-align: right;
flex: initial;
}
& + .banner-dashboard {
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
margin-top: -1 * govuk-spacing(6);
Revert "Revert "Restyle template statistics and received text messages""
2020-02-18 16:16:51 +00:00
border-top: none;
}
}
Reference in New Issue Copy Permalink