From 3501944016e68d0b0fba121090dcfd5b5ffdca3c Mon Sep 17 00:00:00 2001 From: Ian James Date: Fri, 6 Sep 2019 18:24:18 +0100 Subject: [PATCH] Hero panel and homepage converted to GOV.UK frontend - Homepage blue hero panel moved 1 pixel up to hide the phase banner's lower grey border - Hero panel bespoke CSS removed and rejigged - Started removal of Frontend Toolkit from homepage - Search in hero panel now uses component from Publishing Components gem - Line height on paragraph text increased to avoid focus state overlap --- app/assets/stylesheets/modules/_hero.scss | 61 ++++--------- app/assets/stylesheets/modules/_panel.scss | 18 +--- .../stylesheets/modules/_typography.scss | 12 +-- app/views/content_items/homepage.html.erb | 86 ++++++++++--------- 4 files changed, 63 insertions(+), 114 deletions(-) diff --git a/app/assets/stylesheets/modules/_hero.scss b/app/assets/stylesheets/modules/_hero.scss index e4773fc0..8c35512b 100644 --- a/app/assets/stylesheets/modules/_hero.scss +++ b/app/assets/stylesheets/modules/_hero.scss @@ -1,57 +1,26 @@ -.hero { - background-color: $govuk-blue; - color: $white; - - margin-bottom: $gutter-half; +.app-c-hero { + background-color: $govuk-brand-colour; + color: govuk-colour("white"); + margin-bottom: govuk-spacing(3); + position: relative; + top: -1px; @include media(tablet) { - margin-bottom: $gutter; + margin-bottom: govuk-spacing(6); } a:link, a:visited { - font-weight: bold; - color: $white; - } - - a:hover, - a:active { - color: $light-blue-25; - } - - &__content { - $border-top-width: 10px; - - @extend %site-width-container; - - padding: ($gutter-half + $border-top-width) 0 $gutter-half; - - @include media(tablet) { - padding: ($gutter + $border-top-width) 0 $gutter; - } - } - - &__title { - @include core-48; - margin-bottom: $gutter; + color: govuk-colour("white"); font-weight: bold; } +} - &__description { - @include core-24; - } - - &__feedback-link { - @include core-16; - line-height: 1.25; - margin-top: $gutter; - - @include media(tablet) { - margin-top: 0; - } - } +.app-c-hero-lead { + line-height: 1.35; +} - &__search { - margin-bottom: $gutter-half; - } +.app-c-heading--inverse, +.app-c-body--inverse { + color: govuk-colour("white"); } diff --git a/app/assets/stylesheets/modules/_panel.scss b/app/assets/stylesheets/modules/_panel.scss index 59b0979d..218f6213 100644 --- a/app/assets/stylesheets/modules/_panel.scss +++ b/app/assets/stylesheets/modules/_panel.scss @@ -1,19 +1,3 @@ .panel { - margin-top: $gutter-half; - padding-top: $gutter-half; - - border-top: 1px solid $grey-2; - - @include media(desktop) { - margin-top: $gutter; - } - - &__title { - @include bold-24; - margin-bottom: $gutter-half; - } - - &__description { - @include core-19; - } + border-top: 1px solid $govuk-border-colour; } diff --git a/app/assets/stylesheets/modules/_typography.scss b/app/assets/stylesheets/modules/_typography.scss index a3f8b842..169375da 100644 --- a/app/assets/stylesheets/modules/_typography.scss +++ b/app/assets/stylesheets/modules/_typography.scss @@ -1,11 +1,5 @@ // Text -p { - margin-top: em(5, 16); - margin-bottom: em(20, 16); - - @include media(tablet) { - margin-top: em(5); - margin-bottom: em(20); - } - +.app-c-body, +.app-c-body-s { + line-height: 1.45; } diff --git a/app/views/content_items/homepage.html.erb b/app/views/content_items/homepage.html.erb index 2f2df9f2..aabfa305 100644 --- a/app/views/content_items/homepage.html.erb +++ b/app/views/content_items/homepage.html.erb @@ -6,61 +6,63 @@ content_for :body_classes, 'full-width' %> -
-
-
-
-

Service Manual

- -

- Helping teams to create and run great public services that meet the <%= link_to 'Service Standard', '/service-manual/service-standard' %>. -

- -
+
+
+
+
+
+

Service Manual

+

+ Helping teams to create and run great public services that meet the <%= link_to 'Service Standard', '/service-manual/service-standard', class: 'govuk-link' %>. +

- -
- -
- + <%= render "govuk_publishing_components/components/search", { + id: "search", + label_text: "Search the service manual", + name: "q", + on_govuk_blue: true, + type: "search" + } %>
-
- -
- +
+

+ <%= link_to 'Contact the Service Manual team', '/contact/govuk', class: 'govuk-link' %> + with any comments or questions. +

+
-
- <% @content_item.topics.each_slice(3) do |row_of_topics| %> -
- <% row_of_topics.each do |topic| %> -
-
-

<%= link_to topic["title"], topic["base_path"] %>

-

<%= topic["description"] %>

+
+
+ <% @content_item.topics.each_slice(3) do |row_of_topics| %> +
+ <% row_of_topics.each do |topic| %> +
+

<%= link_to topic["title"], topic["base_path"], class: 'govuk-link' %>

+

<%= topic["description"] %>

-
- <% end %> -
- <% end %> + <% end %> +
+ <% end %> -
-
-
-

The Service Standard

-

The <%= link_to 'Service Standard', '/service-manual/service-standard' %> provides the principles of building a good service. This manual explains what teams can do to build great services that will meet the standard.

+
+
+
+

The Service Standard

+

The <%= link_to 'Service Standard', '/service-manual/service-standard', class: 'govuk-link' %> provides the principles of building a good service. This manual explains what teams can do to build great services that will meet the standard.

+
-
-
-
-

Communities of practice

-

You can view the <%= link_to 'communities of practice', '/service-manual/communities' %> to find more learning resources, see who has written the guidance in the manual and connect with digital people like you from across government.

+
+
+

Communities of practice

+

You can view the <%= link_to 'communities of practice', '/service-manual/communities', class: 'govuk-link' %> to find more learning resources, see who has written the guidance in the manual and connect with digital people like you from across government.

+