Give each row in a table a heading

The first columns of our tables are always headings for the
subsequent columns, even though they go horizontally.

HTML has the `<th>` tag, which doesn’t just have to be used for headings
along the top of a table. So this commit changes the first column to be
a `<th>`.

This then allows us to style these elements differently, specifically
making them 50% wide. This makes pages like the dashboard align more
nicely.
This commit is contained in:
Chris Hill-Scott
2016-06-08 13:41:02 +01:00
parent b1852f4b78
commit d213e2cc67
5 changed files with 41 additions and 15 deletions

View File

@@ -1,4 +1,4 @@
{% from "components/table.html" import list_table, field, right_aligned_field_heading %}
{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
{% from "components/big-number.html" import big_number %}
{% call(item, row_number) list_table(
@@ -8,28 +8,28 @@
empty_message='You havent sent any batch messages yet',
field_headings=[
'File',
right_aligned_field_heading('Sending'),
right_aligned_field_heading('Delivered'),
right_aligned_field_heading('Failed')
'Sending',
'Delivered',
'Failed'
],
field_headings_visible=True
) %}
{% call field() %}
{% call row_heading() %}
<div class="file-list">
<a class="file-list-filename" href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
<span class="file-list-hint">Uploaded {{ item.created_at|format_datetime_short }}</span>
</div
{% endcall %}
{% call field(align='right') %}
{% call field() %}
{{ big_number(
item.get('notifications_sent', 0) - item.get('notifications_delivered', 0) - item.get('notifications_failed', 0),
smaller=True
) }}
{% endcall %}
{% call field(align='right') %}
{% call field() %}
{{ big_number(item.get('notifications_delivered', 0), smaller=True) }}
{% endcall %}
{% call field(align='right', status='error' if 0 else '') %}
{% call field(status='error' if 0 else '') %}
{{ big_number(item.get('notifications_failed', 0), smaller=True) }}
{% endcall %}
{% endcall %}