mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-05-31 03:20:28 -04:00
74fb30ce5f
The Design System has standardised on back links being at the top of the page, decorated with a small text-coloured arrow. I think this makes more sense than having them at the bottom, because it suggests, in some way, being able to go back before commiting to any of the forms on the page. Whereas the things at the bottom of the page should be performing actions on what’s in the page. The reason for making this change now is that it de-clutters the area around the green buttons. This was presenting a design challenge where multiple levels of interaction were happening in the same form. Moving these back links to the top of the page should mean that, in these complicated forms, there’s one fewer thing to compete for the user’s attention. I’ve componentised this into a `page_header` macro so that the change is easier to roll out and maintain.
79 lines
2.9 KiB
HTML
79 lines
2.9 KiB
HTML
{% extends "withnav_template.html" %}
|
||
{% from "components/banner.html" import banner_wrapper %}
|
||
{% from "components/message-count-label.html" import message_count_label %}
|
||
{% from "components/page-header.html" import govuk_back_link, page_header %}
|
||
|
||
{% block service_page_title %}
|
||
{{ "Error" if error else "Preview of ‘{}’".format(template.name) }}
|
||
{% endblock %}
|
||
|
||
{% block maincolumn_content %}
|
||
{% if template.template_type == 'letter' and current_service.trial_mode %}
|
||
{{ govuk_back_link(back_link) }}
|
||
{% set error = 'trial-mode-letters' %}
|
||
<div class="bottom-gutter">
|
||
{% call banner_wrapper(type='dangerous') %}
|
||
{% with
|
||
count_of_recipients=1
|
||
%}
|
||
{% include "partials/check/trying-to-send-letters-in-trial-mode.html" %}
|
||
{% endwith %}
|
||
{% endcall %}
|
||
</div>
|
||
{% elif error == 'not-allowed-to-send-to' %}
|
||
{{ govuk_back_link(back_link) }}
|
||
<div class="bottom-gutter">
|
||
{% call banner_wrapper(type='dangerous') %}
|
||
{% with
|
||
count_of_recipients=1,
|
||
template_type_label=(
|
||
'phone number' if template.template_type == 'sms' else 'email address'
|
||
)
|
||
%}
|
||
{% include "partials/check/not-allowed-to-send-to.html" %}
|
||
{% endwith %}
|
||
{% endcall %}
|
||
</div>
|
||
{% elif error == 'too-many-messages' %}
|
||
{{ govuk_back_link(back_link) }}
|
||
<div class="bottom-gutter">
|
||
{% call banner_wrapper(type='dangerous') %}
|
||
{% include "partials/check/too-many-messages.html" %}
|
||
{% endcall %}
|
||
</div>
|
||
{% elif error == 'message-too-long' %}
|
||
{# the only row_errors we can get when sending one off messages is that the message is too long #}
|
||
{{ govuk_back_link(back_link) }}
|
||
<div class="bottom-gutter">
|
||
{% call banner_wrapper(type='dangerous') %}
|
||
{% include "partials/check/message-too-long.html" %}
|
||
{% endcall %}
|
||
</div>
|
||
{% else %}
|
||
{{ page_header(
|
||
'Preview of ‘{}’'.format(template.name),
|
||
back_link=back_link
|
||
) }}
|
||
{% endif %}
|
||
|
||
{{ template|string }}
|
||
|
||
<div class="js-stick-at-bottom-when-scrolling">
|
||
<form method="post" enctype="multipart/form-data" action="{{url_for(
|
||
'main.send_notification',
|
||
service_id=current_service.id,
|
||
template_id=template.id,
|
||
help='3' if help else 0
|
||
)}}" class='page-footer'>
|
||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
||
{% if not error %}
|
||
<button type="submit" class="button">Send 1 {{ message_count_label(1, template.template_type, suffix='') }}</button>
|
||
{% endif %}
|
||
{% if template.template_type == 'letter' %}
|
||
<a href="{{ url_for('main.check_notification_preview', service_id=current_service.id, template_id=template.id, filetype='pdf') }}" download class="page-footer-right-aligned-link">Download as a PDF</a>
|
||
{% endif %}
|
||
</form>
|
||
</div>
|
||
|
||
{% endblock %}
|