mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-05-30 11:00:14 -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.
111 lines
3.8 KiB
HTML
111 lines
3.8 KiB
HTML
{% extends "withnav_template.html" %}
|
|
{% from "components/banner.html" import banner_wrapper %}
|
|
{% 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-header.html" import govuk_back_link %}
|
|
{% from "components/message-count-label.html" import message_count_label %}
|
|
|
|
{% set file_contents_header_id = 'file-preview' %}
|
|
{% macro skip_to_file_contents() %}
|
|
<p class="visually-hidden">
|
|
<a href="#{{ file_contents_header_id }}">Skip to file contents</a>
|
|
</p>
|
|
{% endmacro %}
|
|
|
|
{% block service_page_title %}
|
|
Error
|
|
{% endblock %}
|
|
|
|
{% block maincolumn_content %}
|
|
|
|
{{ govuk_back_link(back_link) }}
|
|
|
|
<div class="bottom-gutter-1-2">
|
|
{% call banner_wrapper(type='dangerous') %}
|
|
{% if row_errors|length == 1 %}
|
|
<h1 class='banner-title' data-module="track-error" data-error-type="Bad rows" data-error-label="{{ upload_id }}">
|
|
There is a problem with {{ original_file_name }}
|
|
</h1>
|
|
<p>
|
|
You need to {{ row_errors[0] }}
|
|
</p>
|
|
{% else %}
|
|
<h1 class='banner-title' data-module="track-error" data-error-type="Bad rows" data-error-label="{{ upload_id }}">
|
|
There are some problems with {{ original_file_name }}
|
|
</h1>
|
|
<p>
|
|
You need to:
|
|
</p>
|
|
<ul class="list-bullet">
|
|
{% for error in row_errors %}
|
|
<li>{{ error }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
{{ skip_to_file_contents() }}
|
|
{% endcall %}
|
|
</div>
|
|
|
|
<div class="js-stick-at-top-when-scrolling">
|
|
<div class="form-group">
|
|
{{ file_upload(
|
|
form.file,
|
|
action=url_for('.send_messages', service_id=current_service.id, template_id=template.id),
|
|
button_text='Re-upload your file'
|
|
) }}
|
|
</div>
|
|
<a href="#content" class="back-to-top-link">Back to top</a>
|
|
</div>
|
|
|
|
<div class="fullscreen-content" data-module="fullscreen-table">
|
|
{% call(item, row_number) list_table(
|
|
recipients.displayed_rows,
|
|
caption=original_file_name,
|
|
caption_visible=False,
|
|
field_headings=[
|
|
'<span class="visually-hidden">Row in file</span><span aria-hidden="true" class="table-field-invisible-error">1</span>'|safe
|
|
] + recipients.column_headers
|
|
) %}
|
|
{% call index_field() %}
|
|
<span class="{% if item.has_errors %}table-field-error{% endif %}">
|
|
{{ item.index + 2 }}
|
|
</span>
|
|
{% endcall %}
|
|
{% for column in recipients.column_headers %}
|
|
{% if item[column].error and not recipients.missing_column_headers %}
|
|
{% call field() %}
|
|
<span>
|
|
<span class="table-field-error-label">{{ item[column].error }}</span>
|
|
{{ item[column].data if item[column].data != None }}
|
|
</span>
|
|
{% endcall %}
|
|
{% elif item[column].ignore %}
|
|
{{ text_field(item[column].data or '', status='default') }}
|
|
{% else %}
|
|
{{ text_field(item[column].data or '') }}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if item[None].data %}
|
|
{% for column in item[None].data %}
|
|
{{ text_field(column, status='default') }}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endcall %}
|
|
</div>
|
|
{% if count_of_displayed_recipients < count_of_recipients %}
|
|
<p class="table-show-more-link">
|
|
{% if row_errors and not recipients.missing_column_headers %}
|
|
Only showing the first {{ count_of_displayed_recipients }} rows with errors
|
|
{% else %}
|
|
Only showing the first {{ count_of_displayed_recipients }} rows
|
|
{% endif %}
|
|
</p>
|
|
{% elif row_errors and not recipients.missing_column_headers %}
|
|
<p class="table-show-more-link">
|
|
Only showing rows with errors
|
|
</p>
|
|
{% endif %}
|
|
|
|
{% endblock %}
|