darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-02 17:48:50 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
095dd617cd9adfa52be1aa80cc989fd5f8ffc0ae
notifications-admin/app/assets/stylesheets/components/banner.scss

156 lines
2.2 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 `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
padding: $gutter-half;
Make spacing and position of banners consistent Banners should always be the first thing on the page. Because headers already have padding we don’t want to put padding on the container. So banners should also have top padding to distance then from the red bar. They should also sit in the 3/4 column if the page has side navigation. This commit adds a new template (`withoutnav_template.html`) which extends `admin_template.html`. All views then extend one or the other, never the `admin_template.html` directly. This means that `admin_template.html` doesn’t have to make decisions about where the flash messages are displayed.
2016-02-01 12:15:38 +00:00
margin: $gutter-half 0 $gutter 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;
}
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 {
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
padding: $gutter-half ($gutter + $gutter-half);
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');
Fix ticks and crosses on team page in IE8 The ticks and crosses on the team page are served bigger than actual size (128×128px). They are then resized using CSS3 `background-size` to their displayed size (19px). The reason for doing this is so they display crisply on retina screens. IE8 doesn’t support `background-size` (see http://caniuse.com/#feat=background-img-opts). This means that the ticks and crosses get show at their original size (way too big). This commit adds resized versions of the ticks and crosses which are then served to these older browsers only.
2017-01-23 13:02:36 +00:00
@include ie-lte(8) {
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-16px.png');
Fix ticks and crosses on team page in IE8 The ticks and crosses on the team page are served bigger than actual size (128×128px). They are then resized using CSS3 `background-size` to their displayed size (19px). The reason for doing this is so they display crisply on retina screens. IE8 doesn’t support `background-size` (see http://caniuse.com/#feat=background-img-opts). This means that the ticks and crosses get show at their original size (way too big). This commit adds resized versions of the ticks and crosses which are then served to these older browsers only.
2017-01-23 13:02:36 +00:00
}
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;
background-position: $gutter-half $gutter-half;
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 {
outline: 3px solid $yellow;
}
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
.button {
@include button($error-colour);
margin-top: 10px;
}
Show error if you try to send too many messages https://www.pivotaltracker.com/story/show/117630691 There is a limit of 50 messages per day in trial mode. Right now, we don’t tell you this, we just start failing your messages. This commit adds an error message if you upload a CSV file that has too many rows in it.
2016-04-22 09:36:42 +01:00
a {
&:link,
&:visited {
color: $error-colour;
}
&:hover {
color: $mellow-red;
}
}
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;
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
padding: $gutter;
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
.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;
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
margin-bottom: $gutter;
&: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 {
margin-top: -$gutter-half;
}
}
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 {
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
@include bold-19;
display: block;
padding: 0 ;
margin: 0 0 $gutter 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;
}
&:hover,
&:active {
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
background-color: $link-hover-colour;
outline: 10px solid $link-hover-colour;
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
}
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
&:active,
&:focus {
background-color: $yellow;
outline: 10px solid $yellow;
}
Add a link to help page from the trial mode banner
2016-03-17 14:56:52 +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 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 {
$opacity: 0.6;
opacity: $opacity;
@include ie-lte(8) {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + ($opacity * 100) + ")";
}
}
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
}
Reference in New Issue Copy Permalink