From b34696174c157fc5c5e35f419c1efee2c93e1541 Mon Sep 17 00:00:00 2001 From: Alex J Date: Tue, 2 Nov 2021 12:14:27 +0000 Subject: [PATCH 1/6] Fix link styles on get-involved page When porting this page from whitehall (which still uses leaking styles from the legacy govuk-frontend-toolkit) we missed explicitly adding the `govuk-link` in a few instances. --- app/views/content_items/get_involved.html.erb | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/views/content_items/get_involved.html.erb b/app/views/content_items/get_involved.html.erb index 38d05e565..a2b8ecd70 100644 --- a/app/views/content_items/get_involved.html.erb +++ b/app/views/content_items/get_involved.html.erb @@ -5,8 +5,8 @@
<%= 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")) } %> + 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")) } %>
@@ -44,7 +44,7 @@
  • <%= 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" %> + <%= link_to t('get_involved.read_respond'), @next_closing_consultation['link'], class: "govuk-link govuk-link--inverse", id: "closing-soon-link" %>
    • <% end %> @@ -92,7 +92,7 @@

    <%= 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")) %>

    @@ -126,7 +126,7 @@ <% if index % 3 == 0 && index != 0 %> <% end %> <% if index % 3 == 0 %>
    <% end %>
    - <%= 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'], From eadf04395aefbf8307dd3f685d68ebae1db1794c Mon Sep 17 00:00:00 2001 From: Alex J Date: Tue, 2 Nov 2021 12:29:57 +0000 Subject: [PATCH 2/6] Replace keyline style with govuk classes We have pre-defined styles for hr elements in govuk-frontend, so we drop custom styles in favour of existing ones. --- app/assets/stylesheets/views/_get-involved.scss | 4 ---- app/views/content_items/get_involved.html.erb | 10 +++++++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/views/_get-involved.scss b/app/assets/stylesheets/views/_get-involved.scss index b7a4623ce..38dd947a0 100644 --- a/app/assets/stylesheets/views/_get-involved.scss +++ b/app/assets/stylesheets/views/_get-involved.scss @@ -98,10 +98,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 index a2b8ecd70..a21dd35ea 100644 --- a/app/views/content_items/get_involved.html.erb +++ b/app/views/content_items/get_involved.html.erb @@ -84,7 +84,9 @@
    -
    + +
    +
    <%= render "govuk_publishing_components/components/heading", { text: t('get_involved.start_a_petition') } %> @@ -96,7 +98,9 @@
    -
    + +
    +
    <%= render "govuk_publishing_components/components/heading", {text: t('get_involved.follow') } %> @@ -137,7 +141,7 @@ <% if index == @take_part_pages.size-1 %>
    <% end %> <% end %>
    -
    +
    <%= render "govuk_publishing_components/components/heading", {text:t('get_involved.more_ways') } %> From 796959213a2da6a3e8d88588d6bff804ccf695aa Mon Sep 17 00:00:00 2001 From: Alex J Date: Tue, 2 Nov 2021 12:31:23 +0000 Subject: [PATCH 3/6] Remove redundant li close tag A `content_tag` helper was defined on L45, closing with and `end` on L48, hence this is redundant. --- app/views/content_items/get_involved.html.erb | 1 - 1 file changed, 1 deletion(-) diff --git a/app/views/content_items/get_involved.html.erb b/app/views/content_items/get_involved.html.erb index a21dd35ea..1428a8f76 100644 --- a/app/views/content_items/get_involved.html.erb +++ b/app/views/content_items/get_involved.html.erb @@ -45,7 +45,6 @@ <%= 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" %> - <% end %>
    From 3f4317e5f9490485fed1688fda199d83cf53da19 Mon Sep 17 00:00:00 2001 From: Alex J Date: Tue, 2 Nov 2021 12:38:32 +0000 Subject: [PATCH 4/6] Replace heading with title MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When defining the main page header we use the title component by convention. This renders an H1 element with the associated styles. We also remove the elements that wrap this component as none of classes used are defined anywhere in this application (`block`, `headings-block`, `inner-block` or `floated-children`) – presumably remnants from when moved from whitehall. --- app/views/content_items/get_involved.html.erb | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/app/views/content_items/get_involved.html.erb b/app/views/content_items/get_involved.html.erb index 1428a8f76..b72a03e06 100644 --- 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" %> -
    -
    - <%= 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", class: "govuk-link"), - take_part: link_to(t('get_involved.intro_paragraph.take_part'), "#take-part", class: "govuk-link")) } %> -
    -
    +<%= 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")) } %>
    From f260c43e7d0c0f63b0dca60a86ac9556746aa502 Mon Sep 17 00:00:00 2001 From: Alex J Date: Tue, 2 Nov 2021 12:47:03 +0000 Subject: [PATCH 5/6] Fix in-page link to #take-part There are two main headings and associated sections on this page `engage-with-government` and `take-part`, both linked to from the lead paragraph. The `take-part` section was given the wrong id, presumably by copying the previous section, so we correct this. Because of the broken layout of the page (a set of floating elements) these sections need a clear property, otherwise the in-page link won't work. --- app/assets/stylesheets/views/_get-involved.scss | 4 +++- app/views/content_items/get_involved.html.erb | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/views/_get-involved.scss b/app/assets/stylesheets/views/_get-involved.scss index 38dd947a0..b3ba0aaeb 100644 --- a/app/assets/stylesheets/views/_get-involved.scss +++ b/app/assets/stylesheets/views/_get-involved.scss @@ -8,7 +8,9 @@ line-height: 1.16; } - #engage-with-government { + #engage-with-government, + #take-part { + clear: both; border-bottom-style: solid; padding-bottom: 5px; border-bottom-width: 5px; diff --git a/app/views/content_items/get_involved.html.erb b/app/views/content_items/get_involved.html.erb index b72a03e06..3cafb6325 100644 --- a/app/views/content_items/get_involved.html.erb +++ b/app/views/content_items/get_involved.html.erb @@ -120,7 +120,7 @@
    - <%= 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 %>
    <% end %> <% if index % 3 == 0 %>
    <% end %> From d9b8876a48e2b492e8fcfb1f81a619e8e2f101d6 Mon Sep 17 00:00:00 2001 From: Alex J Date: Tue, 2 Nov 2021 13:00:33 +0000 Subject: [PATCH 6/6] Fix section break Because of the broken layout of the page (a set of floating elements) the `govuk-section-break` `
    ` elements are not showing up without clearing the floating element that precede them. --- app/assets/stylesheets/views/_get-involved.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/assets/stylesheets/views/_get-involved.scss b/app/assets/stylesheets/views/_get-involved.scss index b3ba0aaeb..9df87fe7d 100644 --- a/app/assets/stylesheets/views/_get-involved.scss +++ b/app/assets/stylesheets/views/_get-involved.scss @@ -8,6 +8,10 @@ line-height: 1.16; } + .govuk-section-break { + clear: both; + } + #engage-with-government, #take-part { clear: both;