From c127de42684631d353233a030afac44e5c1a4ec9 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 8 Jan 2021 13:49:18 +0000
Subject: [PATCH] Move message length information before the button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We feel that this is more appropriate because it’s part of the
information you’re agreeing to before you hit submit.

Sometimes users can missing information that doesn’t start left-aligned
to the column they’re interacting with.

It also makes it closer to the Design System component.

We’re keeping it in the sticky footer, so that it’s always visible no
matter where in the message you’re scrolled to (this means you won’t
have to edited to content then scroll down to check whether you’ve
made it fit).
---
 app/assets/stylesheets/components/page-footer.scss |  4 ----
 app/assets/stylesheets/views/template.scss         |  6 +++++-
 app/templates/components/page-footer.html          |  5 ++---
 app/templates/components/textbox.html              |  5 +++--
 app/templates/views/edit-broadcast-template.html   | 11 +++++++++--
 app/templates/views/edit-sms-template.html         | 10 ++++++++--
 tests/app/main/views/test_templates.py             |  8 --------
 7 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/components/page-footer.scss b/app/assets/stylesheets/components/page-footer.scss
index fae7d85c9..c1874c397 100644
--- a/app/assets/stylesheets/components/page-footer.scss
+++ b/app/assets/stylesheets/components/page-footer.scss
@@ -3,10 +3,6 @@
   position: relative;
   margin-bottom: 30px;
 
-  &--inline-block {
-    display: inline-block;
-  }
-
   &-delete-link {
 
     line-height: 40px;
diff --git a/app/assets/stylesheets/views/template.scss b/app/assets/stylesheets/views/template.scss
index 13dd69a50..481a80dc0 100644
--- a/app/assets/stylesheets/views/template.scss
+++ b/app/assets/stylesheets/views/template.scss
@@ -60,9 +60,13 @@
   @include core-19($tabular-numbers: true);
   color: $secondary-text-colour;
   vertical-align: bottom;
-  padding: 0 0 govuk-spacing(1) govuk-spacing(2);
+  padding: 0 0 govuk-spacing(6) 0
   display: inline-block;
 
+  .content-fixed__bottom & {
+    padding-bottom: govuk-spacing(3);
+  }
+
   & .govuk-error-message {
     margin-top: 0;
   }
diff --git a/app/templates/components/page-footer.html b/app/templates/components/page-footer.html
index 66f4564d1..789318ae7 100644
--- a/app/templates/components/page-footer.html
+++ b/app/templates/components/page-footer.html
@@ -10,10 +10,9 @@
   secondary_link_text=None,
   delete_link=False,
   delete_link_text="delete",
-  centered_button=False,
-  inline_block=False
+  centered_button=False
 ) %}
-  <div class="page-footer {% if inline_block %}page-footer--inline-block{% endif %}">
+  <div class="page-footer">
     {% if button_text %}
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index 40e691ec3..64e83f2fc 100644
--- a/app/templates/components/textbox.html
+++ b/app/templates/components/textbox.html
@@ -11,10 +11,11 @@
   width='2-3',
   suffix=None,
   safe_error_message=False,
-  rows=8
+  rows=8,
+  extra_form_group_classes=''
 ) %}
   <div
-    class="form-group{% if field.errors %} form-group-error{% endif %}"
+    class="form-group{% if field.errors %} form-group-error{% endif %} {{ extra_form_group_classes }}"
     data-module="{% if autofocus %}autofocus{% elif colour_preview %}colour-preview{% endif %}"
   >
     <label class="form-label" for="{{ field.name }}">
diff --git a/app/templates/views/edit-broadcast-template.html b/app/templates/views/edit-broadcast-template.html
index 4bc8cf829..f25a7fab9 100644
--- a/app/templates/views/edit-broadcast-template.html
+++ b/app/templates/views/edit-broadcast-template.html
@@ -22,15 +22,22 @@
           "classes": "govuk-!-width-full",
           "hint": {"text": "Your recipients will not see this"},
         }) }}
-        {{ textbox(form.template_content, highlight_placeholders=False, autosize=True, width='1-1', rows=5) }}
+        {{ textbox(
+          form.template_content,
+          highlight_placeholders=False,
+          autosize=True,
+          width='1-1',
+          rows=5,
+          extra_form_group_classes='govuk-!-margin-bottom-2'
+        ) }}
       </div>
       <div class="govuk-grid-column-full">
         <div class="js-stick-at-bottom-when-scrolling">
-          {{ page_footer('Save', inline_block=True) }}
           <div class="template-content-count">
             <div data-module="update-status" data-target="template_content" data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='broadcast') }}" aria-live="polite">
             </div>
           </div>
+          {{ page_footer('Save') }}
         </div>
       </div>
     </div>
diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html
index 5daad6d57..3a7fdf33f 100644
--- a/app/templates/views/edit-sms-template.html
+++ b/app/templates/views/edit-sms-template.html
@@ -22,18 +22,24 @@
             "classes": "govuk-!-width-full",
             "hint": {"text": "Your recipients will not see this"}
           }) }}
-          {{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=5) }}
+          {{ textbox(
+            form.template_content,
+            highlight_placeholders=True,
+            width='1-1',
+            rows=5,
+            extra_form_group_classes='govuk-!-margin-bottom-2'
+          ) }}
           {% if current_user.platform_admin %}
             {{ form.process_type }}
           {% endif %}
         </div>
         <div class="govuk-grid-column-full">
           <div class="js-stick-at-bottom-when-scrolling">
-            {{ page_footer('Save', inline_block=True) }}
             <div class="template-content-count">
               <div data-module="update-status" data-target="template_content" data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='sms') }}" aria-live="polite">
               </div>
             </div>
+            {{ page_footer('Save') }}
           </div>
         </div>
         <aside class="govuk-grid-column-full">
diff --git a/tests/app/main/views/test_templates.py b/tests/app/main/views/test_templates.py
index ec507490a..5ec9671fe 100644
--- a/tests/app/main/views/test_templates.py
+++ b/tests/app/main/views/test_templates.py
@@ -490,10 +490,6 @@ def test_should_show_page_for_one_template(
         'polite'
     )
 
-    assert page.select_one('.page-footer')['class'] == [
-        'page-footer', 'page-footer--inline-block',
-    ]
-
     mock_get_service_template.assert_called_with(SERVICE_ONE_ID, template_id, None)
 
 
@@ -534,10 +530,6 @@ def test_broadcast_template_doesnt_highlight_placeholders_but_does_count_charact
         'polite'
     )
 
-    assert page.select_one('.page-footer')['class'] == [
-        'page-footer', 'page-footer--inline-block',
-    ]
-
 
 def test_caseworker_redirected_to_one_off(
     client_request,