mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-05 10:53:28 -05:00
39e94ac8ec
When a table is showing the contents of a CSV file, it should look something like a spreadsheet. The minimally skeuomorphic way to do this is by adding row numbers. This commit doesn’t - make the row numbers monospace (it’s barely noticeable and doesn’t reflect what actual spreadsheets do) - make the first column heading ‘Row’ (again, doesn’t reflect how actual spreadsheets work, and takes up more valuable space)
83 lines
2.3 KiB
HTML
83 lines
2.3 KiB
HTML
{% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True) -%}
|
|
<table class="table">
|
|
<caption class="heading-medium table-heading{{ ' visuallyhidden' if not caption_visible}}">
|
|
{{ caption }}
|
|
</caption>
|
|
<thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
|
|
<tr>
|
|
{% for field_heading in field_headings %}
|
|
<th scope="col" class="table-field-heading{% if loop.first %}-first{% endif %}">
|
|
{% if field_headings_visible %}
|
|
{{ field_heading }}
|
|
{% else %}
|
|
<span class="visuallyhidden">{{ field_heading }}</span>
|
|
{% endif %}
|
|
</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ caller() }}
|
|
</tbody>
|
|
</table>
|
|
{%- endmacro %}
|
|
|
|
{% macro list_table(items, caption='', empty_message='', field_headings=[], field_headings_visible=True, caption_visible=True) -%}
|
|
|
|
{% set parent_caller = caller %}
|
|
|
|
{% call mapping_table(caption, field_headings, field_headings_visible, caption_visible) %}
|
|
{% for item in items %}
|
|
{% call row() %}
|
|
{{ parent_caller(item, loop.index + 1) }}
|
|
{% endcall %}
|
|
{% endfor %}
|
|
{% if not items %}
|
|
{% call row() %}
|
|
<td class="table-empty-message" colspan="10">
|
|
{{ empty_message }}
|
|
</td>
|
|
{% endcall %}
|
|
{% endif %}
|
|
{%- endcall %}
|
|
|
|
{%- endmacro %}
|
|
|
|
{% macro row() -%}
|
|
<tr class="table-row">
|
|
{{ caller() }}
|
|
</tr>
|
|
{%- endmacro %}
|
|
|
|
{% macro field(align='left', status='') -%}
|
|
<td class="table-field{% if align == 'right' %}-right-aligned{% endif %}">
|
|
<span class="{{ 'table-field-status-' + status if status }}">{{ caller() }}</span>
|
|
</td>
|
|
{%- endmacro %}
|
|
|
|
{% macro index_field(text) -%}
|
|
<td class="table-field-index">
|
|
<span>{{ text }}</span>
|
|
</td>
|
|
{%- endmacro %}
|
|
|
|
{% macro text_field(text) -%}
|
|
{% call field() %}
|
|
{{ text }}
|
|
{% endcall %}
|
|
{%- endmacro %}
|
|
|
|
{% macro boolean_field(yes) -%}
|
|
{% call field(status='yes' if yes else 'no') %}
|
|
{{ "Yes" if yes else "No" }}
|
|
{% endcall %}
|
|
{%- endmacro %}
|
|
|
|
{% macro right_aligned_field_heading(text) %}
|
|
<span class="table-field-heading-right-aligned">{{ text }}</span>
|
|
{%- endmacro %}
|
|
|
|
{% macro hidden_field_heading(text) %}
|
|
<span class="visuallyhidden">{{ text }}</span>
|
|
{%- endmacro %}
|