From cf5a6d4f924077e17a0b3391808e94facf25a036 Mon Sep 17 00:00:00 2001
From: Patrick Cartlidge <patrickcartlidge@gmail.com>
Date: Mon, 16 Jan 2023 14:43:33 +0000
Subject: [PATCH] Subscribe and Print Buttons on Same Row

At the bottom of content item pages, the email subscription button and
print button have been moved to be on the same row. This was a request
from the designers of the Navigation and Presentation team.
---
 .../stylesheets/components/_back-to-top.scss  |  2 +-
 .../stylesheets/views/_detailed-guide.scss    | 16 ++++++++++++
 .../content_items/detailed_guide.html.erb     | 18 +------------
 ...ed_dates_with_notification_button.html.erb | 26 ++++++++++++++++---
 4 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/components/_back-to-top.scss b/app/assets/stylesheets/components/_back-to-top.scss
index 23740bac3..18abaf0aa 100644
--- a/app/assets/stylesheets/components/_back-to-top.scss
+++ b/app/assets/stylesheets/components/_back-to-top.scss
@@ -1,6 +1,6 @@
 .app-c-back-to-top {
   display: inline-block;
-  margin-bottom: govuk-spacing(3);
+  margin-bottom: govuk-spacing(2);
   margin-left: govuk-spacing(3);
   margin-right: govuk-spacing(3);
 }
diff --git a/app/assets/stylesheets/views/_detailed-guide.scss b/app/assets/stylesheets/views/_detailed-guide.scss
index 19f8e59e0..2840201ec 100644
--- a/app/assets/stylesheets/views/_detailed-guide.scss
+++ b/app/assets/stylesheets/views/_detailed-guide.scss
@@ -21,3 +21,19 @@
     }
   }
 }
+
+.detailed-guide-bottom-button-container {
+  @include govuk-media-query($from: tablet) {
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+.detailed-guide-bottom-button-container form {
+  @include govuk-media-query($until: tablet) {
+    margin-bottom: govuk-spacing(3);
+  }
+  @include govuk-media-query($from: tablet) {
+    margin-right: govuk-spacing(4);
+  }
+}
diff --git a/app/views/content_items/detailed_guide.html.erb b/app/views/content_items/detailed_guide.html.erb
index c77b38648..977be0923 100644
--- a/app/views/content_items/detailed_guide.html.erb
+++ b/app/views/content_items/detailed_guide.html.erb
@@ -100,24 +100,8 @@
         <%= raw(@content_item.govspeak_body[:content]) %>
       <% end %>
 
-      <div class="responsive-bottom-margin">
-        <%= render 'shared/published_dates_with_notification_button' %>
-      </div>
+      <%= render 'shared/published_dates_with_notification_button' %>
     <% end %>
-    <%= render "govuk_publishing_components/components/print_link", {
-        margin_top: 0,
-        margin_bottom: 6,
-        data_attributes: {
-          module: "ga4-event-tracker",
-          ga4_event: {
-            event_name: 'print_page',
-            type: 'print page',
-            index: 2,
-            index_total: 2,
-            section: 'Footer',
-          },
-        },
-      } %>
   </div>
   <%= render 'shared/sidebar_navigation' %>
 </div>
diff --git a/app/views/shared/_published_dates_with_notification_button.html.erb b/app/views/shared/_published_dates_with_notification_button.html.erb
index e8cb63071..cb81e44d8 100644
--- a/app/views/shared/_published_dates_with_notification_button.html.erb
+++ b/app/views/shared/_published_dates_with_notification_button.html.erb
@@ -2,11 +2,29 @@
     published: @content_item.published,
     last_updated: @content_item.updated,
     history: @content_item.history,
-    margin_bottom: 3,
+    margin_bottom: 5,
   } %>
-<%= render 'govuk_publishing_components/components/single_page_notification_button', {
+
+<div class="detailed-guide-bottom-button-container">
+  <%= render 'govuk_publishing_components/components/single_page_notification_button', {
     base_path: @content_item.base_path,
     js_enhancement: @has_govuk_account,
     button_location: "bottom",
-    margin_bottom: 0,
-} if @content_item.has_single_page_notifications? %>
+    margin_bottom: 3,
+  } if @content_item.has_single_page_notifications? %>
+  <%= render "govuk_publishing_components/components/print_link", {
+    margin_top: 0,
+    margin_bottom: 8,
+    data_attributes: {
+      module: "ga4-event-tracker",
+      ga4_event: {
+        event_name: 'print_page',
+        type: 'print page',
+        index: 2,
+        index_total: 2,
+        section: 'Footer',
+      },
+    },
+  } %>
+</div>
+