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: d9489a9870/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.

app/assets/javascripts/main.js

@@ -1,5 +1,7 @@
 $(() => $("time.timeago").timeago());
 
+$(() => GOVUK.stickAtTopWhenScrolling.init());
+
 $(() => GOVUK.modules.start());
 
 $(() => $('.error-message').eq(0).parent('label').next('input').trigger('focus'));

app/assets/stylesheets/components/stick-at-top-when-scrolling.scss

@@ -0,0 +1,30 @@
+// 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;
+  margin-top: -10px;
+  padding: 10px 0 0 $gutter-half;
+
+  .form-group {
+    margin-bottom: 20px;
+  }
+
+}
+
+.content-fixed {
+  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);
+}
+
+.shim {
+  display: block;
+}

app/assets/stylesheets/main.scss

@@ -57,6 +57,7 @@ $path: '/static/images/';
 @import 'components/list-entry';
 @import 'components/letter';
 @import 'components/live-search';
+@import 'components/stick-at-top-when-scrolling';
 @import 'components/vendor/breadcrumbs';
 @import 'components/vendor/responsive-embed';
 

app/templates/views/send-test.html

@@ -26,9 +26,7 @@
   {% endif %}
   </h1>
 
-  {{ template|string }}
-
-  <form method="post">
+  <form method="post" class="js-stick-at-top-when-scrolling">
     {{ textbox(
       form.placeholder_value,
       hint='Optional' if optional_placeholder else None
@@ -36,4 +34,6 @@
     {{ page_footer('Next', back_link=back_link) }}
   </form>
 
+  {{ template|string }}
+
 {% endblock %}

gulpfile.babel.js

@@ -54,6 +54,8 @@ gulp.task('copy:govuk_template:images', () => gulp.src(paths.template + 'assets/
 gulp.task('javascripts', () => gulp
   .src([
     paths.toolkit + 'javascripts/govuk/modules.js',
+    paths.toolkit + 'javascripts/govuk/stop-scrolling-at-footer.js',
+    paths.toolkit + 'javascripts/govuk/stick-at-top-when-scrolling.js',
     paths.src + 'javascripts/detailsPolyfill.js',
     paths.src + 'javascripts/apiKey.js',
     paths.src + 'javascripts/autofocus.js',