From 6747bd8bcf35b0243c9770872febdd462c803e98 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 31 Aug 2021 17:11:42 +0100
Subject: [PATCH] Change layout of tour pages showing service nav

They have the service navigation inside the <main>
block. This means you can't bypass it when you use
the skiplink.

This copies other layouts that inherit from
admin_template.html and sets the contents of the
'main' template block so the service navigation is
placed before the <main> tag.
---
 app/templates/views/broadcast/tour/6.html     | 49 ++++++++++---------
 .../views/broadcast/tour/live/1.html          | 48 +++++++++---------
 .../views/broadcast/tour/live/2.html          | 39 ++++++++-------
 3 files changed, 71 insertions(+), 65 deletions(-)

diff --git a/app/templates/views/broadcast/tour/6.html b/app/templates/views/broadcast/tour/6.html
index 10e30d69e..84fbea4c3 100644
--- a/app/templates/views/broadcast/tour/6.html
+++ b/app/templates/views/broadcast/tour/6.html
@@ -6,32 +6,33 @@
   Notify has not sent your alert because you’re in training mode.
 {% endblock %}
 
-{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
+{% block main %}
 
-{% block content %}
-
-  {% include "service_navigation.html" %}
-
-  <div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-one-half">
-        <h1 class="heading-medium">
-          Notify has not sent your alert because you’re in training mode.
-        </h1>
-        <p class="govuk-body heading-medium">
-          In a real emergency, every mobile phone in the area
-          you chose would make a loud alarm noise.
-        </p>
-        <p class="govuk-body heading-medium">
-          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
-            Continue
-          </a>
-        </p>
+  <div class="govuk-width-container">
+    {% include "service_navigation.html" %}
+    <main class="govuk-main-wrapper column-main govuk-!-padding-top-0 govuk-!-padding-bottom-0" id="main-content" role="main">
+      <div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
+        <div class="govuk-grid-row">
+          <div class="govuk-grid-column-one-half">
+            <h1 class="heading-medium">
+              Notify has not sent your alert because you’re in training mode.
+            </h1>
+            <p class="govuk-body heading-medium">
+              In a real emergency, every mobile phone in the area
+              you chose would make a loud alarm noise.
+            </p>
+            <p class="govuk-body heading-medium">
+              <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
+                Continue
+              </a>
+            </p>
+          </div>
+          <div class="govuk-grid-column-one-half">
+            <img src="{{ asset_url('images/broadcast-tour/3.png') }}" alt="">
+          </div>
+        </div>
       </div>
-      <div class="govuk-grid-column-one-half">
-        <img src="{{ asset_url('images/broadcast-tour/3.png') }}" alt="">
-      </div>
-    </div>
+    </main>
   </div>
 
 {% endblock %}
diff --git a/app/templates/views/broadcast/tour/live/1.html b/app/templates/views/broadcast/tour/live/1.html
index 37f4dde89..8b3726fda 100644
--- a/app/templates/views/broadcast/tour/live/1.html
+++ b/app/templates/views/broadcast/tour/live/1.html
@@ -8,30 +8,32 @@
 
 {% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
 
-{% block content %}
+{% block main %}
 
-  {% include "service_navigation.html" %}
-
-  <div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-one-half">
-        <h1 class="heading-medium">
-          You’ve been invited to send live emergency alerts.
-        </h1>
-        <p class="govuk-body heading-medium">
-          Members of the public will receive alerts you send from this service.
-        </p>
-        <p class="govuk-body heading-medium">
-          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour_live", service_id=current_service.id, step_index=2) }}'>
-            Continue
-          </a>
-        </p>
+  <div class="govuk-width-container">
+    {% include "service_navigation.html" %}
+    <main class="govuk-main-wrapper column-main {{ mainClasses }}" id="main-content" role="main">
+      <div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
+        <div class="govuk-grid-row">
+          <div class="govuk-grid-column-one-half">
+            <h1 class="heading-medium">
+              You’ve been invited to send live emergency alerts.
+            </h1>
+            <p class="govuk-body heading-medium">
+              Members of the public will receive alerts you send from this service.
+            </p>
+            <p class="govuk-body heading-medium">
+              <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour_live", service_id=current_service.id, step_index=2) }}'>
+                Continue
+              </a>
+            </p>
+          </div>
+          <div class="govuk-grid-column-one-half">
+            <img src="{{ asset_url('images/broadcast-tour/live/1.png') }}" alt="">
+            <link rel="preload" href="{{ asset_url('images/broadcast-tour/live/2.png') }}" as="image">
+          </div>
+        </div>
       </div>
-      <div class="govuk-grid-column-one-half">
-        <img src="{{ asset_url('images/broadcast-tour/live/1.png') }}" alt="">
-        <link rel="preload" href="{{ asset_url('images/broadcast-tour/live/2.png') }}" as="image">
-      </div>
-    </div>
+    </main>
   </div>
-
 {% endblock %}
diff --git a/app/templates/views/broadcast/tour/live/2.html b/app/templates/views/broadcast/tour/live/2.html
index 73dbfece0..6fbf7db3b 100644
--- a/app/templates/views/broadcast/tour/live/2.html
+++ b/app/templates/views/broadcast/tour/live/2.html
@@ -8,26 +8,29 @@
 
 {% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
 
-{% block content %}
+{% block main %}
 
-  {% include "service_navigation.html" %}
-
-  <div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-one-half">
-        <h1 class="heading-medium">
-          You can always go back to training mode by clicking ‘Switch service’ in the top right.
-        </h1>
-        <p class="govuk-body heading-medium">
-          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
-            Continue
-          </a>
-        </p>
+  <div class="govuk-width-container">
+    {% include "service_navigation.html" %}
+    <main class="govuk-main-wrapper column-main {{ mainClasses }}" id="main-content" role="main">
+      <div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
+        <div class="govuk-grid-row">
+          <div class="govuk-grid-column-one-half">
+            <h1 class="heading-medium">
+              You can always go back to training mode by clicking ‘Switch service’ in the top right.
+            </h1>
+            <p class="govuk-body heading-medium">
+              <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
+                Continue
+              </a>
+            </p>
+          </div>
+          <div class="govuk-grid-column-one-half">
+            <img src="{{ asset_url('images/broadcast-tour/live/2.png') }}" alt="">
+          </div>
+        </div>
       </div>
-      <div class="govuk-grid-column-one-half">
-        <img src="{{ asset_url('images/broadcast-tour/live/2.png') }}" alt="">
-      </div>
-    </div>
+    </main>
   </div>
 
 {% endblock %}