Files
notifications-admin/app/templates/views/check/column-errors.html
Chris Hill-Scott c6f54966bf Change tables to scroll in-page, not full screen
There were three problems with showing tables fullscreen:
- it was over-optimised for very big spreadsheets, whereas most users
  will only have a few columns in their files
- it was jarring to go from full screen and back to the normal layout
- it was a bit change for existing users, where we prefer incremental
  changes that make things better without disrupting people’s work
  (where possible)

So this commit changes the big table to scroll horizontally in the page,
not take up the full width of the page.

From the fullscreen table it keeps:
- the shimming method to keep the horizontal scrollbar at the bottom of
  the screen at all times

It introduces some more refinements to make it nicer to use:
- fixing the first column, so you always know what row you’re on
- adding shadows indicate where there is content that’s scrolled outside
  the edges of the container
2017-12-20 12:09:18 +00:00

192 lines
6.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% 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-footer.html" import page_footer %}
{% 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 %}
<div class="bottom-gutter">
{% call banner_wrapper(type='dangerous') %}
{% if recipients.too_many_rows %}
<h1 class='banner-title' data-module="track-error" data-error-type="Too many rows" data-error-label="{{ upload_id }}">
Your file has too many rows
</h1>
<p>
Notify can process up to
{{ "{:,}".format(recipients.max_rows) }} rows at once. Your
file has {{ "{:,}".format(recipients|length) }} rows.
</p>
{% elif not count_of_recipients %}
<h1 class='banner-title' data-module="track-error" data-error-type="No rows" data-error-label="{{ upload_id }}">
Your file is missing some rows
</h1>
{% if recipients.missing_column_headers %}
<p>
It needs at least one row of data, and {{ recipients.missing_column_headers | sort() | formatted_list(
prefix='a column called',
prefix_plural='columns called'
) }}.
</p>
{% else %}
<p>
It needs at least one row of data.
</p>
{% endif %}
{% elif not recipients.has_recipient_columns %}
<h1 class='banner-title' data-module="track-error" data-error-type="Missing recipient columns" data-error-label="{{ upload_id }}">
Your file needs {{ (
recipients.missing_column_headers
if template.template_type == 'letter' else required_recipient_columns
) | formatted_list(
prefix='a column called',
prefix_plural='columns called'
) }}
</h1>
<p>
Right now it has {{ recipients.column_headers | formatted_list(
prefix='one column, called ',
prefix_plural='columns called '
) }}.
</p>
{% elif recipients.missing_column_headers %}
<h1 class='banner-title' data-module="track-error" data-error-type="Missing placeholder columns" data-error-label="{{ upload_id }}">
The columns in your file need to match the double brackets in
your template
</h1>
<p>
Your file is missing {{ recipients.missing_column_headers | formatted_list(
conjunction='and',
prefix='a column called ',
prefix_plural='columns called '
) }}.
</p>
{% elif not recipients.allowed_to_send_to %}
{% with
count_of_recipients=count_of_recipients,
template_type_label=recipients.recipient_column_headers[0]
%}
{% include "partials/check/not-allowed-to-send-to.html" %}
{% endwith %}
{% elif trying_to_send_letters_in_trial_mode %}
<h1 class='banner-title' data-module="track-error" data-error-type="Trying to send letters in trial mode" data-error-label="{{ upload_id }}">
You cant send
{{ 'this letter' if count_of_recipients == 1 else 'these letters' }}
</h1>
<p>
In <a href="{{ url_for('.using_notify') }}#trial-mode">trial mode</a> you
can only preview how your letters will look
</p>
{% elif recipients.more_rows_than_can_send %}
{% include "partials/check/too-many-messages.html" %}
{% endif %}
{{ skip_to_file_contents() }}
{% endcall %}
</div>
<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 %}
{{file_upload(form.file, button_text='Re-upload your file')}}
{% endif %}
</div>
<a href="#content" class="back-to-top-link">Back to top</a>
</div>
{% if not request.args.from_test %}
<h2 class="heading-medium" id="{{ file_contents_header_id }}">{{ original_file_name }}</h2>
<div class="fullscreen-content" data-module="fullscreen-table">
{% call(item, row_number) list_table(
recipients.initial_annotated_rows_with_errors if row_errors and not recipients.missing_column_headers else recipients.initial_annotated_rows,
caption=original_file_name,
caption_visible=False,
field_headings=[
'<span class="visually-hidden">Row in file</span><span aria-hidden="true">1</span>'|safe
] + recipients.column_headers
) %}
{% call index_field() %}
<span>
{{ item.index + 2 }}
</span>
{% endcall %}
{% for column in recipients.column_headers %}
{% if item['columns'][column].error and not recipients.missing_column_headers %}
{% call field() %}
<span>
<span class="table-field-error-label">{{ item['columns'][column].error }}</span>
{{ item['columns'][column].data if item['columns'][column].data != None }}
</span>
{% endcall %}
{% elif item['columns'][column].ignore %}
{{ text_field(item['columns'][column].data or '', status='default') }}
{% else %}
{{ text_field(item['columns'][column].data or '') }}
{% endif %}
{% endfor %}
{% if item['columns'].get(None) %}
{% for column in item['columns'][None].data %}
{{ text_field(column, status='default') }}
{% endfor %}
{% endif %}
{% endcall %}
{% endif %}
</div>
{% if recipients.too_many_rows %}
<p class="table-show-more-link">
Cant show the contents of this file
</p>
{% elif 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 %}
<h2 class="heading-medium">Preview of {{ template.name }}</h2>
{{ template|string }}
{% endblock %}