mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-22 00:49:23 -04:00
43ef3e86ae
The big numbers on the home page relate directly to the notifications on the notification page. So let’s link them. With a _hyper_ link. This commit actually adds two links, one of which is semantically correct, and one of which is visually correct, ie makes the whole black area of the box clickable/hoverable.
44 lines
1.2 KiB
HTML
44 lines
1.2 KiB
HTML
{% macro big_number(number, label, label_link=None) %}
|
||
<div class="big-number{% if right_aligned %}-right-aligned{% endif %}">
|
||
{% if number is number %}
|
||
{{ "{:,}".format(number) }}
|
||
{% else %}
|
||
{{ number }}
|
||
{% endif %}
|
||
{% if label_link %}
|
||
<a class="big-number-label" href="{{ label_link }}">{{ label }}</a>
|
||
<a class="big-number-overlay-link" href="{{ label_link }}" aria-hidden="true"></a>
|
||
{% else %}
|
||
<span class="big-number-label">{{ label }}</span>
|
||
{% endif %}
|
||
</div>
|
||
{% endmacro %}
|
||
|
||
|
||
{% macro big_number_with_status(
|
||
number,
|
||
label,
|
||
failures,
|
||
failure_percentage,
|
||
danger_zone=False,
|
||
failure_link=None,
|
||
label_link=None
|
||
) %}
|
||
<div class="big-number-with-status">
|
||
{{ big_number(number, label, label_link) }}
|
||
<div class="big-number-status{% if danger_zone %}-failing{% endif %}">
|
||
{% if failures %}
|
||
{% if failure_link %}
|
||
<a href="{{ failure_link }}">
|
||
{{ "{:,}".format(failures) }} failed – {{ failure_percentage }}%
|
||
</a>
|
||
{% else %}
|
||
{{ "{:,}".format(failures) }} failed – {{ failure_percentage }}%
|
||
{% endif %}
|
||
{% else %}
|
||
No failures
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endmacro %}
|