From 509a9e861d3fc83f11fcaf87fb7274df28f19ef3 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 14 Jan 2019 13:30:12 +0000
Subject: [PATCH] Use sticky footer on edit template page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

If you have a long template it’s annoying to have to scroll all the
way to the bottom to click save, when you’ve only changed a small thing
near the staert of the content.
---
 app/assets/javascripts/highlightTags.js       | 20 +++++++++++++------
 app/templates/views/edit-email-template.html  |  8 +++++---
 app/templates/views/edit-letter-template.html |  8 +++++---
 app/templates/views/edit-sms-template.html    |  8 +++++---
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/highlightTags.js b/app/assets/javascripts/highlightTags.js
index 896c83358..bc533d4b7 100644
--- a/app/assets/javascripts/highlightTags.js
+++ b/app/assets/javascripts/highlightTags.js
@@ -32,12 +32,20 @@
 
     };
 
-    this.resize = () => this.$textbox.height(
-      Math.max(
-        this.initialHeight,
-        this.$background.outerHeight()
-      )
-    );
+    this.resize = () => {
+
+      this.$textbox.height(
+        Math.max(
+          this.initialHeight,
+          this.$background.outerHeight()
+        )
+      );
+
+      if ('stickAtBottomWhenScrolling' in GOVUK) {
+        GOVUK.stickAtBottomWhenScrolling.recalculate();
+      }
+
+    };
 
     this.escapedMessage = () => $('<div/>').text(this.$textbox.val()).html();
 
diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html
index 695983d40..b9c220ab5 100644
--- a/app/templates/views/edit-email-template.html
+++ b/app/templates/views/edit-email-template.html
@@ -23,9 +23,11 @@
           {% if current_user.platform_admin %}
              {{ radios(form.process_type) }}
           {% endif %}
-          {{ page_footer(
-            'Save'
-          ) }}
+          <div class="js-stick-at-bottom-when-scrolling">
+            {{ page_footer(
+              'Save'
+            ) }}
+          </div>
         </div>
         <aside class="column-whole">
           {% include "partials/templates/guidance-formatting.html" %}
diff --git a/app/templates/views/edit-letter-template.html b/app/templates/views/edit-letter-template.html
index 353ae4721..400c76daa 100644
--- a/app/templates/views/edit-letter-template.html
+++ b/app/templates/views/edit-letter-template.html
@@ -23,9 +23,11 @@
           {% endif %}
           {{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }}
           {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }}
-          {{ page_footer(
-            'Save'
-          ) }}
+          <div class="js-stick-at-bottom-when-scrolling">
+            {{ page_footer(
+              'Save'
+            ) }}
+          </div>
         </div>
         <aside class="column-three-quarters">
           {% include "partials/templates/guidance-formatting-letters.html" %}
diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html
index 2b56c4852..49a3f1e58 100644
--- a/app/templates/views/edit-sms-template.html
+++ b/app/templates/views/edit-sms-template.html
@@ -24,9 +24,11 @@
           {% if current_user.platform_admin %}
             {{ radios(form.process_type) }}
           {% endif %}
-          {{ page_footer(
-            'Save'
-          ) }}
+          <div class="js-stick-at-bottom-when-scrolling">
+            {{ page_footer(
+              'Save'
+            ) }}
+          </div>
         </div>
         <aside class="column-whole">
           {% include "partials/templates/guidance-personalisation.html" %}