mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-22 03:15:07 -05: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.
28 lines
756 B
HTML
28 lines
756 B
HTML
{% from 'components/big-number.html' import big_number %}
|
|
|
|
{% macro pill(
|
|
items=[],
|
|
current_value=None,
|
|
big_number_args={'smaller': True}
|
|
) %}
|
|
<ul role='tablist' class='pill'>
|
|
{% for label, option, link, count in items %}
|
|
{% if current_value == option %}
|
|
<li aria-selected='true' role='tab'>
|
|
<div class='pill-selected-item' tabindex='0'>
|
|
{% else %}
|
|
<li aria-selected='false' role='tab'>
|
|
<a href="{{ link }}">
|
|
{% endif %}
|
|
{{ big_number(count, **big_number_args) }}
|
|
<div class="pill-label">{{ label }}</div>
|
|
{% if current_value == option %}
|
|
</div>
|
|
{% else %}
|
|
</a>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endmacro %}
|