Merge pull request #6564 from NHSDigital/fix-session-layout

Fix session layout

Author: thomasleese

app/assets/stylesheets/components/_session-banner.scss

@@ -12,6 +12,7 @@
   }
 
   .nhsuk-notification-banner {
+    margin-bottom: nhsuk-spacing(4);
     border-color: nhsuk-colour("white");
   }
 
@@ -31,7 +32,18 @@
     color: $nhsuk-reverse-text-colour;
   }
 
+  .app-secondary-navigation {
+    margin: 0;
+    border-bottom: 0 none;
+    background: nhsuk-shade($nhsuk-brand-colour, 20%);
+    box-shadow: 0 -1px 0 0 $nhsuk-secondary-border-colour;
+  }
+
   .app-secondary-navigation__list {
-    box-shadow: 0 -1px 0 0 $nhsuk-reverse-border-colour;
+    box-shadow: none;
+
+    @include nhsuk-media-query($until: tablet) {
+      margin-left: #{$nhsuk-gutter-half * -1};
+    }
   }
 }

app/views/layouts/application.html.erb

@@ -38,9 +38,7 @@
 
     <%= render "layouts/header" %>
 
-    <main id="main-content">
-      <%= yield :main_content %>
-    </main>
+    <%= yield :main_content %>
 
     <%= yield :after_main %>
 

app/views/layouts/default.html.erb

@@ -2,11 +2,11 @@
   <div class="nhsuk-width-container">
     <%= yield :navigation %>
 
-    <div class="nhsuk-main-wrapper">
+    <main class="nhsuk-main-wrapper" id="main-content">
       <%= render(AppFlashMessageComponent.new(flash: flash)) %>
 
       <%= content_for?(:content) ? yield(:content) : yield %>
-    </div>
+    </main>
   </div>
 <% end %>
 

app/views/layouts/session.html.erb

@@ -1,21 +1,21 @@
 <% content_for :main_content do %>
-  <%= render "sessions/header" %>
+  <main id="main-content">
+    <%= render "sessions/header" %>
 
-  <div class="nhsuk-width-container">
-    <%= yield :navigation %>
+    <div class="nhsuk-width-container">
+      <div class="nhsuk-main-wrapper nhsuk-main-wrapper--s">
+        <%= yield :navigation %>
 
-    <div class="nhsuk-main-wrapper">
-      <%= render(AppFlashMessageComponent.new(flash: flash)) %>
+        <div class="nhsuk-grid-row">
+          <div class="nhsuk-grid-column-full">
+            <%= yield :before_content %>
 
-      <div class="nhsuk-grid-row">
-        <div class="nhsuk-grid-column-full">
-          <%= yield :before_content %>
-
-          <%= yield %>
+            <%= yield %>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </main>
 <% end %>
 
 <%= render template: "layouts/application" %>

app/views/sessions/_header.html.erb

@@ -1,6 +1,8 @@
 <div class="app-session-banner">
   <div class="nhsuk-width-container">
     <div class="nhsuk-main-wrapper nhsuk-main-wrapper--s">
+      <%= render(AppFlashMessageComponent.new(flash: flash)) %>
+
       <%= h1 session_title(@session), class: "nhsuk-u-margin-bottom-2" %>
 
       <p class="nhsuk-caption-l nhsuk-u-margin-bottom-0">