From 89b88ee4cb681267177570a6b79db8ff1f4afdf3 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 12 Feb 2020 10:45:15 +0000
Subject: [PATCH] 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
---
 .../stylesheets/components/show-more.scss     |  6 ++
 app/assets/stylesheets/components/table.scss  | 59 +++++++++++++++++++
 app/assets/stylesheets/views/dashboard.scss   | 35 +++--------
 app/templates/components/show-more.html       |  7 ++-
 app/templates/components/table.html           |  7 +--
 app/templates/views/dashboard/_upcoming.html  |  1 -
 .../dashboard/all-template-statistics.html    |  6 +-
 .../views/dashboard/template-statistics.html  | 14 +++--
 8 files changed, 91 insertions(+), 44 deletions(-)

diff --git a/app/assets/stylesheets/components/show-more.scss b/app/assets/stylesheets/components/show-more.scss
index ed7742f0a..8c26cdf56 100644
--- a/app/assets/stylesheets/components/show-more.scss
+++ b/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;
+}
diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index d8572e776..d303e1e07 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss
index 76a5e834c..b300d5be2 100644
--- a/app/assets/stylesheets/views/dashboard.scss
+++ b/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;
diff --git a/app/templates/components/show-more.html b/app/templates/components/show-more.html
index 77803eced..930a62113 100644
--- a/app/templates/components/show-more.html
+++ b/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 %}
diff --git a/app/templates/components/table.html b/app/templates/components/table.html
index 8cbce0241..48c63ebdc 100644
--- a/app/templates/components/table.html
+++ b/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 %}
diff --git a/app/templates/views/dashboard/_upcoming.html b/app/templates/views/dashboard/_upcoming.html
index 95b0572f7..24894ec78 100644
--- a/app/templates/views/dashboard/_upcoming.html
+++ b/app/templates/views/dashboard/_upcoming.html
@@ -36,7 +36,6 @@
           ) }}
         {% endcall %}
       {% endcall %}
-      {{ show_more() }}
     </div>
   {% endif %}
 </div>
diff --git a/app/templates/views/dashboard/all-template-statistics.html b/app/templates/views/dashboard/all-template-statistics.html
index 202e3bc9c..922aaebb3 100644
--- a/app/templates/views/dashboard/all-template-statistics.html
+++ b/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 %}
diff --git a/app/templates/views/dashboard/template-statistics.html b/app/templates/views/dashboard/template-statistics.html
index cb3554afa..919bb2558 100644
--- a/app/templates/views/dashboard/template-statistics.html
+++ b/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 %}