From 43ef3e86ae9e1578aacc42db07c913ea8d253abd Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 29 Apr 2016 15:47:31 +0100
Subject: [PATCH] Make big numbers on the homepage linkable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The big numbers on the home page relate directly to the notifications on
the notification page. So let’s link them. With a _hyper_ link.

This commit actually adds two links, one of which is semantically
correct, and one of which is visually correct, ie makes the whole black
area of the box clickable/hoverable.
---
 .../stylesheets/components/big-number.scss    | 25 +++++++++++++++++++
 app/templates/components/big-number.html      | 21 +++++++++++++---
 app/templates/views/dashboard/today.html      |  6 +++--
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/components/big-number.scss b/app/assets/stylesheets/components/big-number.scss
index 5a7d8cd65..8031ad980 100644
--- a/app/assets/stylesheets/components/big-number.scss
+++ b/app/assets/stylesheets/components/big-number.scss
@@ -16,13 +16,38 @@
   @extend %big-number;
   background: $text-colour;
   color: $white;
+  position: relative;
 
   .big-number {
     padding: 15px;
+    position: relative;
+  }
+
+  .big-number-overlay-link {
+
+    background: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: transparent;
+    width: 100%;
+    height: 100%;
+
+    &:hover {
+      background: rgba($text-colour, 0.2);
+    }
+
   }
 
   .big-number-label {
+
     padding-bottom: 0;
+
+    &:link,
+    &:visited {
+      color: $white;
+    }
+
   }
 
   %big-number-status,
diff --git a/app/templates/components/big-number.html b/app/templates/components/big-number.html
index 6127c0564..c856544a4 100644
--- a/app/templates/components/big-number.html
+++ b/app/templates/components/big-number.html
@@ -1,18 +1,31 @@
-{% macro big_number(number, label) %}
+{% macro big_number(number, label, label_link=None) %}
   <div class="big-number{% if right_aligned %}-right-aligned{% endif %}">
     {% if number is number %}
       {{ "{:,}".format(number) }}
     {% else %}
       {{ number }}
     {% endif %}
-    <span class="big-number-label">{{ label }}</span>
+    {% if label_link %}
+      <a class="big-number-label" href="{{ label_link }}">{{ label }}</a>
+      <a class="big-number-overlay-link" href="{{ label_link }}" aria-hidden="true"></a>
+    {% else %}
+      <span class="big-number-label">{{ label }}</span>
+    {% endif %}
   </div>
 {% endmacro %}
 
 
-{% macro big_number_with_status(number, label, failures, failure_percentage, danger_zone=False, failure_link=None) %}
+{% macro big_number_with_status(
+  number,
+  label,
+  failures,
+  failure_percentage,
+  danger_zone=False,
+  failure_link=None,
+  label_link=None
+) %}
   <div class="big-number-with-status">
-    {{ big_number(number, label) }}
+    {{ big_number(number, label, label_link) }}
     <div class="big-number-status{% if danger_zone %}-failing{% endif %}">
       {% if failures %}
         {% if failure_link %}
diff --git a/app/templates/views/dashboard/today.html b/app/templates/views/dashboard/today.html
index b12390ccf..42fd196b4 100644
--- a/app/templates/views/dashboard/today.html
+++ b/app/templates/views/dashboard/today.html
@@ -18,7 +18,8 @@
         statistics.emails_failed,
         statistics.get('emails_failure_rate', 0.0),
         statistics.get('emails_failure_rate', 0)|float > 3,
-        failure_link=url_for(".view_notifications", service_id=current_service.id, template_type='email', status='failed')
+        failure_link=url_for(".view_notifications", service_id=current_service.id, template_type='email', status='failed'),
+        label_link=url_for(".view_notifications", service_id=current_service.id, template_type='email', status='delivered,failed')
       ) }}
     </div>
     <div class="column-half">
@@ -28,7 +29,8 @@
         statistics.sms_failed,
         statistics.get('sms_failure_rate', 0.0),
         statistics.get('sms_failure_rate', 0)|float > 3,
-        failure_link=url_for(".view_notifications", service_id=current_service.id, template_type='sms', status='failed')
+        failure_link=url_for(".view_notifications", service_id=current_service.id, template_type='sms', status='failed'),
+        label_link=url_for(".view_notifications", service_id=current_service.id, template_type='sms', status='delivered,failed')
       ) }}
     </div>
   </div>