From 010886e5bebc6f904dc9c5de8bf5124740778d0e Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 20 Jun 2017 09:50:55 +0100
Subject: [PATCH] Make clickable areas bigger on tables with links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Generally, bigger click areas are better[1], as long as they don’t cause
ambiguity or accidental clicks.

This commit expands the clickable area of tables where the left-hand
column is a link to include the meta information under the link.

We can’t make the whole row clickable, because sometimes we have links
in the right hand column which go to a different place

This commit also removes the CSS for `.spark-bar-label`, because these
elements are visually identical to `file-list`s now.

1. https://en.wikipedia.org/wiki/Fitts%27s_law
---
 app/assets/stylesheets/views/dashboard.scss      | 16 +++++-----------
 .../views/dashboard/all-template-statistics.html |  8 +++-----
 .../views/dashboard/template-statistics.html     |  8 +++-----
 3 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss
index ddd35428a..c3bc7b9b7 100644
--- a/app/assets/stylesheets/views/dashboard.scss
+++ b/app/assets/stylesheets/views/dashboard.scss
@@ -46,17 +46,6 @@
     transition: width 0.6s ease-in-out;
   }
 
-  &-label {
-    @include bold-19;
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: $govuk-blue;
-    max-width: 100%;
-    background: $white;
-  }
-
 }
 
 .file-list {
@@ -67,12 +56,17 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    padding-bottom: 30px;
+    padding-top: 10px;
+    margin-bottom: -30px;
+    margin-top: -10px;
   }
 
   &-hint {
     @include core-16;
     display: block;
     color: $secondary-text-colour;
+    pointer-events: none;
   }
 
 }
diff --git a/app/templates/views/dashboard/all-template-statistics.html b/app/templates/views/dashboard/all-template-statistics.html
index a0c803fce..202e3bc9c 100644
--- a/app/templates/views/dashboard/all-template-statistics.html
+++ b/app/templates/views/dashboard/all-template-statistics.html
@@ -41,11 +41,9 @@
             field_headings_visible=False
           ) %}
             {% call row_heading() %}
-              <span class="spark-bar-label">
-                <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}">{{ item.name }}</a>
-                <span class="file-list-hint">
-                  {{ message_count_label(1, item.type, suffix='template')|capitalize }}
-                </span>
+              <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">
+                {{ message_count_label(1, item.type, suffix='template')|capitalize }}
               </span>
             {% endcall %}
             {{ spark_bar_field(item.requested_count, most_used_template_count) }}
diff --git a/app/templates/views/dashboard/template-statistics.html b/app/templates/views/dashboard/template-statistics.html
index 2c3833655..94564d0e3 100644
--- a/app/templates/views/dashboard/template-statistics.html
+++ b/app/templates/views/dashboard/template-statistics.html
@@ -17,11 +17,9 @@
   ) %}
 
     {% call row_heading() %}
-      <span class="spark-bar-label">
-        <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template_id) }}">{{ item.template_name }}</a>
-        <span class="file-list-hint">
-          {{ message_count_label(1, item.template_type, suffix='template')|capitalize }}
-        </span>
+      <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">
+        {{ message_count_label(1, item.template_type, suffix='template')|capitalize }}
       </span>
     {% endcall %}
     {% if template_statistics|length > 1 %}