darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-08 08:28:15 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
295f301c19df42db59aff6c131f6bc4dc630c024
notifications-admin/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss

154 lines
2.8 KiB
SCSS
Raw Normal View History

Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
// CSS adapted from
// https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling
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
$sticky-padding: govuk-spacing(4);
Deal with focus state following cancelation Follows pattern from dialogs whereby focus returns to the button/link that fired the dialog when it closes.
2019-02-01 16:13:04 +00:00
Add stop-at-bottom functionality Detach all methods from sticky reference so they can be attached to different objects. Split sticky into stickAtTop and stickAtBottom and make new versions of all methods and properties specific to stickAtBottom. Add CSS for stickAtBottom and call on load
2018-11-05 17:47:25 +00:00
.js-stick-at-top-when-scrolling,
.js-stick-at-bottom-when-scrolling {
Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
Tidy up JS code for focusing & associated html Makes sure the tabindex we add for focusing is removed. Also removes the outer fieldset from the radios for new templates. We don't wrap form buttons in fieldsets anywhere else and it doesn't add any useful semantics to the form.
2019-01-30 10:47:26 +00:00
overflow: hidden;
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-left: -1 * govuk-spacing(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: 10px 0 0 govuk-spacing(3);
Ease fixed-position elements into place The transition between something being static in the page and fixed to the top of the viewport is a bit jarring. This commit adds a bit of animation so that, as elements become fixed, they appear to catch up with the scrolling of the page.
2017-06-15 07:52:36 +01:00
position: relative;
Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
.form-group {
margin-bottom: 20px;
Tidy up JS code for focusing & associated html Makes sure the tabindex we add for focusing is removed. Also removes the outer fieldset from the radios for new templates. We don't wrap form buttons in fieldsets anywhere else and it doesn't add any useful semantics to the form.
2019-01-30 10:47:26 +00:00
legend {
outline: none;
}
Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
}
Change tables to scroll in-page, not full screen There were three problems with showing tables fullscreen: - it was over-optimised for very big spreadsheets, whereas most users will only have a few columns in their files - it was jarring to go from full screen and back to the normal layout - it was a bit change for existing users, where we prefer incremental changes that make things better without disrupting people’s work (where possible) So this commit changes the big table to scroll horizontally in the page, not take up the full width of the page. From the fullscreen table it keeps: - the shimming method to keep the horizontal scrollbar at the bottom of the screen at all times It introduces some more refinements to make it nicer to use: - fixing the first column, so you always know what row you’re on - adding shadows indicate where there is content that’s scrolled outside the edges of the container
2017-12-14 11:58:40 +00:00
.back-to-top-link {
position: absolute;
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
top: govuk-spacing(6);
right: govuk-spacing(3);
Change tables to scroll in-page, not full screen There were three problems with showing tables fullscreen: - it was over-optimised for very big spreadsheets, whereas most users will only have a few columns in their files - it was jarring to go from full screen and back to the normal layout - it was a bit change for existing users, where we prefer incremental changes that make things better without disrupting people’s work (where possible) So this commit changes the big table to scroll horizontally in the page, not take up the full width of the page. From the fullscreen table it keeps: - the shimming method to keep the horizontal scrollbar at the bottom of the screen at all times It introduces some more refinements to make it nicer to use: - fixing the first column, so you always know what row you’re on - adding shadows indicate where there is content that’s scrolled outside the edges of the container
2017-12-14 11:58:40 +00:00
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
}
Add stop-at-bottom functionality Detach all methods from sticky reference so they can be attached to different objects. Split sticky into stickAtTop and stickAtBottom and make new versions of all methods and properties specific to stickAtBottom. Add CSS for stickAtBottom and call on load
2018-11-05 17:47:25 +00:00
.js-stick-at-top-when-scrolling {
margin-top: -10px;
margin-bottom: 5px;
top: 5px;
transition: top 0.1s ease-out, box-shadow 1s ease-in-out;
}
Fix copypaste error
2018-11-12 09:54:25 +00:00
.js-stick-at-bottom-when-scrolling {
Add stop-at-bottom functionality Detach all methods from sticky reference so they can be attached to different objects. Split sticky into stickAtTop and stickAtBottom and make new versions of all methods and properties specific to stickAtBottom. Add CSS for stickAtBottom and call on load
2018-11-05 17:47:25 +00:00
transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out;
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: $sticky-padding 0 $sticky-padding govuk-spacing(3);
Deal with focus state following cancelation Follows pattern from dialogs whereby focus returns to the button/link that fired the dialog when it closes.
2019-02-01 16:13:04 +00:00
margin-top: -$sticky-padding;
Style spacing for sticky footers Sticky footers need slightly different spacing to sticky headers so they look balanced. They can’t just inherit the same spacing.
2018-11-19 15:18:15 +00:00
Remove padding between stickys when stacked
2019-01-30 14:10:59 +00:00
& + .js-stick-at-bottom-when-scrolling {
Tidy up JS code for focusing & associated html Makes sure the tabindex we add for focusing is removed. Also removes the outer fieldset from the radios for new templates. We don't wrap form buttons in fieldsets anywhere else and it doesn't add any useful semantics to the form.
2019-01-30 10:47:26 +00:00
margin-top: ($sticky-padding * 2) * -1;
Remove padding between stickys when stacked
2019-01-30 14:10:59 +00:00
}
Move focus of legends to their fieldsets When testing with the JAWS screenreader, we found a bug around getting it to announce the name of a fieldset when we ask the user to select from it. Bug on pivotal: https://www.pivotaltracker.com/story/show/165565088 The flows for adding a new template and moving a template/folder both need the user to select an option from a radio group. When we add the radio group to the UI, we need to move focus to it so the user is in the right place to choose an option. The expectation of the original code was that focusing the field set's legend would work like focusing the heading of a section of content and announce the label of it. This didn't happen with JAWS. This tries to achieve the same by focusing the whole fieldset instead. When doing this we also hide the focus style, to follow the convention for this across www.gov.uk.
2019-07-11 14:28:13 +01:00
fieldset:focus {
outline: none;
}
Style spacing for sticky footers Sticky footers need slightly different spacing to sticky headers so they look balanced. They can’t just inherit the same spacing.
2018-11-19 15:18:15 +00:00
.page-footer {
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
margin-bottom: 1px;
Add link to cancel letters Added a link to cancel letters from the letter notification pages if the letter is still able to be cancelled. Clicking on this link will show a confirmation box, and will then cancel the letter if the user confirms.
2018-12-05 10:58:27 +00:00
}
Stick email status to bottom of screen We’ve moved away from using the expand/collapse pattern on the page where you click ‘send’. Instead we’re putting the send button in the sticky footer. So it’s a bit jarring to still have the expand/collapse on the page you see after you’ve sent an email. This commit replaces it with the sticky footer as well. This is only relevant for emails because: 1. Text messages are generally short enough to fit on the screen 2. We don’t show the status of letters because they don’t really change
2018-11-20 13:57:48 +00:00
.notification-status {
margin: 0;
}
Add stop-at-bottom functionality Detach all methods from sticky reference so they can be attached to different objects. Split sticky into stickAtTop and stickAtBottom and make new versions of all methods and properties specific to stickAtBottom. Add CSS for stickAtBottom and call on load
2018-11-05 17:47:25 +00:00
}
Remove transition if element is stuck onload Fade-in and out for sticky elements should only be when they move from being in-page to stuck from a user interaction.
2018-11-13 14:08:06 +00:00
.content-fixed,
.content-fixed-onload {
Change tables to scroll in-page, not full screen There were three problems with showing tables fullscreen: - it was over-optimised for very big spreadsheets, whereas most users will only have a few columns in their files - it was jarring to go from full screen and back to the normal layout - it was a bit change for existing users, where we prefer incremental changes that make things better without disrupting people’s work (where possible) So this commit changes the big table to scroll horizontally in the page, not take up the full width of the page. From the fullscreen table it keeps: - the shimming method to keep the horizontal scrollbar at the bottom of the screen at all times It introduces some more refinements to make it nicer to use: - fixing the first column, so you always know what row you’re on - adding shadows indicate where there is content that’s scrolled outside the edges of the container
2017-12-14 11:58:40 +00:00
Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
position: fixed;
background: $white;
z-index: 100;
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-right: govuk-spacing(3);
Add mode for grouping sticky elements as a dialog We want a mode for when a single task is shared between all sticky elements on the page and that task has the highest priority on the page. In that case: - they should stack together into a single block, attached to the top/bottom of the viewport - that block should adjust to the vertical space available This should also adjust to the height of the viewport, dropping whatever elements that don't fit back into the page flow. When this happens, we scroll the page so all the parts of the dialog are seen together at the start of the task.
2019-01-08 17:30:46 +00:00
margin-top: 0;
Change tables to scroll in-page, not full screen There were three problems with showing tables fullscreen: - it was over-optimised for very big spreadsheets, whereas most users will only have a few columns in their files - it was jarring to go from full screen and back to the normal layout - it was a bit change for existing users, where we prefer incremental changes that make things better without disrupting people’s work (where possible) So this commit changes the big table to scroll horizontally in the page, not take up the full width of the page. From the fullscreen table it keeps: - the shimming method to keep the horizontal scrollbar at the bottom of the screen at all times It introduces some more refinements to make it nicer to use: - fixing the first column, so you always know what row you’re on - adding shadows indicate where there is content that’s scrolled outside the edges of the container
2017-12-14 11:58:40 +00:00
.back-to-top-link {
opacity: 1;
transition: opacity 0.6s ease-in-out;
}
Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
}
Remove transition if element is stuck onload Fade-in and out for sticky elements should only be when they move from being in-page to stuck from a user interaction.
2018-11-13 14:08:06 +00:00
.js-stick-at-top-when-scrolling.content-fixed,
.js-stick-at-top-when-scrolling.content-fixed-onload {
Add stop-at-bottom functionality Detach all methods from sticky reference so they can be attached to different objects. Split sticky into stickAtTop and stickAtBottom and make new versions of all methods and properties specific to stickAtBottom. Add CSS for stickAtBottom and call on load
2018-11-05 17:47:25 +00:00
top: 0;
margin-top: 0;
Add box shadow by JS When mode === 'dialog', sticky elements are stacked so we need to apply the box shadow to the top (when sticking to the bottom edge) and bottom (when sticking to the top edge) elements in the stack. From what I can see, we need the version of `nth-child` that supports targeting by selector. As of this date, support for this is only in Safari: https://caniuse.com/#feat=css-nth-child-of Until we can use this version of `nth-child`, we need to use JS to apply the styles.
2019-01-18 11:44:59 +00:00
}
.js-stick-at-top-when-scrolling.content-fixed__top {
Add stop-at-bottom functionality Detach all methods from sticky reference so they can be attached to different objects. Split sticky into stickAtTop and stickAtBottom and make new versions of all methods and properties specific to stickAtBottom. Add CSS for stickAtBottom and call on load
2018-11-05 17:47:25 +00:00
border-bottom: 1px solid $border-colour;
box-shadow: 0 2px 0 0 rgba($border-colour, 0.2);
Remove transition if element is stuck onload Fade-in and out for sticky elements should only be when they move from being in-page to stuck from a user interaction.
2018-11-13 14:08:06 +00:00
}
.js-stick-at-top-when-scrolling.content-fixed {
Add stop-at-bottom functionality Detach all methods from sticky reference so they can be attached to different objects. Split sticky into stickAtTop and stickAtBottom and make new versions of all methods and properties specific to stickAtBottom. Add CSS for stickAtBottom and call on load
2018-11-05 17:47:25 +00:00
transition: background 0.6s ease-in-out, margin-top 0.4s ease-out;
}
Remove transition if element is stuck onload Fade-in and out for sticky elements should only be when they move from being in-page to stuck from a user interaction.
2018-11-13 14:08:06 +00:00
.js-stick-at-bottom-when-scrolling.content-fixed,
.js-stick-at-bottom-when-scrolling.content-fixed-onload {
Add stop-at-bottom functionality Detach all methods from sticky reference so they can be attached to different objects. Split sticky into stickAtTop and stickAtBottom and make new versions of all methods and properties specific to stickAtBottom. Add CSS for stickAtBottom and call on load
2018-11-05 17:47:25 +00:00
top: auto; // cancel `top: 0;` inherited from govuk-template
bottom: 0;
Add box shadow by JS When mode === 'dialog', sticky elements are stacked so we need to apply the box shadow to the top (when sticking to the bottom edge) and bottom (when sticking to the top edge) elements in the stack. From what I can see, we need the version of `nth-child` that supports targeting by selector. As of this date, support for this is only in Safari: https://caniuse.com/#feat=css-nth-child-of Until we can use this version of `nth-child`, we need to use JS to apply the styles.
2019-01-18 11:44:59 +00:00
}
.js-stick-at-bottom-when-scrolling.content-fixed__bottom {
Add stop-at-bottom functionality Detach all methods from sticky reference so they can be attached to different objects. Split sticky into stickAtTop and stickAtBottom and make new versions of all methods and properties specific to stickAtBottom. Add CSS for stickAtBottom and call on load
2018-11-05 17:47:25 +00:00
border-top: 1px solid $border-colour;
box-shadow: 0 -2px 0 0 rgba($border-colour, 0.2);
Remove transition if element is stuck onload Fade-in and out for sticky elements should only be when they move from being in-page to stuck from a user interaction.
2018-11-13 14:08:06 +00:00
}
.js-stick-at-bottom-when-scrolling.content-fixed {
Add stop-at-bottom functionality Detach all methods from sticky reference so they can be attached to different objects. Split sticky into stickAtTop and stickAtBottom and make new versions of all methods and properties specific to stickAtBottom. Add CSS for stickAtBottom and call on load
2018-11-05 17:47:25 +00:00
transition: background 0.6s ease-in-out;
}
Remove transition if element is stuck onload Fade-in and out for sticky elements should only be when they move from being in-page to stuck from a user interaction.
2018-11-13 14:08:06 +00:00
.js-stick-at-bottom-when-scrolling-loaded.content-fixed-onload {
transition: none;
}
Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
.shim {
display: block;
Fix bug horizontal scrollbar being pushed off page We weren’t calculating the height quite right; we were trying to compensate for something that should have been compensated for in the `stick-at-top-when-scrolling` code. Add the 5px to the shim there is required because we’re adding it to the element that the shim in replacing.
2017-12-20 15:37:34 +00:00
margin-bottom: 5px;
Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
}
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 {
display: inline-block;
padding: 10px 10px 5px 10px;
margin-top: -10px;
margin-right: -10px;
text-decoration: underline;
color: $govuk-blue;
cursor: pointer;
&:hover {
color: $link-hover-colour;
}
Fixes for focus issues on /templates page(s) Includes: - fixes for the cancel button, when selecting a template type (after clicking 'New template') - making the folder icon black, to match the text, on template list items
2020-09-16 14:43:48 +01:00
&:focus {
/* override default box shadow to stop it looking so large vertically */
box-shadow: inset 0 -4px $govuk-focus-text-colour;
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
}
}
Reference in New Issue Copy Permalink