From 58e67833214a1d46caabc94c2d3c5c7b4de7b057 Mon Sep 17 00:00:00 2001 From: Chris Yoong Date: Tue, 16 Nov 2021 10:59:52 +0000 Subject: [PATCH 1/2] 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 | 7 +- .../stylesheets/views/_get-involved.scss | 126 ------- app/controllers/get_involved_controller.rb | 50 +++ app/helpers/get_involved_helper.rb | 6 - app/views/content_items/get_involved.html.erb | 344 +++++++++++------- config/locales/en.yml | 3 +- 6 files changed, 264 insertions(+), 272 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 7cf7afeb3..3cb86e372 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'; @@ -27,6 +28,8 @@ $govuk-new-link-styles: true; @import 'govuk_publishing_components/components/hint'; @import 'govuk_publishing_components/components/image-card'; @import 'govuk_publishing_components/components/input'; +@import 'govuk_publishing_components/components/inset-text'; +@import 'govuk_publishing_components/components/intervention'; @import 'govuk_publishing_components/components/inverse-header'; @import 'govuk_publishing_components/components/label'; @import 'govuk_publishing_components/components/lead-paragraph'; @@ -92,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 9df87fe7d..000000000 --- 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 b3f09321f..a39db8b63 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")) render template: "content_items/get_involved" end @@ -88,4 +90,52 @@ 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| + { + link: { + text: item["title"], + path: item["link"], + description: "#{close_status} #{date_microformat(item['end_date'])}", + }, + metadata: { + public_updated_at: Time.zone.parse(org_acronym(item)), + document_type: org_acronym(item), + }, + } + end + end + +private + + def org_acronym(item) + item["organisations"].map { |org| + org["public_timestamp"] + }.join(", ") + end + + def org_time(item) + item["organisations"].map { |org| + org["acronym"] + }.join(", ") + end end diff --git a/app/helpers/get_involved_helper.rb b/app/helpers/get_involved_helper.rb index 69ce14f95..aa6729285 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 3cafb6325..a936631ad 100644 --- a/app/views/content_items/get_involved.html.erb +++ b/app/views/content_items/get_involved.html.erb @@ -1,155 +1,225 @@ <% page_title %> -<% page_class "get-involved" %> +<% page_class "govuk-main-wrapper" %> + <%= render "govuk_publishing_components/components/breadcrumbs", { + collapse_on_mobile: true, + breadcrumbs: [ + { + title: "Home", + url: "/" + } + ] + } %> -<%= 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/title", { + context: "Government activity", + title: t('get_involved.page_heading'), + } %> -
-
- <%= 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') %>

+ <%= 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: "/government/organisations#ministerial_departments" + } %>
- -
-
-
- <%= render "govuk_publishing_components/components/big_number", { - number: @open_consultation_count, - label: t('get_involved.open_consultations'), - href: get_consultations_link('open-consultations'), - } %> - <%= render "govuk_publishing_components/components/big_number", { - number: @closed_consultation_count, - label: t('get_involved.closed_consultations'), - href: get_consultations_link('close-consultations'), - } %> -
+
+ <%= render "govuk_publishing_components/components/big_number", { + number: @closed_consultation_count, + label: t('get_involved.closed_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 %> -
    • -
    -
    -
    -
    - <%= 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 %> -
    -
    -
    +
    + + <%# Attention to closing consultation %> + <%= render "govuk_publishing_components/components/inset_text", { + } do %> +
    + <%= 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/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.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")) %> -

    -
    -
    +<%# 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 + } %> -
    -
    - <%= 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') %>
    • -
    -
    -
    + <%= 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" } %> - <% @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 %> +<%# 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 image grid %> +
    +
    + <%= render "govuk_publishing_components/components/heading", { + text: t('get_involved.take_part'), + padding: true, + border_top: 2, + margin_bottom: 4, + 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 %> - -
    -
    -
    - <%= 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') %>
    • +
    + <%= 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, + image_loading: "lazy", + } %> +
    + <% if index == @take_part_pages.size-1 %>
    -
    -
    + <% end %> + <% end %> +
    +
    +
    +<%# 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 0355ed7cc..44d267b6c 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -330,7 +330,7 @@ en: closed: Closed closed_consultations: Closed consultations in the past 12 months closed_with_date: Closed %{closing_date} - closes: Closes %{closing_date} + closes: Closes closing_today: Closing today closing_tomorrow: Closing tomorrow days_left: "%{number_of_days} days left" @@ -338,6 +338,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: From 94270a27ab8a5fd7688a4731bcf2e99eab96bafc Mon Sep 17 00:00:00 2001 From: Chris Yoong Date: Mon, 15 Nov 2021 10:02:56 +0000 Subject: [PATCH 2/2] Move travel advice styles - Remove bespoke "get involved" CSS from Application, this is not needed as all styling is coming from the gem and Design System - There appeared to be some "travel-advice" styling in the top-level application.css - this isn't the right place for this, so this has been moved to travel-advice.css --- app/assets/stylesheets/application.scss | 21 ------------------- .../stylesheets/views/_travel-advice.scss | 20 ++++++++++++++++++ 2 files changed, 20 insertions(+), 21 deletions(-) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 3cb86e372..c88216d2f 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -95,24 +95,3 @@ $govuk-new-link-styles: true; @import 'views/answer'; @import 'views/help-page'; @import 'views/guide'; -// @import 'views/get-involved'; - -.travel-advice-notice { - background-color: govuk-colour("light-grey"); - border: 1px solid $govuk-border-colour; - margin-bottom: govuk-spacing(7); - position: relative; -} - -.travel-advice-notice__header { - padding: govuk-spacing(4) govuk-spacing(4) 0 govuk-spacing(3); -} - -.travel-advice-notice__content { - margin-top: - govuk-spacing(3); - padding: 0 govuk-spacing(4) 0 govuk-spacing(9); -} - -.travel-advice-notice__icon { - margin-left: govuk-spacing(3); -} diff --git a/app/assets/stylesheets/views/_travel-advice.scss b/app/assets/stylesheets/views/_travel-advice.scss index fe30f9c92..5b662fef0 100644 --- a/app/assets/stylesheets/views/_travel-advice.scss +++ b/app/assets/stylesheets/views/_travel-advice.scss @@ -23,3 +23,23 @@ display: block; margin-bottom: govuk-spacing(2); } + +.travel-advice-notice { + background-color: govuk-colour("light-grey"); + border: 1px solid $govuk-border-colour; + margin-bottom: govuk-spacing(7); + position: relative; +} + +.travel-advice-notice__header { + padding: govuk-spacing(4) govuk-spacing(4) 0 govuk-spacing(3); +} + +.travel-advice-notice__content { + margin-top: - govuk-spacing(3); + padding: 0 govuk-spacing(4) 0 govuk-spacing(9); +} + +.travel-advice-notice__icon { + margin-left: govuk-spacing(3); +}