mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-05-05 08:31:00 -04:00
281c54b80b
With sending, delivered and failed all on one line there’s not much space. When these numbers get relatively big (in the 000s) they can start mushing into each other. This commit makes them smaller so that they remain separate.
55 lines
1.7 KiB
HTML
55 lines
1.7 KiB
HTML
{% macro big_number(number, label, label_link=None, currency='', smaller=False, smallest=False) %}
|
||
<div class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
|
||
<div class="big-number-number">
|
||
{% if number is number %}
|
||
{% if currency %}
|
||
{{ "{}{:,.2f}".format(currency, number) }}
|
||
{% else %}
|
||
{{ "{:,}".format(number) }}
|
||
{% endif %}
|
||
{% else %}
|
||
{{ number }}
|
||
{% endif %}
|
||
</div>
|
||
{% 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>
|
||
{% elif label %}
|
||
<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,
|
||
show_more_link=None,
|
||
show_more_text=''
|
||
) %}
|
||
<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>
|
||
{% if show_more_link and show_more_text %}
|
||
<a href="{{ show_more_link }}" class="big-number-with-status-show-more-link">{{ show_more_text }}</a>
|
||
{% endif %}
|
||
{% endmacro %}
|