mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-03-29 22:52:41 -04:00
2ecfc2bb80
In HTML you generally can’t nest an inline level element inside a block level one, if you want your HTML to validate. There were a couple of places where we were using a `<span>` as a containing element: - inside every table cell (think we inherited this from Digital Marketplace) - in the ‘pill’ navigation component for the selected tab This meant that when we put components like big number inside these, the resulting HTML was invalid, because big number is built with a bunch of `<div>`s, which are block level. This commit removes the use of a `<span>` tag in these places, and replaces it with a `<div>`. Nesting block level elements in fine in HTML.
132 lines
3.9 KiB
HTML
132 lines
3.9 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(item.id) %}
|
|
{{ 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(id=None) -%}
|
|
<tr class="table-row" {% if id %}id="{{id}}"{% endif %}>
|
|
{{ caller() }}
|
|
</tr>
|
|
{%- endmacro %}
|
|
|
|
{% macro row_group(id=None) %}
|
|
<tbody class="table-row-group" {% if id %}id="{{id}}"{% endif %}>
|
|
{{ caller() }}
|
|
</tbody>
|
|
{%- endmacro %}
|
|
|
|
{% macro field(align='left', status='', border=True) -%}
|
|
|
|
{% set field_alignment = 'table-field-right-aligned' if align == 'right' else 'table-field-center-aligned' %}
|
|
{% set border = '' if border else 'table-field-noborder' %}
|
|
|
|
<td class="{{ [field_alignment, border]|join(' ') }}">
|
|
<div class="{{ 'table-field-status-' + status if status }}">{{ caller() }}</div>
|
|
</td>
|
|
{%- endmacro %}
|
|
|
|
{% macro row_heading() -%}
|
|
<th class="table-field">
|
|
{{ caller() }}
|
|
</th>
|
|
{%- endmacro %}
|
|
|
|
{% macro index_field(text) -%}
|
|
<td class="table-field-index">
|
|
<span class="visually-hidden">Row </span>{{ text }}
|
|
</td>
|
|
{%- endmacro %}
|
|
|
|
{% macro text_field(text, status='') -%}
|
|
{% call field(status=status) %}
|
|
{{ text }}
|
|
{% endcall %}
|
|
{%- endmacro %}
|
|
|
|
{% macro link_field(text, link) -%}
|
|
{% call field() %}
|
|
<a href="{{ link }}">{{ text }}</a>
|
|
{% endcall %}
|
|
{%- endmacro %}
|
|
|
|
{% macro edit_field(text, link) -%}
|
|
{% call field(align='right') %}
|
|
<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 %}
|
|
|
|
|
|
{% macro notification_status_field(notification) %}
|
|
{% call field(status=notification.status|format_notification_status_as_field_status, align='right') %}
|
|
{% if notification.status|format_notification_status_as_url %}
|
|
<a href="{{ notification.status|format_notification_status_as_url }}">
|
|
{% endif %}
|
|
{{ notification.status|format_notification_status(
|
|
notification.template.template_type
|
|
) }}
|
|
{% if notification.status|format_notification_status_as_url %}
|
|
</a>
|
|
{% endif %}
|
|
<span class="status-hint">
|
|
{{ notification.status|format_notification_status_as_time(
|
|
notification.created_at|format_datetime_short,
|
|
(notification.updated_at or notification.created_at)|format_datetime_short
|
|
) }}
|
|
</span>
|
|
{% endcall %}
|
|
{% endmacro %}
|