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

@@ -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 %}
+  <div class="govuk-width-container">
-
+    {% include "service_navigation.html" %}
-  {% 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="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
+        <div class="govuk-grid-row">
-    <div class="govuk-grid-row">
+          <div class="govuk-grid-column-one-half">
-      <div class="govuk-grid-column-one-half">
+            <h1 class="heading-medium">
-        <h1 class="heading-medium">
+              Notify has not sent your alert because you’re in training mode.
-          Notify has not sent your alert because you’re in training mode.
+            </h1>
-        </h1>
+            <p class="govuk-body heading-medium">
-        <p class="govuk-body heading-medium">
+              In a real emergency, every mobile phone in the area
-          In a real emergency, every mobile phone in the area
+              you chose would make a loud alarm noise.
-          you chose would make a loud alarm noise.
+            </p>
-        </p>
+            <p class="govuk-body heading-medium">
-        <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) }}'>
-          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
+                Continue
-            Continue
+              </a>
-          </a>
+            </p>
-        </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">
+    </main>
-        <img src="{{ asset_url('images/broadcast-tour/3.png') }}" alt="">
-      </div>
-    </div>
   </div>
 
 {% endblock %}

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="govuk-width-container">
-
+    {% include "service_navigation.html" %}
-  <div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
+    <main class="govuk-main-wrapper column-main {{ mainClasses }}" id="main-content" role="main">
-    <div class="govuk-grid-row">
+      <div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
-      <div class="govuk-grid-column-one-half">
+        <div class="govuk-grid-row">
-        <h1 class="heading-medium">
+          <div class="govuk-grid-column-one-half">
-          You’ve been invited to send live emergency alerts.
+            <h1 class="heading-medium">
-        </h1>
+              You’ve been invited to send live emergency alerts.
-        <p class="govuk-body heading-medium">
+            </h1>
-          Members of the public will receive alerts you send from this service.
+            <p class="govuk-body heading-medium">
-        </p>
+              Members of the public will receive alerts you send from this service.
-        <p class="govuk-body heading-medium">
+            </p>
-          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour_live", service_id=current_service.id, step_index=2) }}'>
+            <p class="govuk-body heading-medium">
-            Continue
+              <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour_live", service_id=current_service.id, step_index=2) }}'>
-          </a>
+                Continue
-        </p>
+              </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">
+    </main>
-        <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>
-
 {% endblock %}

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="govuk-width-container">
-
+    {% include "service_navigation.html" %}
-  <div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
+    <main class="govuk-main-wrapper column-main {{ mainClasses }}" id="main-content" role="main">
-    <div class="govuk-grid-row">
+      <div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
-      <div class="govuk-grid-column-one-half">
+        <div class="govuk-grid-row">
-        <h1 class="heading-medium">
+          <div class="govuk-grid-column-one-half">
-          You can always go back to training mode by clicking ‘Switch service’ in the top right.
+            <h1 class="heading-medium">
-        </h1>
+              You can always go back to training mode by clicking ‘Switch service’ in the top right.
-        <p class="govuk-body heading-medium">
+            </h1>
-          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
+            <p class="govuk-body heading-medium">
-            Continue
+              <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
-          </a>
+                Continue
-        </p>
+              </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">
+    </main>
-        <img src="{{ asset_url('images/broadcast-tour/live/2.png') }}" alt="">
-      </div>
-    </div>
   </div>
 
 {% endblock %}