Make big numbers on the homepage linkable

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.

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,

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 %}

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>