From 3106ea0e15a954e0422e2474d42be9f5d490cbd5 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 16 May 2017 16:56:40 +0100
Subject: [PATCH] Make send yourself a test form stay at top of page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 app/assets/javascripts/main.js                |  2 ++
 .../stick-at-top-when-scrolling.scss          | 30 +++++++++++++++++++
 app/assets/stylesheets/main.scss              |  1 +
 app/templates/views/send-test.html            |  6 ++--
 gulpfile.babel.js                             |  2 ++
 5 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/stylesheets/components/stick-at-top-when-scrolling.scss

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index f5e930438..59cf901c8 100644
--- a/app/assets/javascripts/main.js
+++ b/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'));
diff --git a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
new file mode 100644
index 000000000..dcb6ed677
--- /dev/null
+++ b/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;
+}
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index a197fe5d0..29c376245 100644
--- a/app/assets/stylesheets/main.scss
+++ b/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';
 
diff --git a/app/templates/views/send-test.html b/app/templates/views/send-test.html
index 5653db8b2..f743a1fce 100644
--- a/app/templates/views/send-test.html
+++ b/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 %}
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 667f55499..a4d044fba 100644
--- a/gulpfile.babel.js
+++ b/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',