Add GOV.UK Design System style back links

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.
This commit is contained in:
Chris Hill-Scott
2019-04-29 11:44:05 +01:00
parent a97956e571
commit 74fb30ce5f
83 changed files with 601 additions and 516 deletions

View File

@@ -3,7 +3,7 @@
{% from "components/radios.html" import radio_select %}
{% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
{% from "components/file-upload.html" import file_upload %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/page-header.html" import govuk_back_link %}
{% from "components/message-count-label.html" import message_count_label %}
{% set file_contents_header_id = 'file-preview' %}
@@ -19,7 +19,9 @@
{% block maincolumn_content %}
<div class="bottom-gutter">
{{ govuk_back_link(back_link) }}
<div class="bottom-gutter-1-2">
{% call banner_wrapper(type='dangerous') %}
{% if recipients.too_many_rows %}
@@ -135,9 +137,7 @@
<div class="js-stick-at-top-when-scrolling">
<div class="form-group">
{% if request.args.from_test %}
<a href="{{ back_link }}" class="page-footer-back-link">Back</a>
{% else %}
{% if not request.args.from_test %}
{{ file_upload(
form.file,
action=url_for('.send_messages', service_id=current_service.id, template_id=template.id),