From 59f0ba276cdc0b388f428f749ee147de7688b737 Mon Sep 17 00:00:00 2001 From: Chris Yoong Date: Mon, 15 Nov 2021 10:33:52 +0000 Subject: [PATCH] Change "get-involved" Page - Update Design of this page - Use publishing_gem components and Design System and in turn improve consistency and on-going Accessibility - Adding inset-text component for use with pull out section that highlights to users a closing consultation - Removing bespoke "get-involved" CSS - Change load order of CSS. The number within "Big number" component was pulling through an unexpected underline from 'govuk-link' on inspection this is coming through from 'component_support' - in this context it's due to the cascade, by moving the load order this resolve this issue as "big numbers" is being loaded after resolving the issue. - Adjust layout for "take part" section that uses image_card component grid. As this is a list this uses an adjusted technique while a layout feature request on the Design System is outstanding, This allows the Design system grid to be used but AT to interpret the section as a list [1] [1] https://github.com/alphagov/govuk-frontend/issues/2328 --- app/assets/stylesheets/application.scss | 6 +- .../stylesheets/views/_get-involved.scss | 126 ------- app/controllers/get_involved_controller.rb | 44 +++ app/helpers/get_involved_helper.rb | 6 - app/views/content_items/get_involved.html.erb | 340 +++++++++++------- config/locales/en.yml | 5 +- 6 files changed, 260 insertions(+), 267 deletions(-) delete mode 100644 app/assets/stylesheets/views/_get-involved.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 7e4c7a8d70..bb233815e7 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -6,12 +6,13 @@ $govuk-new-link-styles: true; // Components from govuk_publishing_components gem @import 'govuk_publishing_components/govuk_frontend_support'; +@import 'govuk_publishing_components/component_support'; + @import 'govuk_publishing_components/components/attachment'; @import 'govuk_publishing_components/components/back-link'; @import 'govuk_publishing_components/components/big-number'; @import 'govuk_publishing_components/components/breadcrumbs'; @import 'govuk_publishing_components/components/button'; -@import 'govuk_publishing_components/component_support'; @import 'govuk_publishing_components/components/contents-list'; @import 'govuk_publishing_components/components/contextual-sidebar'; @import 'govuk_publishing_components/components/details'; @@ -25,6 +26,7 @@ $govuk-new-link-styles: true; @import 'govuk_publishing_components/components/govspeak-html-publication'; @import 'govuk_publishing_components/components/heading'; @import 'govuk_publishing_components/components/hint'; +@import 'govuk_publishing_components/components/inset-text'; @import 'govuk_publishing_components/components/image-card'; @import 'govuk_publishing_components/components/input'; @import 'govuk_publishing_components/components/intervention'; @@ -93,7 +95,7 @@ $govuk-new-link-styles: true; @import 'views/answer'; @import 'views/help-page'; @import 'views/guide'; -@import 'views/get-involved'; +// @import 'views/get-involved'; .travel-advice-notice { background-color: govuk-colour("light-grey"); diff --git a/app/assets/stylesheets/views/_get-involved.scss b/app/assets/stylesheets/views/_get-involved.scss deleted file mode 100644 index 9df87fe7dd..0000000000 --- a/app/assets/stylesheets/views/_get-involved.scss +++ /dev/null @@ -1,126 +0,0 @@ -.get-involved { - // Disabled due to many govuk_publishing_components requiring IDs over classes. - // stylelint-disable selector-max-id - - list-style: none; - - .govuk-link { - line-height: 1.16; - } - - .govuk-section-break { - clear: both; - } - - #engage-with-government, - #take-part { - clear: both; - border-bottom-style: solid; - padding-bottom: 5px; - border-bottom-width: 5px; - font-weight: normal; - } - - .respond-to-consultations { - .govuk-grid-column-two-thirds-from-desktop { - padding: 20px 0 0; - margin-bottom: 20px; - } - } - - #respond-heading { - padding: 0; - } - - .big-numbers { - padding: 0; - } - - .recently-opened { - padding: 0; - } - - .govuk-grid-column-two-thirds-from-desktop { - margin-bottom: 50px; - padding: 0; - } - - .govuk-grid-column-one-third-from-desktop { - padding: 0; - } - - .consultation-lists { - padding: 0; - } - - .gem-c-big-number { - margin-top: 10px; - } - - .consultation-closing-soon { - background-color: govuk-colour("dark-blue"); - padding: govuk-spacing(3) govuk-spacing(3); - } - - #closing-soon-title { - border-bottom-style: solid; - padding-bottom: 5px; - border-bottom-width: 1px; - font-weight: normal; - } - - #closing-soon-link { - @include govuk-font(19); - margin-bottom: 5px; - font-weight: bold; - } - - #consultation-title { - @include govuk-font(19); - } - - .consultation-list-row { - float: left; - padding: 0 0 10px; - } - - .consultation-attributes { - @include govuk-font(14); - padding-top: 5px; - - li { - float: left; - padding-right: 10px; - } - - .consultation-view-link { - font-weight: bold; - margin-right: 30px; //force onto new line - } - } - - #see-all-link { - @include govuk-font(19); - font-weight: bold; - } - - .comment-follow { - li { - border-bottom: 1px solid $govuk-border-colour; - padding: 1px 0 7px; - } - } - - .more-ways { - li { - border-bottom: 1px solid $govuk-border-colour; - padding: 1px 0 7px; - } - } - - .take-part-pages { - .govuk-grid-column-one-third-from-desktop { - padding: 15px 15px 0; - } - } -} diff --git a/app/controllers/get_involved_controller.rb b/app/controllers/get_involved_controller.rb index b3f09321f0..7fb84cdcb9 100644 --- a/app/controllers/get_involved_controller.rb +++ b/app/controllers/get_involved_controller.rb @@ -5,6 +5,8 @@ def show load_content_item load_get_involved_data @do_not_show_breadcrumbs = true + @recently_opened = filtered_links(@recently_opened_consultations, t("get_involved.closes")) + @recent_outcomes = filtered_links(@recent_consultation_outcomes, t("get_involved.closed_with_date")) render template: "content_items/get_involved" end @@ -88,4 +90,46 @@ def retrieve_consultation_outcomes Services.search_api.search(query)["results"] end + + def time_until_closure(consultation) + days_left = (consultation["end_date"].to_date - Time.zone.now.to_date).to_i + case days_left + when :negative?.to_proc + t("get_involved.closed") + when :zero?.to_proc + t("get_involved.closing_today") + when 1 + t("get_involved.closing_tomorrow") + else + t("get_involved.days_left", number_of_days: days_left) + end + end + + def date_microformat(attribute_name) + attribute_name.to_date.strftime("%d %B %Y") + end + + def filtered_links(array, close_status) + array.map do |item| + org_acronym = item["organisations"].map { |org| + org["acronym"] + }.join(", ") + + org_time = item["organisations"].map { |org| + org["public_timestamp"] + }.join(", ") + + { + link: { + text: item["title"], + path: item["link"], + description: "#{close_status} #{date_microformat(item['end_date'])}", + }, + metadata: { + public_updated_at: Time.zone.parse(org_time), + document_type: org_acronym, + }, + } + end + end end diff --git a/app/helpers/get_involved_helper.rb b/app/helpers/get_involved_helper.rb index 69ce14f955..aa6729285f 100644 --- a/app/helpers/get_involved_helper.rb +++ b/app/helpers/get_involved_helper.rb @@ -1,8 +1,4 @@ module GetInvolvedHelper - def date_microformat(attribute_name) - attribute_name.to_date.strftime("%d %B %Y") - end - # Gets the link to the search page for all consultations def get_consultations_link(filters = %w[open_consultations closed_consultations]) "/search/policy-papers-and-consultations?#{filters.to_query('content_store_document_type')}" @@ -16,8 +12,6 @@ def page_class(css_class) content_for(:page_class, css_class) end -private - def time_until_closure(consultation) days_left = (consultation["end_date"].to_date - Time.zone.now.to_date).to_i case days_left diff --git a/app/views/content_items/get_involved.html.erb b/app/views/content_items/get_involved.html.erb index 3cafb63259..f675f6c0d4 100644 --- a/app/views/content_items/get_involved.html.erb +++ b/app/views/content_items/get_involved.html.erb @@ -1,155 +1,233 @@ <% page_title %> -<% page_class "get-involved" %> - -<%= 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")) } %> - -
-
- <%= render "govuk_publishing_components/components/heading", { text: t('get_involved.engage_with_gov'), font_size: "l", id: "engage-with-government" } %> -
-
-
- <%= render "govuk_publishing_components/components/heading", { text: t('get_involved.respond_to_consultations'), heading_level: 3, padding: true, id: "respond-heading" } %> -
-
-
-

