From 4e026bc306bdfa06f276efd244d64c0a9fb92bc8 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 31 Oct 2019 10:49:02 +0000
Subject: [PATCH] Make sure all sticky footer variants are aligned
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bottom margin should always be consistent. Height of footers doesn’t
have to be consistent. Items on the left and right should baseline
align.
---
 app/assets/stylesheets/components/page-footer.scss     | 10 +++++++++-
 .../components/stick-at-top-when-scrolling.scss        |  9 ++-------
 app/templates/views/notifications/check.html           |  2 +-
 app/templates/views/notifications/notification.html    |  2 +-
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/components/page-footer.scss b/app/assets/stylesheets/components/page-footer.scss
index 733f15d5f..8bc4ad4be 100644
--- a/app/assets/stylesheets/components/page-footer.scss
+++ b/app/assets/stylesheets/components/page-footer.scss
@@ -38,9 +38,17 @@
   }
 
   &-right-aligned-link {
+
     position: absolute;
     right: 0;
-    top: 10px;  // align baseline with buttons
+    top: 9px;  // align baseline with buttons
+
+    &-without-button {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
   }
 
   .button,
diff --git a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
index 6c27bb445..df55b945c 100644
--- a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
+++ b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
@@ -43,7 +43,6 @@ $sticky-padding: $gutter * 2 / 3;
   transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out;
   padding: $sticky-padding 0 $sticky-padding $gutter-half;
   margin-top: -$sticky-padding;
-  min-height: 40px;
 
   & + .js-stick-at-bottom-when-scrolling {
     margin-top: ($sticky-padding * 2) * -1;
@@ -54,11 +53,7 @@ $sticky-padding: $gutter * 2 / 3;
   }
 
   .page-footer {
-    margin-bottom: 0;
-  }
-
-  .page-footer-delete-link-without-button {
-    margin-top: 10px;
+    margin-bottom: 1px;
   }
 
   .notification-status {
@@ -66,7 +61,7 @@ $sticky-padding: $gutter * 2 / 3;
   }
 
   .button-secondary {
-    margin-right: $gutter-half;
+    margin: 0 $gutter-half 3px 0;
   }
 
 }
diff --git a/app/templates/views/notifications/check.html b/app/templates/views/notifications/check.html
index 9fc2ff20a..079bf3314 100644
--- a/app/templates/views/notifications/check.html
+++ b/app/templates/views/notifications/check.html
@@ -78,7 +78,7 @@
         <button type="submit" class="button">Send 1 {{ message_count_label(1, template.template_type, suffix='') }}</button>
       {% endif %}
       {% if template.template_type == 'letter' %}
-        <a href="{{ url_for('main.check_notification_preview', service_id=current_service.id, template_id=template.id, filetype='pdf') }}" download class="page-footer-right-aligned-link">Download as a PDF</a>
+        <a href="{{ url_for('main.check_notification_preview', service_id=current_service.id, template_id=template.id, filetype='pdf') }}" download class="page-footer-right-aligned-link{% if error %}-without-button{% endif %}">Download as a PDF</a>
       {% endif %}
     </form>
   </div>
diff --git a/app/templates/views/notifications/notification.html b/app/templates/views/notifications/notification.html
index 0446406ef..905668410 100644
--- a/app/templates/views/notifications/notification.html
+++ b/app/templates/views/notifications/notification.html
@@ -88,7 +88,7 @@
           {% else %}
             <div>&nbsp;</div>
           {% endif %}
-          <a class="page-footer-right-aligned-link" href="{{ url_for('main.view_letter_notification_as_preview', service_id=current_service.id, notification_id=notification_id, filetype='pdf') }}" download>Download as a PDF</a>
+          <a class="page-footer-right-aligned-link-without-button" href="{{ url_for('main.view_letter_notification_as_preview', service_id=current_service.id, notification_id=notification_id, filetype='pdf') }}" download>Download as a PDF</a>
         </div>
       </div>
     {% elif template.template_type == 'email' %}