mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-26 21:31:11 -05:00
d213e2cc67
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.
101 lines
2.7 KiB
HTML
101 lines
2.7 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 row_heading() -%}
|
|
<th class="table-field">
|
|
<span>{{ caller() }}</span>
|
|
</th>
|
|
{%- endmacro %}
|
|
|
|
{% macro index_field(text) -%}
|
|
<td class="table-field-index">
|
|
<span>{{ text }}</span>
|
|
</td>
|
|
{%- endmacro %}
|
|
|
|
{% macro date_field(text) -%}
|
|
<td class="table-field-date">
|
|
<span>{{ text }}</span>
|
|
</td>
|
|
{% endmacro %}
|
|
|
|
{% macro text_field(text) -%}
|
|
{% call field() %}
|
|
{{ text }}
|
|
{% endcall %}
|
|
{%- endmacro %}
|
|
|
|
{% macro link_field(text, link) -%}
|
|
{% call field() %}
|
|
<a href="{{ link }}">{{ text }}</a>
|
|
{% 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 %}
|