Restyle template statistics

This makes the template statistics section of the dashboard look less
like its own weird thing and more like:
- the templates page
- the upcoming changes to the styling of the received text messages
  banner on the dashboard

app/assets/stylesheets/components/show-more.scss

@@ -38,3 +38,9 @@
   @extend %show-more;
   margin-top: -10px;
 }
+
+.show-more-no-border {
+  @extend %show-more;
+  border-top: 1px solid transparent;
+  margin-top: -5px;
+}

app/assets/stylesheets/components/table.scss

@@ -51,6 +51,65 @@
 
 }
 
+.template-statistics-table {
+
+  .table {
+    table-layout: fixed;
+  }
+
+  .table-field-heading {
+    font-size: 0;
+  }
+
+  .table-field-heading-first {
+    width: 52.5%;
+  }
+
+  .table-row {
+    th {
+      display: table-cell;
+      width: 52.5%;
+      font-weight: normal;
+
+      .hint,
+      p {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  &-template-name {
+
+    @include bold-24;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 10px 0 32px 0;
+    margin: -10px 0 -32px 0;
+
+    &:focus {
+
+      color: $text-colour;
+
+      & + .template-statistics-table-hint {
+        color: $text-colour;
+      }
+
+    }
+
+  }
+
+  &-hint {
+    @include core-19;
+    color: $secondary-text-colour;
+    pointer-events: none;
+  }
+
+}
+
 .settings-table {
 
   table {

app/assets/stylesheets/views/dashboard.scss

@@ -1,15 +1,7 @@
 .dashboard {
 
-  table {
-    th {
-      @include core-19;
-      border-bottom: 0;
-    }
-
-    td {
-      @include core-19;
-      border: 0;
-    }
+  th {
+    font-weight: normal;
   }
 
   > .heading-medium:first-of-type {
@@ -34,15 +26,17 @@
   color: $text-colour;
   text-align: left;
 
-  span {
+  &-bar {
+    @include bold-27;
     box-sizing: border-box;
     display: inline-block;
     overflow: visible;
     background: $panel-colour;
     color: $black;
-    padding: 5px 5px 2px 5px;
-    text-indent: -2px;
-    margin: 3px 0 5px 0;
+    padding: 10px 6px 8px 0;
+    text-indent: 12px;
+    text-align: right;
+    margin: 2px 0 1px 0;
     transition: width 0.6s ease-in-out;
   }
 
@@ -84,19 +78,6 @@
   color: $error-colour;
 }
 
-.template-usage-table {
-
-  border-top: 1px solid $border-colour;
-  border-bottom: 1px solid $border-colour;
-  margin-top: 10px;
-  margin-bottom: $gutter * 1.3333;
-
-  .table {
-    margin-bottom: 5px;
-  }
-
-}
-
 .align-with-message-body {
   display: block;
   margin-top: $gutter * 5 / 6;

app/templates/components/show-more.html

@@ -1,6 +1,9 @@
-{% macro show_more(url=None, label=None) %}
+{% macro show_more(url=None, label=None, with_border=True) %}
   {% if url and label %}
-    <a href="{{ url }}" class="show-more"><span>{{ label }}</span></a>
+    <a
+      href="{{ url }}"
+      class="show-more{% if not with_border %}-no-border{% endif %}"
+    ><span>{{ label }}</span></a>
   {% else %}
     <span class="show-more-empty"></span>
   {% endif %}

app/templates/components/table.html

@@ -188,11 +188,8 @@
 ) %}
   {% call field(align='right') %}
     <span {% if id %}id="{{ id }}"{% endif %} class="spark-bar">
-      <span style="width: {{ count / max_count * 100 }}%">
-        {{ big_number(
-          count,
-          smallest=True
-        ) }}
+      <span class="spark-bar-bar" style="width: {{ count / max_count * 100 }}%">
+        {{ '{:,.0f}'.format(count) }}
       </span>
     </span>
   {% endcall %}

app/templates/views/dashboard/_upcoming.html

@@ -36,7 +36,6 @@
           ) }}
         {% endcall %}
       {% endcall %}
-      {{ show_more() }}
     </div>
   {% endif %}
 </div>

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

@@ -28,7 +28,7 @@
           No messages sent
         </p>
       {% else %}
-        <div class='dashboard-table template-usage-table'>
+        <div class='template-statistics-table'>
           {% call(item, row_number) list_table(
             month.templates_used,
             caption=month.name,
@@ -41,8 +41,8 @@
             field_headings_visible=False
           ) %}
             {% call row_heading() %}
-              <a class="file-list-filename" href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}">{{ item.name }}</a>
-              <span class="file-list-hint">
+              <a class="template-statistics-table-template-name" href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}">{{ item.name }}</a>
+              <span class="template-statistics-table-hint">
                 {{ message_count_label(1, item.type, suffix='template')|capitalize }}
               </span>
             {% endcall %}

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

@@ -6,7 +6,7 @@
 
 <div class="ajax-block-container">
   {% if template_statistics|length > 1 %}
-    <div class='dashboard-table'>
+    <div class='template-statistics-table'>
       {% call(item, row_number) list_table(
         template_statistics,
         caption="Templates used",
@@ -21,24 +21,26 @@
 
         {% call row_heading() %}
           {% if item.is_precompiled_letter %}
-          <span class="file-list-filename">
+          <span class="template-statistics-table-template-name">
           Provided as PDF
           </span>
-          <span class="file-list-hint">
+          <span class="template-statistics-table-hint">
             Letter
           </span>
           {% else %}
-          <a class="file-list-filename" href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template_id) }}">{{ item.template_name }}</a>
-          <span class="file-list-hint">
+          <a class="template-statistics-table-template-name" href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template_id) }}">{{ item.template_name }}</a>
+          <span class="template-statistics-table-hint">
             {{ message_count_label(1, item.template_type, suffix='template')|capitalize }}
           </span>
           {% endif %}
         {% endcall %}
+
         {{ spark_bar_field(item.count, most_used_template_count, id=item.template_id) }}
       {% endcall %}
       {{ show_more(
         url_for('.template_usage', service_id=current_service.id),
-        'See templates used by month'
+        'See templates used by month',
+        with_border=False
       ) }}
     </div>
   {% endif %}