Merge pull request #3295 from alphagov/restyle-template-stats

Restyle template statistics and received text messages

app/assets/stylesheets/components/banner.scss

@@ -137,3 +137,58 @@
   }
 
 }
+
+.banner-dashboard {
+
+  $baseline-shift: 5px;
+
+  display: block; // for browsers that don't support flexbox
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  padding: ($gutter-half - 1px) 0 ($gutter-half + 1px) 0;
+  border-top: 1px solid $border-colour;
+  border-bottom: 1px solid $border-colour;
+  margin-bottom: $gutter;
+  text-decoration: none;
+
+  &:focus {
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;    
+  }
+
+  &-count,
+  &-meta {
+    float: left; // for browsers that don't support flexbox
+  }
+
+  &-count {
+    @include govuk-font(36, $weight: bold);
+    padding-right: 8px;
+    position: relative;
+    // remove the top of the extra line-height this introduces
+    top: $baseline-shift;
+    margin-top: -$baseline-shift;
+    flex: 0 1 0.85ch;
+  }
+
+  &-count-label {
+    @include govuk-font(24, $weight: bold);
+    text-decoration: underline;
+    padding-right: govuk-spacing(6);
+    margin: 10px 0px 5px; // 10px includes 5px extra to counter the -5px margin-top on the count item
+    flex: 2 1 auto;
+  }
+
+  &-meta {
+    @include govuk-font(19);
+    float: right;
+    text-align: right;
+    flex: initial;
+  }
+
+  & + .banner-dashboard {
+    margin-top: -$gutter;
+    border-top: none;
+  }
+}

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

@@ -4,7 +4,7 @@
   @include core-16;
   display: block;
   padding: 0 0;
-  margin: $gutter-half 0 $gutter 0;
+  margin: $gutter-half 0 $gutter-half 0;
   text-align: center;
   border-top: 1px solid $border-colour;
 
@@ -34,7 +34,8 @@
 
 }
 
-.show-more-empty {
+.show-more-no-border {
   @extend %show-more;
-  margin-top: -10px;
+  border-top: 1px solid transparent;
+  margin-top: -5px;
 }

app/assets/stylesheets/components/table.scss

@@ -51,6 +51,66 @@
 
 }
 
+.template-statistics-table {
+
+  .table {
+    table-layout: fixed;
+  }
+
+  .table-heading {
+    @include core-19;
+    margin: 0 0 10px 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/main/views/dashboard.py

@@ -280,15 +280,8 @@ def get_dashboard_partials(service_id):
     all_statistics = template_statistics_client.get_template_statistics_for_service(service_id, limit_days=7)
     template_statistics = aggregate_template_usage(all_statistics)
     stats = aggregate_notifications_stats(all_statistics)
-    column_width, max_notifiction_count = get_column_properties(3)
 
     dashboard_totals = get_dashboard_totals(stats),
-    highest_notification_count = max(
-        sum(
-            value[key] for key in {'requested', 'failed', 'delivered'}
-        )
-        for key, value in dashboard_totals[0].items()
-    )
     free_sms_allowance = billing_api_client.get_free_sms_fragment_limit_for_year(
         current_service.id,
         get_current_financial_year(),
@@ -312,10 +305,6 @@ def get_dashboard_partials(service_id):
             'views/dashboard/_totals.html',
             service_id=service_id,
             statistics=dashboard_totals[0],
-            column_width=column_width,
-            smaller_font_size=(
-                highest_notification_count > max_notifiction_count
-            ),
         ),
         'template-statistics': render_template(
             'views/dashboard/template-statistics.html',
@@ -330,7 +319,6 @@ def get_dashboard_partials(service_id):
         ),
         'usage': render_template(
             'views/dashboard/_usage.html',
-            column_width=column_width,
             **calculate_usage(yearly_usage, free_sms_allowance),
         ),
     }
@@ -505,10 +493,3 @@ def get_tuples_of_financial_years(
         )
         for year in range(start, end + 1)
     )
-
-
-def get_column_properties(number_of_columns):
-    return {
-        2: ('column-half', 999999999),
-        3: ('column-third', 99999),
-    }.get(number_of_columns)

app/templates/components/show-more.html

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

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/_inbox.html

@@ -1,21 +1,20 @@
 {% from "components/big-number.html" import big_number, big_number_with_status %}
