ER-1010 Formatting and Behaviour issues related to 404 Not found page

app/assets/stylesheets/page-contents.scss

@@ -42,6 +42,7 @@
   .mob-section {
     background: #f1f2f350;
     margin-top: -20px;
+    margin-bottom: 20px;
     padding: 20px 15px 0px;
     border-bottom: 1px solid #ccc;
   }
@@ -51,6 +52,21 @@
   }
 }
 
+@media (max-width: 40.0525em) {
+  .contents-on-page ul {
+     font-size: 14px;
+   }
+ }
+
+.contents-on-page li {
+  padding-top: 10px;
+  line-height: 1.3;
+  list-style-type: none;
+  position: relative;
+  padding-left: 25px;
+  padding-right: 25px
+}
+
 .app-back-to-top {
   margin-top: govuk-spacing(9);
 }

app/controllers/home_controller.rb

@@ -1,6 +1,7 @@
 class HomeController < ApplicationController
   helper_method :section,
                 :page
+  layout 'hero'
 
   def index; end
 

app/controllers/pages_controller.rb

@@ -3,13 +3,18 @@ class PagesController < ApplicationController
                 :slug,
                 :section,
                 :breadcrumbs
+  layout 'hero'
 
   def index
-    render 'errors/not_found' if page.nil?
+    render 'errors/not_found', layout: 'application' if page.nil?
   end
 
   def show
-    render page.to_partial_path
+    if page.nil?
+      render 'errors/not_found', layout: 'application'
+    else
+      render page.to_partial_path
+    end
   end
 
 private

app/helpers/application_helper.rb

@@ -31,4 +31,10 @@ def track_analytics?
   def debug?
     Dry::Types['params.bool'][ENV.fetch('DEBUG', false)]
   end
+
+  # @param parts [Array<String>]
+  # @return [String]
+  def html_title(*parts)
+    [t('service.name'), *parts].join(' : ')
+  end
 end

app/views/errors/not_found.html.slim

@@ -1,3 +1,6 @@
+- content_for :page_title do
+  = html_title 'Page not found'
+
 .govuk-grid-row
   .govuk-grid-column-two-thirds
     h1.govuk-heading-xl

app/views/layouts/application.html.slim

@@ -26,7 +26,7 @@ html.govuk-template lang='en'
     = javascript_include_tag 'application', 'data-turbo-track': 'reload', defer: true
     = yield :head
 
-  body#hero-layout.govuk-template__body
+  body#default-layout.govuk-template__body
     script
       | document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
 
@@ -37,13 +37,9 @@ html.govuk-template lang='en'
 
     = navigation
 
-    .dfe-content-page--header class='govuk-!-padding-bottom-7'
-      .dfe-width-container 
-        = render 'layouts/banner'
-
-        = yield :hero
-
     .dfe-width-container
+      = render 'layouts/banner'
+
       main#main-content.govuk-main-wrapper role='main'
         = yield
 

app/views/layouts/hero.html.slim

@@ -0,0 +1,51 @@
+doctype html 
+html.govuk-template lang='en'
+  head 
+    title= [t('service.name'), yield(:page_title).presence].compact.join(' : ')
+    = csrf_meta_tags
+    = csp_meta_tag
+
+    = tag.meta content: 'text/html; charset=UTF-8', 'http-equiv': 'Content-Type'
+    = render 'layouts/analytics_header'
+    = render 'layouts/hotjar'
+
+    = tag.meta content: 'width=device-width,initial-scale=1', name: 'viewport'
+    = tag.meta name: 'robots', content: 'noindex,nofollow' unless Rails.application.live?
+    = tag.meta property: 'og:image', content: image_path('images/govuk-opengraph-image.png')
+    = tag.meta name: 'description', content: @page&.meta_description if @page&.meta_description.present?
+    = csrf_meta_tags
+    = tag.meta name: 'theme-color', content: '#0b0c0c'
+
+    = favicon_link_tag image_path('dfe_favicon.ico')
+    = favicon_link_tag asset_path('images/govuk-mask-icon.svg'), rel: 'mask-icon', type: 'image/svg', color: "#0b0c0c"
+    = favicon_link_tag asset_path('images/govuk-apple-touch-icon.png'), rel: 'apple-touch-icon', type: 'image/png'
+    = favicon_link_tag asset_path('images/govuk-apple-touch-icon-152x152.png'), rel: 'apple-touch-icon', type: 'image/png', size: '152x152'
+    = favicon_link_tag asset_path('images/govuk-apple-touch-icon-167x167.png'), rel: 'apple-touch-icon', type: 'image/png', size: '167x167'
+    = favicon_link_tag asset_path('images/govuk-apple-touch-icon-180x180.png'), rel: 'apple-touch-icon', type: 'image/png', size: '180x180'
+    = stylesheet_link_tag 'application', 'data-turbo-track': 'reload'
+    = javascript_include_tag 'application', 'data-turbo-track': 'reload', defer: true
+    = yield :head
+
+  body#hero-layout.govuk-template__body
+    script
+      | document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+
+    = render 'layouts/analytics_body'
+    = render 'layouts/cookie_banner'
+
+    = govuk_skip_link 
+
+    = navigation
+
+    .dfe-content-page--header class='govuk-!-padding-bottom-7'
+      .dfe-width-container
+        = render 'layouts/banner'
+        = yield :hero
+
+    .dfe-width-container
+      main#main-content.govuk-main-wrapper role='main'
+        = yield
+
+    = yield :other_resources
+
+    = render FooterComponent.new(pages: Page.footer.pages)

app/views/pages/side_nav.slim

@@ -5,7 +5,7 @@
   = render partial: 'hero', locals: { hero: page.hero }
 
 .govuk-grid-row
-  .govuk-grid-column-one-quarter.sticky.mob-section 
+  .govuk-grid-column-one-quarter.sticky.mob-section
     input#menu-icon-chk.menu-btn[type="checkbox" name="menu-icon" checked]
     label.menu-icon.govuk-body-l[for="menu-icon-chk"]
       svg[xmlns="http://www.w3.org/2000/svg" height="1em" viewbox="0 0 448 512"]

config/locales/en.yml

@@ -134,4 +134,4 @@ en:
               blank: Last name must not be blank
   settings:
     cookie_policy_legend: Do you want to accept analytics cookies?
-    preferences_saved_html: Your cookie settings were saved</br><a class='govuk-link' href='%{return_url}'>Go back to Help for early years providers</a>
+    preferences_saved_html: Your cookie settings were saved. [Go back to Help for early years providers](/).

spec/helpers/application_helper_spec.rb

@@ -0,0 +1,9 @@
+require 'rails_helper'
+
+xdescribe 'ApplicationHelper', type: :helper do
+  describe '#html_title' do
+    it 'shows content' do
+      expect(page).to have_content 'content within html_title'
+    end
+  end
+end

spec/system/homepage_spec.rb

@@ -0,0 +1,13 @@
+require 'rails_helper'
+
+RSpec.describe 'Homepage' do
+  before do
+    visit '/'
+  end
+
+  specify do
+    within '#hero-layout' do
+      expect(page).to have_content 'Find helpful articles and resources to support you in your setting.'
+    end
+  end
+end