<%= t('get_involved.your_views') %>

-
-
-
-
-
+<% page_class "get-involved govuk-main-wrapper" %> + <%= render "govuk_publishing_components/components/breadcrumbs", { + collapse_on_mobile: true, + breadcrumbs: [ + { + title: "Home", + url: "/" + } + ] + } %> + +
+
+ <%= render "govuk_publishing_components/components/title", { + context: "Government activity", + 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")), + margin_bottom: 9 + } %> +
+
+
+ <%# Engage with government section %> +
+ <%= render "govuk_publishing_components/components/heading", { + text: t('get_involved.engage_with_gov'), + heading_level: 2, + border_top: 2, + padding: true, + id: "engage-with-government" + } %> + +

+ <%= t('get_involved.your_views') %> +

+ + <%# Respond to consultations %> + <%= render "govuk_publishing_components/components/heading", { + text: t('get_involved.respond_to_consultations'), + heading_level: 2, + font_size: "s" + } %> + + <%# Big numbers %> +
+
<%= render "govuk_publishing_components/components/big_number", { number: @open_consultation_count, label: t('get_involved.open_consultations'), - href: get_consultations_link('open-consultations'), + href: "/government/organisations#ministerial_departments" } %> - <%= render "govuk_publishing_components/components/big_number", { +
+
+ <%= render "govuk_publishing_components/components/big_number", { number: @closed_consultation_count, label: t('get_involved.closed_consultations'), - href: get_consultations_link('close-consultations'), + href: "/government/organisations#ministerial_departments" } %>
-
-
- <%= render "govuk_publishing_components/components/heading", { text: time_until_closure(@next_closing_consultation), inverse: true, margin_bottom: 2, heading_level: 3 } %> -
  • - <%= 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 %> -
    • -
    + + <%# Attention to closing consultation %> + <%= render "govuk_publishing_components/components/inset_text", { + } do %>
    -
    -
    - <%= render "govuk_publishing_components/components/heading", { text: t('get_involved.recently_opened'), heading_level: 3, font_size: "s", padding: true } %> - <% @recently_opened_consultations.each do |consultation| %> -
    - <%= link_to consultation['title'], consultation['link'], class: "govuk-link", id: "consultation-title" %> -
    -
  • <% consultation['organisations'].each do |org| %> <%= org["acronym"] %> <% end %>
    • -
  • <%= t('get_involved.closes', closing_date: date_microformat(consultation['end_date']) ) %>
    • -
  • <%= link_to t('get_involved.read_respond'), consultation['link'], class: "govuk-link", aria: {hidden: true} %>
    • -
    -
    - <% end %> -
    - <%= link_to(t('get_involved.search_all'), get_consultations_link, class: "govuk-link", id: "see-all-link" ) %> -
    -
    -
    - <%= render "govuk_publishing_components/components/heading", { text: t('get_involved.recent_outcomes'), heading_level: 3, font_size: "s", padding: true } %> - <% @recent_consultation_outcomes.each do |consultation| %> -
    - <%= link_to consultation['title'], consultation['link'], class: "govuk-link", id: "consultation-title" %> -
    -
  • <% consultation['organisations'].each do |org| %> <%= org["acronym"] %> <% end %>
    • -
  • <%= t('get_involved.closed_with_date', closing_date: date_microformat(consultation['end_date']) ) %>
    • -
  • <%= link_to t('get_involved.read_respond'), consultation['link'], class: "govuk-link", aria: {hidden: true}, weight: "bold" %>
    • -
    -
    - <% end %> -
    -
    + <%= render "govuk_publishing_components/components/heading", { + text: time_until_closure(@next_closing_consultation), + heading_level: 3 + } %> +

    + <%= @next_closing_consultation['title'] %> +

    + <%= link_to t('get_involved.read_respond'), @next_closing_consultation['link'], class: "govuk-link" %>
    -
    -
    + <% end %> +
    +
    -
    + <%# Recently opened section %> +
    +
    + <%= render "govuk_publishing_components/components/heading", { + text: t('get_involved.recently_opened'), + padding: true, + border_top: 2, + font_size: "s", + margin_bottom: 4 + } %> -
    -
    - <%= render "govuk_publishing_components/components/heading", { text: t('get_involved.start_a_petition') } %> -
    -
    -
    -

    <%= t('get_involved.petition_paragraph.body_html', - create_a_petition: link_to(t('get_involved.petition_paragraph.create_a_petition'), "https://petition.parliament.uk/", class: "govuk-link", rel: "external")) %> -

    -
    -
    + <%= render "govuk_publishing_components/components/document_list", { + items: @recently_opened + } %> -
    + <%= link_to(t('get_involved.search_all'), get_consultations_link, class: "govuk-link" ) %> +
    +
    -
    -
    - <%= render "govuk_publishing_components/components/heading", {text: t('get_involved.follow') } %> -
    -
    -
    -

    <%= t('get_involved.follow_paragraph') %>

    -

    <%= t('get_involved.see_all_dept') %>

    -

    <%= t('get_involved.active_blogs') %>

    -
  • <%= t('get_involved.gov_past') %>
    • -
  • <%= t('get_involved.civil_service_quarterly') %>
    • -
  • <%= t('get_involved.fco_bloggers') %>
    • -
  • <%= t('get_involved.gds_blog') %>
    • -
  • <%= t('get_involved.civil_service') %>
    • -
    -
    -
    + <%# Recent outcomes section %> +
    +
    + <%= render "govuk_publishing_components/components/heading", { + text: t('get_involved.recent_outcomes'), + padding: true, + border_top: 2, + font_size: "s", + margin_bottom: 4 + } %> + + <%= render "govuk_publishing_components/components/document_list", { + items: @recent_outcomes + } %> + + <%= link_to(t('get_involved.search_all'), get_consultations_link, class: "govuk-link" ) %> +
    - + <%# Start a petition section %> +
    +
    + <%= render "govuk_publishing_components/components/heading", { + text: t('get_involved.start_a_petition'), + padding: true, + border_top: 2, + } %> +

    + <%= t('get_involved.petition_paragraph.body_html', create_a_petition: link_to(t('get_involved.petition_paragraph.create_a_petition'), "https://petition.parliament.uk/", class: "govuk-link", rel: "external")) %> +

    +
    +
    -
    -
    -
    - <%= render "govuk_publishing_components/components/heading", { text: t('get_involved.take_part'), font_size: "l", id: "take-part" } %> + <%# Follow a blog.. section %> +
    +
    + <%= render "govuk_publishing_components/components/heading", { + text: t('get_involved.follow'), + padding: true, + border_top: 2, + } %> +

    <%= t('get_involved.follow_paragraph') %>

    +

    + + <%= t('get_involved.see_all_dept') %> + +

    + <%= render "govuk_publishing_components/components/heading", { + text: t('get_involved.follow_links'), + heading_level: 3, + font_size: "s", + padding: true, + border_top: 2, + } %> + <%= render "govuk_publishing_components/components/list", { + items: [ + sanitize("#{t('get_involved.gov_past')}"), + sanitize("#{ t('get_involved.civil_service_quarterly')}"), + sanitize("#{t('get_involved.make_donation')}"), + sanitize("#{t('get_involved.gds_blog')}"), + sanitize("#{t('get_involved.civil_service')}"), + ] + } %> +
    +
    + + <%# Take part section %> +
    +
    + <%= render "govuk_publishing_components/components/heading", { + text: t('get_involved.take_part'), + padding: true, + border_top: 2, + margin_bottom: 4, + id: "take-part" + } %> +
    +
    + + <%# Take part image grid %> +
    +
    +
    <% @take_part_pages.each_with_index do |take_part_page, index| %> <% if index % 3 == 0 && index != 0 %>
    <% end %> - <% if index % 3 == 0 %>
    <% end %> -
    - <%= 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'], - heading_text: take_part_page['title'], - description: take_part_page['description'], - } %> -
    - <% if index == @take_part_pages.size-1 %>
    <% end %> + <% if index % 3 == 0 %> +
    + <% end %> +
    + <%= 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'], + heading_text: take_part_page['title'], + description: take_part_page['description'], + heading_level: 3, + } %> +
    + <% if index == @take_part_pages.size-1 %> +
    + <% end %> <% end %> -
    -
    -
    -
    - <%= render "govuk_publishing_components/components/heading", {text:t('get_involved.more_ways') } %> -
    -
    -
    -

    <%= t('get_involved.take_part_suggestions') %>

    -
  • <%= t('get_involved.join_ics') %>
    • -
  • <%= t('get_involved.neighbourhood_watch') %>
    • -
  • <%= t('get_involved.make_donation') %>
    • -
  • <%= t('get_involved.school_overseas') %>
    • -
    -
    +
    +
    + <%# More ways to take part section %> +
    +
    + <%= render "govuk_publishing_components/components/heading", { + text:t('get_involved.more_ways'), + padding: true, + border_top: 2, + } %> +

    + <%= t('get_involved.take_part_suggestions') %> +

    + + <%= render "govuk_publishing_components/components/list", { + items: [ + sanitize("#{t('get_involved.join_ics')}"), + sanitize("#{t('get_involved.neighbourhood_watch')}"), + sanitize("#{t('get_involved.make_donation')}"), + sanitize("#{t('get_involved.gds_blog')}"), + sanitize("#{t('get_involved.school_overseas')}"), + ] + } %> +
    - diff --git a/config/locales/en.yml b/config/locales/en.yml index 2041ea8f84..275e91c25f 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -329,8 +329,8 @@ en: civil_service: Civil Service closed: Closed closed_consultations: Closed consultations in the past 12 months - closed_with_date: Closed %{closing_date} - closes: Closes %{closing_date} + closed_with_date: Closed + closes: Closes closing_today: Closing today closing_tomorrow: Closing tomorrow cs_head: Head of the Civil Service @@ -339,6 +339,7 @@ en: fco_bloggers: FCO bloggers follow: Follow a blog or social media channel follow_paragraph: For an instant way to interact with government departments, try their social media streams. These are listed under 'Follow us' on the department's home page. As well as access to blogs, audio, video and more, you can comment, debate and rate. + follow_links: Some active government blogs include gds_blog: Government Digital Service gov_past: History of Government intro_paragraph: