From dd30c9f9707c4cb7c8d0851f9c7ea0c8c202cdb0 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 6 Jan 2021 17:38:44 +0000
Subject: [PATCH] Style template length message to sit inline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This looks tidy, and because of the sticky footer it means the message
is always visible, even if your template is quite long. So no matter
where you’re scrolled to in the template you don’t have to scroll to the
bottom to see the count update.
---
 app/assets/stylesheets/components/message.scss     |  2 +-
 app/assets/stylesheets/components/page-footer.scss |  4 ++++
 app/assets/stylesheets/views/template.scss         | 12 ++++++++++++
 app/templates/components/page-footer.html          |  5 +++--
 app/templates/views/edit-broadcast-template.html   |  2 +-
 app/templates/views/edit-sms-template.html         |  4 ++--
 tests/app/main/views/test_templates.py             |  8 ++++++++
 7 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index e8dab86e3..2e9229e51 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/app/assets/stylesheets/components/message.scss
@@ -205,7 +205,7 @@ a {
       margin: 0;
     }
 
-    .content-fixed & {
+    .content-fixed__bottom & {
       right: govuk-spacing(3);
     }
 
diff --git a/app/assets/stylesheets/components/page-footer.scss b/app/assets/stylesheets/components/page-footer.scss
index c1874c397..fae7d85c9 100644
--- a/app/assets/stylesheets/components/page-footer.scss
+++ b/app/assets/stylesheets/components/page-footer.scss
@@ -3,6 +3,10 @@
   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 41670359d..13dd69a50 100644
--- a/app/assets/stylesheets/views/template.scss
+++ b/app/assets/stylesheets/views/template.scss
@@ -55,3 +55,15 @@
   top: 51px; // aligns with ‘change postage’ link
   left: 66px; // Aligns to left of logo area
 }
+
+.template-content-count {
+  @include core-19($tabular-numbers: true);
+  color: $secondary-text-colour;
+  vertical-align: bottom;
+  padding: 0 0 govuk-spacing(1) govuk-spacing(2);
+  display: inline-block;
+
+  & .govuk-error-message {
+    margin-top: 0;
+  }
+}
diff --git a/app/templates/components/page-footer.html b/app/templates/components/page-footer.html
index 789318ae7..66f4564d1 100644
--- a/app/templates/components/page-footer.html
+++ b/app/templates/components/page-footer.html
@@ -10,9 +10,10 @@
   secondary_link_text=None,
   delete_link=False,
   delete_link_text="delete",
-  centered_button=False
+  centered_button=False,
+  inline_block=False
 ) %}
-  <div class="page-footer">
+  <div class="page-footer {% if inline_block %}page-footer--inline-block{% endif %}">
     {% if button_text %}
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
diff --git a/app/templates/views/edit-broadcast-template.html b/app/templates/views/edit-broadcast-template.html
index 21d488885..8a3a0b83d 100644
--- a/app/templates/views/edit-broadcast-template.html
+++ b/app/templates/views/edit-broadcast-template.html
@@ -26,7 +26,7 @@
       </div>
       <div class="govuk-grid-column-full">
         <div class="js-stick-at-bottom-when-scrolling">
-          {{ page_footer('Save') }}
+          {{ page_footer('Save', inline_block=True) }}
           <span 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>
diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html
index bc6a408f0..fcac5f0e9 100644
--- a/app/templates/views/edit-sms-template.html
+++ b/app/templates/views/edit-sms-template.html
@@ -29,8 +29,8 @@
         </div>
         <div class="govuk-grid-column-full">
           <div class="js-stick-at-bottom-when-scrolling">
-            {{ page_footer('Save') }}
-            <span class="template-list-selected-counter">
+            {{ page_footer('Save', inline_block=True) }}
+            <span 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>
             </span>
diff --git a/tests/app/main/views/test_templates.py b/tests/app/main/views/test_templates.py
index 5ec9671fe..ec507490a 100644
--- a/tests/app/main/views/test_templates.py
+++ b/tests/app/main/views/test_templates.py
@@ -490,6 +490,10 @@ 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)
 
 
@@ -530,6 +534,10 @@ 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,