darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-06 16:18:25 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
4e99cc1448e2f9bfb18bf5df5a567f0b9deeab74
notifications-admin/app/assets/stylesheets/components/page-footer.scss

68 lines
919 B
SCSS
Raw Normal View History

Rename `submit_form` component to `page_footer` Submit form was - a confusing name in itself - not descriptive, because it also has an optional ‘back’ link This commit also puts this component in as many pages as possible, stripping out any hard-coded buttons and links. It replaces any usage of buttons for ‘back’, because these are links, not buttons (ie they don’t change any data).
2016-01-07 20:11:22 +00:00
.page-footer {
Add 'back' button
2015-12-11 07:57:35 +00:00
Style ‘Download PDF’ link
2018-10-31 14:08:37 +00:00
position: relative;
Validate CSVs fully This commit extends the existing function to validate each row’s phone number to also validate that all the required data is present. It does this using the checking that the `Template` class can do when given a template and a `dict` of values.
2016-02-17 15:49:07 +00:00
margin-bottom: 30px;
Simplify check and send SMS page This commit: - removes the row numbering so it’s easier to scan the list of phone numbers - adds subheadings for 'first three' and 'last three' - puts the 'see all' link at the end
2015-12-11 17:25:04 +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
&-delete-link {
line-height: 40px;
Fix users page for research For the lab sessions, users should just see themselves as the only user, not all the fake users (it might confuse them).
2016-02-22 12:07:09 +00:00
padding: 1px 0 0 15px;
Add a link to reject a broadcast If a broadcast definitely shouldn’t go out (for example because it has a spelling mistake or is going to the wrong areas) then we should have a way of removing it. Once it’s removed no-one else can approve it, and it isn’t cluttering up the dashboard. This is a link (because it’s a secondary action) and red (because it’s destructive, in that it’s throwing away someone’s work).
2020-07-17 08:07:44 +01:00
font-weight: normal;
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
}
Make delete link flush left when there’s no button The delete link was designed to be used with a button, where it needs some padding to separate it from the button. We now have a case where it’s being used without an accompanying button, so we need a variation without that padding.
2017-04-18 13:19:41 +01:00
&-delete-link-without-button {
Fix alignment of links in sticky footer The delete link was inheriting 1px of extra top padding meant to align it when displayed alongside a button. In this case it’s not being displayed alongside a button, so doesn’t need the extra padding.
2019-04-02 09:59:18 +01:00
padding: 0;
Add a message saying a template has been redacted This is useful if it’s been redacted by someone who isn’t you.
2017-06-28 15:26:09 +01:00
display: inline-block;
Make delete link flush left when there’s no button The delete link was designed to be used with a button, where it needs some padding to separate it from the button. We now have a case where it’s being used without an accompanying button, so we need a variation without that padding.
2017-04-18 13:19:41 +01:00
}
Add secondary link pattern to page footer This commit brings back the ‘link under the green button’ bit of the page footer component. Previous it had been changed to be a grey button. But there are use cases for both, maybe even simultaneously.
2016-02-05 09:55:27 +00:00
&-secondary-link {
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);
Add secondary link pattern to page footer This commit brings back the ‘link under the green button’ bit of the page footer component. Previous it had been changed to be a grey button. But there are use cases for both, maybe even simultaneously.
2016-02-05 09:55:27 +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
Style ‘Download PDF’ link
2018-10-31 14:08:37 +00:00
&-right-aligned-link {
Make sure all sticky footer variants are aligned The bottom margin should always be consistent. Height of footers doesn’t have to be consistent. Items on the left and right should baseline align.
2019-10-31 10:49:02 +00:00
Style ‘Download PDF’ link
2018-10-31 14:08:37 +00:00
position: absolute;
right: 0;
Make sure all sticky footer variants are aligned The bottom margin should always be consistent. Height of footers doesn’t have to be consistent. Items on the left and right should baseline align.
2019-10-31 10:49:02 +00:00
top: 9px; // align baseline with buttons
&-without-button {
position: absolute;
right: 0;
top: 0;
}
Style ‘Download PDF’ link
2018-10-31 14:08:37 +00:00
}
Use govuk-button in page footer component
2020-02-03 12:21:39 +00:00
&__button {
Make send a test teach you how placeholders work This commit does two main things: - adds textboxes to the send yourself a test page, so you can replace ((name)) with ‘Chris’, or whatever your name is - rejigs the send page a bit to make it clearer what the CSV upload is for and how to use it The idea being that, since most users go into ‘send yourself a test’ first, it teaches them about how placeholders work by making them do the replacing themselves.
2016-05-05 08:39:36 +01:00
margin-right: 10px;
}
Move cancel buttons alongside submit buttons This is better because it saves vertical space for the contents of the pop-up menu. This commit also adds some padding to the cancel and clear buttons, to make them easier targets to hit.
2018-12-10 17:07:30 +00:00
.js-cancel {
margin: 0;
}
Use govuk-button in page footer component
2020-02-03 12:21:39 +00:00
&__button--centred {
display: block;
margin: 0 auto;
Add a form to set priority of top 2 providers Their priority should always add up to 100%. Currently we have to ensure this by hand. Adding this form means there’s no way to not set their combined priorities to 100%. And it’s a bit more of an intuitive UI than two textboxes on separate pages.
2019-12-02 18:15:00 +00:00
}
Add 'back' button
2015-12-11 07:57:35 +00:00
}
Add a form to filter notifications by recipient Because manually editing the URL isn’t a great user interface, this commit adds a search field to do this on the user’s behalf. For this pass at the story it doesn’t do any validation – the user will just get no results if they search by something which isn’t a phone number or email address. If the user navigates to a different ‘bucket’ of notifications (eg delivered, failed) then the search term is reset, because they’ve changed the filter which is at a level above the search term.
2017-05-30 13:51:25 +01:00
Update buttons that are inline with search box There were 3 pages where we had a search button inline with a text box. This replaces the search button with a button from govuk-frontend and updates the way we style this button to use BEM, which is the style we now want to use.
2020-01-30 11:44:20 +00:00
.search-form__button {
@include media(desktop) {
position: relative;
Convert SearchFields to GovukSearchFields Changes those fields in the following forms: - SearchByNameForm - SearchUsersByEmailForm - SearchUsersForm - SearchNotificationsForm Includes changes to templates that use this form and associated tests.
2020-08-07 10:16:24 +01:00
top: 30px;
Update buttons that are inline with search box There were 3 pages where we had a search button inline with a text box. This replaces the search button with a button from govuk-frontend and updates the way we style this button to use BEM, which is the style we now want to use.
2020-01-30 11:44:20 +00:00
left: -30px;
width: 100%;
margin-right: -30px;
Convert SearchFields to GovukSearchFields Changes those fields in the following forms: - SearchByNameForm - SearchUsersByEmailForm - SearchUsersForm - SearchNotificationsForm Includes changes to templates that use this form and associated tests.
2020-08-07 10:16:24 +01:00
padding-top: 9px;
Update buttons that are inline with search box There were 3 pages where we had a search button inline with a text box. This replaces the search button with a button from govuk-frontend and updates the way we style this button to use BEM, which is the style we now want to use.
2020-01-30 11:44:20 +00:00
box-sizing: content-box;
&:active {
Add a form to filter notifications by recipient Because manually editing the URL isn’t a great user interface, this commit adds a search field to do this on the user’s behalf. For this pass at the story it doesn’t do any validation – the user will just get no results if they search by something which isn’t a phone number or email address. If the user navigates to a different ‘bucket’ of notifications (eg delivered, failed) then the search term is reset, because they’ve changed the filter which is at a level above the search term.
2017-05-30 13:51:25 +01:00
top: 32px;
}
}
}
Reference in New Issue Copy Permalink