Make template usage on dashboard easier to scan

The dashboard looked a bit table-y. This commit makes four main changes:

- show a bar chart (drawn in CSS) for template usage (only shown if
  you’ve used more than one template recently)
- only break down template usage by template name, not template type
  (because that’s happening with the big numbers)
- change the style of the ‘show more’ links under each section so that
  they are all consistent, and a little less busy (one less keyline)
- remove the ‘recent templates‘ title so that the first two sections of
  the page group under ‘in the last 7 days’
This commit is contained in:
Chris Hill-Scott
2016-05-11 15:05:40 +01:00
parent cccf2c4590
commit 1b8236f5f8
12 changed files with 182 additions and 102 deletions

View File

@@ -1,23 +1,24 @@
{% from "components/table.html" import list_table, field, hidden_field_heading, right_aligned_field_heading %}
{% call(item, row_number) list_table(
template_statistics,
caption="Templates",
caption_visible=True,
empty_message='You havent used any templates {}'.format(period),
field_headings=['Template', hidden_field_heading('Type'), hidden_field_heading('Messages sent')],
field_headings_visible=False
) %}
{% call field() %}
<a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template.id) }}">
{{ item.template.name }}
</a>
{% endcall %}
{% call field(align='right') %}
{{ item.usage_count }}
{% endcall %}
{% call field() %}
{{'text messages sent' if 'sms' == item.template.template_type else 'emails sent'}}
{% endcall %}
{% endcall %}
<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>
</dt>
<dd class="column-half">
<span class="spark-bar">
<span style="width: {{ item.usage_count / most_used_template_count * 66.6 }}%"></span>
{{ item.usage_count }} <span class="visuallyhidden">messages sent</span>
</span>
</dd>
</div>
{% endfor %}
</dl>