+{% from "components/message-count-label.html" import message_count_label %}
 
 <div class="ajax-block">
   {% if inbound_sms_summary != None %}
-    <div id="total-received" class="big-number-meta-wrapper">
-      {{
-        big_number_with_status(
-          inbound_sms_summary.count,
-          'text messages received',
-          link=url_for('.inbox', service_id=current_service.id),
-          show_failures=False
-        )
-      }}
-      <div class="big-number-meta">
-        {% if inbound_sms_summary.most_recent %}
+    <a id="total-received" class="govuk-link govuk-link--no-visited-state banner-dashboard" href="{{ url_for('.inbox', service_id=current_service.id) }}">
+      <span class="banner-dashboard-count">
+        {{ inbound_sms_summary.count|format_thousands }}
+      </span>
+      <span class="banner-dashboard-count-label">
+        {{ message_count_label(inbound_sms_summary.count, 'sms', suffix='received') }}
+      </span>
+      {% if inbound_sms_summary.most_recent %}
+        <span class="banner-dashboard-meta">
           latest message {{ inbound_sms_summary.most_recent | format_delta }}
-        {% endif %}
-      </div>
-    </div>
+        </span>
+      {% endif %}
+    </a>
   {% endif %}
 </div>

app/templates/views/dashboard/_totals.html

@@ -3,7 +3,7 @@
 
 <div class="ajax-block-container">
   <div class="grid-row">
-    <div id="total-email" class="{{column_width}}">
+    <div id="total-email" class="column-third">
       {{ big_number_with_status(
         statistics['email']['requested'],
         message_count_label(statistics['email']['requested'], 'email', suffix='sent'),
@@ -12,10 +12,10 @@
         statistics['email']['show_warning'],
         failure_link=url_for(".view_notifications", service_id=service_id, message_type='email', status='failed'),
         link=url_for(".view_notifications", service_id=service_id, message_type='email', status='sending,delivered,failed'),
-        smaller=smaller_font_size
+        smaller=True,
       ) }}
     </div>
-    <div id="total-sms" class="{{column_width}}">
+    <div id="total-sms" class="column-third">
       {{ big_number_with_status(
         statistics['sms']['requested'],
         message_count_label(statistics['sms']['requested'], 'sms', suffix='sent'),
@@ -24,10 +24,10 @@
         statistics['sms']['show_warning'],
         failure_link=url_for(".view_notifications", service_id=service_id, message_type='sms', status='failed'),
         link=url_for(".view_notifications", service_id=service_id, message_type='sms', status='sending,delivered,failed'),
-        smaller=smaller_font_size
+        smaller=True,
       ) }}
     </div>
-    <div id="total-letters" class="{{column_width}}">
+    <div id="total-letters" class="column-third">
       {{ big_number_with_status(
         statistics['letter']['requested'],
         message_count_label(statistics['letter']['requested'], 'letter', suffix='sent'),
@@ -36,7 +36,7 @@
         statistics['letter']['show_warning'],
         failure_link=url_for(".view_notifications", service_id=service_id, message_type='letter', status='failed'),
         link=url_for(".view_notifications", service_id=service_id, message_type='letter', status=''),
-        smaller=smaller_font_size
+        smaller=True,
       ) }}
     </div>
   </div>

app/templates/views/dashboard/_upcoming.html

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

app/templates/views/dashboard/_usage.html

@@ -1,12 +1,12 @@
 {% from "components/big-number.html" import big_number %}
 
 <div class='grid-row ajax-block-container'>
-  <div class='{{ column_width }}'>
+  <div class='column-third'>
     <div class="keyline-block">
       {{ big_number("Unlimited", 'free email allowance', smaller=True) }}
     </div>
   </div>
-  <div class='{{ column_width }}'>
+  <div class='column-third'>
     <div class="keyline-block">
       {% if sms_chargeable %}
         {{ big_number(
@@ -20,7 +20,7 @@
       {% endif %}
     </div>
   </div>
-  <div class='{{ column_width }}'>
+  <div class='column-third'>
     <div class="keyline-block">
       {{ big_number(
         letter_cost,

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,39 +6,41 @@
 
 <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",
-        caption_visible=False,
+        caption="By template",
+        caption_visible=True,
         empty_message='',
         field_headings=[
           'Template',
           'Messages sent'
         ],
-        field_headings_visible=True
+        field_headings_visible=False
       ) %}
 
         {% 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 %}