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.
This commit is contained in:
Tom Byers
2021-08-31 17:11:42 +01:00
parent 981083d465
commit 6747bd8bcf
3 changed files with 71 additions and 65 deletions

View File

@@ -6,32 +6,33 @@
Notify has not sent your alert because youre 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 youre 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 youre 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 %}

View File

@@ -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">
Youve 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">
Youve 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 %}

View File

@@ -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 %}