Make template graphs look consistent with page

The graphs of template usage feel a bit weird to me now.

1. They are counts of messages, but the numbers are very small
   not big like we do everywhere else (eg the counts on a job)

2. There’s a lot of blue, especially for something that you can’t
   click

This commit makes the numbers bigger and the bar chart grey.
This commit is contained in:
Chris Hill-Scott
2016-06-07 16:35:03 +01:00
parent d8c1a5ef8a
commit e5d2514846
6 changed files with 58 additions and 29 deletions

View File

@@ -1,26 +1,40 @@
{% from "components/message-count-label.html" import message_count_label %}
{% from "components/big-number.html" import big_number %}
<dl>
{% for item in template_statistics %}
<div class="grid-row">
<dt class="column-half">
<span class="spark-bar-label">
<a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template.id) }}">{{ item.template.name }}</a>
<span class="file-list-hint">
{{ message_count_label(1, item.template.template_type, suffix='template')|capitalize }}
</span>
</span>
</dt>
<dd class="column-half">
{% if template_statistics|length > 1 %}
<span class="spark-bar">
<span style="width: {{ item.usage_count / most_used_template_count * 100 }}%"></span>
{{ item.usage_count }} {{ message_count_label(item.usage_count, item.template.template_type) }}
</span>
<span class="spark-bar">
<span style="width: {{ item.usage_count / most_used_template_count * 100 }}%">
{{ big_number(
item.usage_count,
smallest=True
) }}
<span class="visually-hidden">
{{ message_count_label(item.usage_count, item.template.template_type) }}
</span>
</span>
</span>
{% else %}
{{ item.usage_count }} {{ message_count_label(item.usage_count, item.template.template_type) }}
<span class="heading-small">
{{ item.usage_count }}
{{ message_count_label(item.usage_count, item.template.template_type) }}
</span>
{% endif %}
</dd>
</div>
{% endfor %}
</dl>
</dl>

View File

@@ -3,7 +3,7 @@
{% from "components/previous-next-navigation.html" import previous_next_navigation %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/pill.html" import pill %}
{% from "components/message-count-label.html" import message_count_label %}
{% from "components/message-count-label.html" import message_count_label, recipient_count_label %}
{% block page_title %}
{{ message_count_label(99, message_type, suffix='') | capitalize }} GOV.UK Notify