Merge pull request #701 from alphagov/label-template-statistics

Add some words to the template statistics on the dashboard

app/assets/stylesheets/components/table.scss

@@ -14,9 +14,10 @@
     table-layout: fixed;
   }
 
-  .table-field-headings {
+  .table-field-headings,
+  .table-field-headings-visible {
     th {
-      padding: 0 0 5px 0;
+      padding-bottom: 5px;
     }
   }
 

app/assets/stylesheets/views/dashboard.scss

@@ -49,7 +49,6 @@
     color: $govuk-blue;
     max-width: 100%;
     background: $white;
-    margin-bottom: $gutter-two-thirds;
   }
 
 }

app/templates/views/dashboard/template-statistics.html

@@ -1,41 +1,46 @@
 {% from "components/big-number.html" import big_number %}
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/big-number.html" import big_number %}
+{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
 
-<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 }}
+<div class='dashboard-table'>
+  {% call(item, row_number) list_table(
+    template_statistics,
+    caption="Templates used",
+    caption_visible=False,
+    empty_message='',
+    field_headings=[
+      'Template',
+      'Messages sent'
+    ],
+    field_headings_visible=True
+  ) %}
+    {% call row_heading() %}
+      <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>
+    {% endcall %}
+    {% call field() %}
+      {% if template_statistics|length > 1 %}
+        <span class="spark-bar">
+          <span style="width: {{ item.usage_count / most_used_template_count * 100 }}%">
+            {{ big_number(
+              item.usage_count,
+              smallest=True
+            ) }}
           </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 }}%">
-              {{ 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 %}
-          <span class="heading-small">
-            {{ item.usage_count }}
-            {{ message_count_label(item.usage_count, item.template.template_type) }}
-          </span>
-        {% endif %}
-      </dd>
-
-    </div>
-  {% endfor %}
-</dl>
+      {% else %}
+        <span class="heading-small">
+          {{ big_number(
+            item.usage_count,
+            smallest=True
+          ) }}
+        </span>
+      {% endif %}
+    {% endcall %}
+  {% endcall %}
+</div>

app/templates/views/dashboard/today.html

@@ -45,7 +45,7 @@
     {% include 'views/dashboard/template-statistics.html' %}
     {{ show_more(
       url_for('.template_history', service_id=current_service.id),
-      'See all templates sent this year'
+      'See all templates used this year'
     ) }}
   {% endif %}