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

58 lines
1.1 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
.js-stick-at-top-when-scrolling {
overflow: hidden;
margin-left: -$gutter-half;
Stop fixed position elements flying about Normally, fixed position elements are positioned at `top: 0`. The code that stops them from overlapping the footer does so by: - setting the position to absolulte - setting `top` to a calculated value (eg `1500px`) which makes it sit above the footer The problem is caused because we’re animating `top`, so when scrolling back up the page elements are getting animated from `1500px` to `0px`, ie flying up from the bottom of the screen.
2017-06-15 11:47:32 +01:00
margin-top: -10px;
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
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
padding: 10px 0 0 $gutter-half;
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;
Stop fixed position elements flying about Normally, fixed position elements are positioned at `top: 0`. The code that stops them from overlapping the footer does so by: - setting the position to absolulte - setting `top` to a calculated value (eg `1500px`) which makes it sit above the footer The problem is caused because we’re animating `top`, so when scrolling back up the page elements are getting animated from `1500px` to `0px`, ie flying up from the bottom of the screen.
2017-06-15 11:47:32 +01:00
top: 5px;
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
transition: top 0.1s ease-out, box-shadow 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
.form-group {
margin-bottom: 20px;
}
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;
top: $gutter;
right: $gutter-half;
opacity: 0;
transition: opacity 0.1s ease-in-out;
@include ie-lte(8) {
display: 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
}
.content-fixed {
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;
top: 0;
background: $white;
z-index: 100;
margin-top: 0;
padding-right: $gutter-half;
border-bottom: 1px solid $border-colour;
box-shadow: 0 2px 0 0 rgba($border-colour, 0.2);
Stop fixed position elements flying about Normally, fixed position elements are positioned at `top: 0`. The code that stops them from overlapping the footer does so by: - setting the position to absolulte - setting `top` to a calculated value (eg `1500px`) which makes it sit above the footer The problem is caused because we’re animating `top`, so when scrolling back up the page elements are getting animated from `1500px` to `0px`, ie flying up from the bottom of the screen.
2017-06-15 11:47:32 +01:00
transition: background 0.6s ease-in-out, margin-top 0.4s ease-out;
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
}
.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
}
Reference in New Issue Copy Permalink