ER-809 New home page with hero (#939)

* New home page with hero * Adjust mobile UI and specs * Mobile home page padding * Adjust styles * Home prompt left spacing * Responsive image and grey box spacing * - flash alert bottom margin - external privacy policy * Only hide mobile legend for formative questions
DFE-Digital · Nov 7, 2023 · bc65de8 · bc65de8
1 parent f91c9aa
commit bc65de8
Show file tree

Hide file tree

Showing 15 changed files with 120 additions and 62 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,6 +1,7 @@
 /*
 https://frontend.design-system.service.gov.uk/sass-api-reference
 https://design.education.gov.uk/design-system/dfe-frontend
+https://design-system.service.gov.uk/styles/colour/
 
 $color_dfe-blue             #003a69 Primary brand colour
 $color_dfe-secondary-blue   #347ca9
@@ -15,8 +16,10 @@ $govuk-page-width: 1200px;
 
 @import 'govuk-frontend/govuk/all';
 @import 'dfe-frontend-alpha/packages/dfefrontend';
-@import 'dfe-header';
 
+$light-blue: tint($color_dfe-secondary-blue, 90%);
+
+@import 'dfe-header';
 @import 'card';
 @import 'prompt';
 @import 'video';
@@ -77,6 +80,14 @@ Hero layout
     margin-top: govuk-spacing(6);
     margin-bottom: govuk-spacing(-4);
   }
+
+  @include govuk-media-query($until: tablet) {
+    .govuk-grid-column-one-half > p,
+    .govuk-grid-column-one-half > h2 {
+      margin-left: govuk-spacing(2);
+      margin-right: govuk-spacing(2);
+    }
+  }
 }
 
 
@@ -86,8 +97,8 @@ Internal
 */
 pre.code-tip {
   padding: 0 5px;
-  color: govuk-colour("red");
-  background-color: govuk-colour("light-grey");
+  color: govuk-colour('red');
+  background-color: govuk-colour('light-grey');
 }
 
 .debug_dump {
@@ -103,7 +114,7 @@ pre.code-tip {
 
 .app-sidebar {
   padding: govuk-spacing(5) govuk-spacing(3);
-  background-color: govuk-colour("light-grey");
+  background-color: govuk-colour('light-grey');
 
   *:last-child {
     margin: 0;
@@ -114,20 +125,24 @@ pre.code-tip {
   font-weight: normal;
 }
 
-.govuk-fieldset__legend {
-  @include govuk-media-query($until: tablet) {
-    display: none;
-  }
-}
-
 .light-grey-box {
   padding: govuk-spacing(5);
   margin-bottom: govuk-spacing(5);
-  background: govuk-colour("light-grey");
+  background: govuk-colour('light-grey');
 
-  .govuk-button {
-    margin: 0;
+  @include govuk-media-query($until: tablet) {
+    margin-top: govuk-spacing(6);
+    margin-bottom: govuk-spacing(6);
   }
+
+  &.enrol-box {
+    border-radius: 6px;
+
+    .govuk-button {
+      margin: 0;
+    }
+  }
+
 }
 
 .float-right {

diff --git a/app/assets/stylesheets/assets-page.scss b/app/assets/stylesheets/assets-page.scss
@@ -4,6 +4,7 @@
     padding-bottom: 60px;
     width: 100%;
   }
+
   .thumbnail--image {
     outline: 5px solid rgba(11,12,12,0.1);
     box-shadow: 0 2px 2px rgb(11 12 12 / 40%);

diff --git a/app/assets/stylesheets/dfe-header.scss b/app/assets/stylesheets/dfe-header.scss
@@ -96,5 +96,18 @@ header #service-name {
 }
 
 .dfe-content-page--header {
-  background: tint($color_dfe-secondary-blue, 90%);
+  background: $light-blue;
+
+  @include govuk-media-query($until: tablet) {
+    padding: govuk-spacing(2);
+  }
+
+  img {
+    max-width: 100%;
+    width: 100%;
+
+    @include govuk-media-query($until: tablet) {
+      padding-top: govuk-spacing(4);
+    }
+  }
 }
diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/icons.scss
@@ -5,9 +5,3 @@ $fa-font-path: '@fortawesome/fontawesome-free/webfonts';
 @import '@fortawesome/fontawesome-free/scss/regular';
 @import '@fortawesome/fontawesome-free/scss/brands';
 @import '@fortawesome/fontawesome-free/scss/v4-shims';
-
-.svg-inline--fa {
-  background-color: $prompt-hue;
-  color: govuk-colour('white');
-  padding: govuk-spacing(4) !important;
-}
diff --git a/app/assets/stylesheets/prompt.scss b/app/assets/stylesheets/prompt.scss
@@ -1,19 +1,14 @@
-/*
-https://design-system.service.gov.uk/styles/colour/
------------------------------------------------
-*/
-$prompt-hue: govuk-colour('turquoise');
-// --------------------------------------------
-
-
 .prompt {
   background-color: govuk-colour('light-grey');
-  border-top: $prompt-hue solid 10px;
+  border-top: govuk-colour('turquoise') solid 10px;
   margin: govuk-spacing(5) govuk-spacing(0);
   padding-left: govuk-spacing(4);
   padding-right: govuk-spacing(4);
 
   .svg-inline--fa {
+    background-color: govuk-colour('turquoise');
+    color: govuk-colour('white');
+    padding: govuk-spacing(4) !important;
     position: relative;
     display: inline-block;
     width: 32px;
@@ -40,9 +35,23 @@ $prompt-hue: govuk-colour('turquoise');
   }
 
   &.prompt-bg {
-    background-color: lighten($prompt-hue, 50%);
+    background-color: lighten(govuk-colour('turquoise'), 50%);
   }
 
+  &.prompt-home {
+    background: $light-blue;
+    border-top: $color_dfe-secondary-blue solid 10px;
+
+    .govuk-grid-column-one-quarter {
+      @include govuk-media-query($from: desktop) {
+        margin-right: -220px;
+      }
+    }
+
+    .svg-inline--fa {
+      background-color: $color_dfe-secondary-blue !important;
+    }
+  }
 }
 
 .legend {

diff --git a/app/assets/stylesheets/question.scss b/app/assets/stylesheets/question.scss
@@ -1,4 +1,5 @@
 .govuk-notification-banner {
+  margin-bottom: govuk-spacing(1);
 
   &--error,
   &--alert {
@@ -19,4 +20,10 @@
 
 .govuk-fieldset__heading p {
   @extend .govuk-heading-l;
+}
+
+.prompt .govuk-fieldset__legend {
+  @include govuk-media-query($until: tablet) {
+    display: none;
+  }
 }
diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
@@ -1,6 +1,8 @@
 class HomeController < ApplicationController
   before_action :authenticate_registered_user!, only: %i[audit]
 
+  layout 'hero'
+
   def index
     track('home_page')
   end

diff --git a/app/views/home/_debug.html.slim b/app/views/home/_debug.html.slim
@@ -0,0 +1,3 @@
+- if debug?
+  pre.debug_dump
+    = configuration_summary_list
diff --git a/app/views/home/_hero.html.slim b/app/views/home/_hero.html.slim
@@ -0,0 +1,21 @@
+.govuk-grid-row class='govuk-!-margin-top-9'
+  .govuk-grid-column-two-thirds
+
+    h1.govuk-heading-xl class='govuk-!-margin-bottom-4'
+      = service_name
+
+    p.govuk-body-l
+      = t('home.hero')
+
+    = govuk_button_link_to course_overview_path, class: 'govuk-button--start govuk-!-margin-bottom-4' do
+      - if current_user
+        | Learn more
+      - else
+        | Learn more and enrol
+        p.govuk-visually-hidden on the course
+
+      svg.govuk-button__start-icon xmlns='http://www.w3.org/2000/svg' width='17.5' height='19' viewBox='0 0 33 40' aria-hidden='true' focusable='false'
+        path fill='currentColor' d='M0 0h13l20 20-20 20H0l20-20z'
+
+  .govuk-grid-column-one-third class='govuk-!-text-align-right'
+    = m('home.thumb')
diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim
@@ -1,42 +1,30 @@
 - content_for :page_title do
   = html_title t('home.title')
 
-= render 'learning/cms_debug'
-
-- if debug?
-  pre.debug_dump
-    = configuration_summary_list
-
-.govuk-grid-row
-  .govuk-grid-column-full
-    .light-grey-box
-      .govuk-grid-row
-        .govuk-grid-column-two-thirds
-          = m('home.hero', service_name: service_name)
-
-          = govuk_button_link_to course_overview_path, class: 'govuk-button--start govuk-!-margin-bottom-4' do
-            - if current_user
-              | Learn more
-            - else
-              | Learn more and enrol
-              p.govuk-visually-hidden on the course
+- content_for :hero do
+  = render 'hero'
 
-            svg.govuk-button__start-icon xmlns='http://www.w3.org/2000/svg' width='17.5' height='19' viewBox='0 0 33 40' aria-hidden='true' focusable='false'
-              path fill='currentColor' d='M0 0h13l20 20-20 20H0l20-20z'
-
-        .govuk-grid-column-one-third class='govuk-!-text-align-right'
-          = m('home.thumb')
+= render 'learning/cms_debug'
+= render 'debug'
 
 .govuk-grid-row
   .govuk-grid-column-one-half
-    = m('home.about')
+    = m('home.about', headings_start_with: 'xl')
 
   - unless current_user
     .govuk-grid-column-one-half
-      .light-grey-box
-        = m('home.login')
+      .light-grey-box.enrol-box
+        = m('home.login', headings_start_with: 'xl')
 
         .govuk-button-group
           = govuk_button_link_to 'Sign in', new_user_session_path
           .white-space-pre-wrap= ' or '
           = govuk_link_to 'create an account', new_user_registration_path
+
+.prompt.prompt-home
+  .govuk-grid-row
+    .govuk-grid-column-one-quarter
+      i.fa-2x.fa-solid.fa-circle-info aria-describedby='info icon'
+
+    .govuk-grid-column-three-quarters
+      = m('home.prompt', headings_start_with: 'xl')
diff --git a/app/views/layouts/_footer.html.slim b/app/views/layouts/_footer.html.slim
@@ -9,6 +9,9 @@
         li.govuk-footer__list-item
           = govuk_link_to 'Cookies', '/settings/cookie-policy', class: 'govuk-footer__link'
 
+        li.govuk-footer__list-item
+          = govuk_link_to 'Privacy Policy', Rails.configuration.privacy_policy_url, class: 'govuk-footer__link', target: '_blank'
+
         li.govuk-footer__list-item
           = govuk_link_to 'Contact', Rails.application.credentials.contact_us, class: 'govuk-footer__link', target: '_blank'
 

diff --git a/app/views/training/modules/index.html.slim b/app/views/training/modules/index.html.slim
@@ -11,7 +11,7 @@
 - unless current_user
   .govuk-grid-row
     .govuk-grid-column-two-thirds
-      div class='light-grey-box govuk-!-margin-bottom-4'
+      .light-grey-box class='govuk-!-margin-bottom-4'
         = m('about.enrol')
 
         .govuk-button-group

diff --git a/config/application.rb b/config/application.rb
@@ -51,6 +51,7 @@ class Application < Rails::Application
 
     config.bot_token = ENV['BOT_TOKEN']
     config.feedback_url = ENV.fetch('FEEDBACK_URL', '#FEEDBACK_URL_env_var_missing')
+    config.privacy_policy_url = 'https://www.gov.uk/government/publications/privacy-information-members-of-the-public/privacy-information-members-of-the-public'
     config.google_analytics_tracking_id = ENV.fetch('TRACKING_ID', '#TRACKING_ID_env_var_missing')
     config.hotjar_site_id = ENV.fetch('HOTJAR_SITE_ID', '#HOTJAR_SITE_ID_env_var_missing')
 

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -498,17 +498,18 @@ en:
 
       This free, online training provides an overview of child development and gives practical advice for supporting the development of children in your early years setting.
     thumb: |
-      ![A practitioner smiling as they do an activity with children in an early years setting](//images.ctfassets.net/dvmeh832nmjc/2VRBZCHJYLeKx0a2CIcJzE/687fb0d28c71104820cd42f131d7dfe2/_assets_thumb-1161068272-320x240.jpg?w=300)
+      ![A practitioner smiling as they do an activity with children in an early years setting](//images.ctfassets.net/dvmeh832nmjc/2VRBZCHJYLeKx0a2CIcJzE/687fb0d28c71104820cd42f131d7dfe2/_assets_thumb-1161068272-320x240.jpg?fit=scale&w=380)
     about: |
       ## About this training course
 
       Each training module on this site covers an important area of child development and has been written by early years experts, working with the Department for Education.
-
+    prompt: |
       ## Why should I take this training?
 
       This training:
 
-      - is free for childminders and nurseries
+      - is free
+      - is for childminders, nursery practitioners and reception staff
       - combines theory with practical tips and ideas to use in your setting
       - includes opportunities to reflect on your practice
       - reinforces your understanding through learning check questions and tests

diff --git a/spec/lib/seed_snippets_spec.rb b/spec/lib/seed_snippets_spec.rb
@@ -5,7 +5,7 @@
   subject(:locales) { described_class.new.call }
 
   it 'converts all translations' do
-    expect(locales.count).to be 176
+    expect(locales.count).to be 177
   end
 
   it 'dot separated key -> Page::Resource#name' do