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.
alphagov · Jan 16, 2023 · cf5a6d4 · cf5a6d4
1 parent 94087e0
commit cf5a6d4
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
+