Merge pull request #2264 from alphagov/fix-get-involved-styles

Fix get involved styles
alphagov · Nov 2, 2021 · aa10264 · aa10264
2 parents ee97631 + d9b8876
commit aa10264
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/app/assets/stylesheets/views/_get-involved.scss b/app/assets/stylesheets/views/_get-involved.scss
@@ -8,7 +8,13 @@
     line-height: 1.16;
   }
 
-  #engage-with-government {
+  .govuk-section-break {
+    clear: both;
+  }
+
+  #engage-with-government,
+  #take-part {
+    clear: both;
     border-bottom-style: solid;
     padding-bottom: 5px;
     border-bottom-width: 5px;
@@ -98,10 +104,6 @@
     font-weight: bold;
   }
 
-  .keyline {
-    margin: 30px 15px;
-  }
-
   .comment-follow {
     li {
       border-bottom: 1px solid $govuk-border-colour;

diff --git a/app/views/content_items/get_involved.html.erb b/app/views/content_items/get_involved.html.erb
@@ -1,14 +1,10 @@
 <% page_title %>
 <% page_class "get-involved" %>
 
-<header class="block headings-block">
-  <div class="inner-block floated-children">
-    <%= render "govuk_publishing_components/components/heading", { text: t('get_involved.page_heading'), font_size: "xl", padding: true } %>
-    <%= render "govuk_publishing_components/components/lead_paragraph", { text: t('get_involved.intro_paragraph.body_html',
-      engage_with_government: link_to(t('get_involved.intro_paragraph.engage_with_government'), "#engage-with-government"),
-      take_part: link_to(t('get_involved.intro_paragraph.take_part'), "#take-part")) } %>
-  </div>
-</header>
+<%= render "govuk_publishing_components/components/title", { title: t('get_involved.page_heading') } %>
+<%= render "govuk_publishing_components/components/lead_paragraph", { text: t('get_involved.intro_paragraph.body_html',
+  engage_with_government: link_to(t('get_involved.intro_paragraph.engage_with_government'), "#engage-with-government", class: "govuk-link"),
+  take_part: link_to(t('get_involved.intro_paragraph.take_part'), "#take-part", class: "govuk-link")) } %>
 
 <div class="block">
   <div class="inner-block floated-children">
@@ -44,8 +40,7 @@
           <li class="document-list">
             <%= content_tag(:li, "consultation", class: 'document-row') do %>
               <%= render "govuk_publishing_components/components/heading", { text: @next_closing_consultation['title'], inverse: true, id: "closing-soon-title", margin_bottom: 2, heading_level: 3, font_size: "s" } %>
-              <%= link_to t('get_involved.read_respond'), @next_closing_consultation['link'], class: "govuk-link govuk-link--inverse", id: "closing-soon-link" %> 
-            </li>
+              <%= link_to t('get_involved.read_respond'), @next_closing_consultation['link'], class: "govuk-link govuk-link--inverse", id: "closing-soon-link" %>
             <% end %>
           </li>
         </div>
@@ -84,19 +79,23 @@
         </div>
       </div>
     </section>
-    <hr class="keyline">
+
+    <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--l">
+
     <section class="start-a-petition">
       <div class="head-section govuk-grid-column-one-third-from-desktop">
       <%= render "govuk_publishing_components/components/heading", { text: t('get_involved.start_a_petition') } %>
       </div>
       <div class="column govuk-grid-column-two-thirds-from-desktop">
         <div class="content">
           <p class="govuk-body"><%= t('get_involved.petition_paragraph.body_html',
-            create_a_petition: link_to(t('get_involved.petition_paragraph.create_a_petition', class: "govuk-link", rel: "external"), "https://petition.parliament.uk/")) %>
+            create_a_petition: link_to(t('get_involved.petition_paragraph.create_a_petition'), "https://petition.parliament.uk/", class: "govuk-link", rel: "external")) %>
         </div>
       </div>
     </section>
-    <hr class="keyline">
+
+    <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--l">
+
     <section class="comment-follow">
       <div class="head-section govuk-grid-column-one-third-from-desktop">
         <%= render "govuk_publishing_components/components/heading", {text: t('get_involved.follow') } %>
@@ -121,12 +120,12 @@
 <div class="block">
   <div class="inner-block floated-children">
     <section class="take-part-pages">
-      <%= render "govuk_publishing_components/components/heading", { text: t('get_involved.take_part'), font_size: "l", id: "engage-with-government" } %>
+      <%= render "govuk_publishing_components/components/heading", { text: t('get_involved.take_part'), font_size: "l", id: "take-part" } %>
       <% @take_part_pages.each_with_index do |take_part_page, index| %>
         <% if index % 3 == 0 && index != 0 %> </div> <% end %>
         <% if index % 3 == 0 %> <div class="govuk-grid-row"> <% end %>
         <article class="govuk-grid-column-one-third-from-desktop">
-        <%= render "govuk_publishing_components/components/image_card", { 
+        <%= render "govuk_publishing_components/components/image_card", {
           href: take_part_page['base_path'],
           image_src: take_part_page['details']['image']['url'],
           image_alt: take_part_page['details']['image']['alt_text'],
@@ -137,7 +136,7 @@
         <% if index == @take_part_pages.size-1 %> </div> <% end %>
       <% end %>
     </section>
-    <hr class="keyline">
+    <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--l">
     <section class="more-ways">
       <div class="head-section govuk-grid-column-one-third-from-desktop">
         <%= render "govuk_publishing_components/components/heading", {text:t('get_involved.more_ways') } %>