From 18e8b570d7bd6bf98b97ef8c3124a04d23d37b97 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 20 Jun 2017 10:03:39 +0100
Subject: [PATCH] Make click areas bigger on template picker
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.

This commit expands the clickable area of links to templates to include
hint text underneath which states the type of template.

1. https://en.wikipedia.org/wiki/Fitts%27s_law
---
 app/assets/stylesheets/components/message.scss | 13 +++++++++++++
 app/templates/views/templates/choose.html      |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index bcac5f7a5..fadc6ef5e 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/app/assets/stylesheets/components/message.scss
@@ -3,6 +3,19 @@
   &-name {
     @include bold-24;
     margin: 20px 0 5px 0;
+
+    a {
+      display: block;
+      margin-bottom: -$gutter;
+      padding-bottom: $gutter;
+    }
+
+  }
+
+  &-type {
+    color: $secondary-text-colour;
+    margin-bottom: $gutter / 3;
+    pointer-events: none;
   }
 
   &-updated-at {
diff --git a/app/templates/views/templates/choose.html b/app/templates/views/templates/choose.html
index 1d3590312..4b89f9b7b 100644
--- a/app/templates/views/templates/choose.html
+++ b/app/templates/views/templates/choose.html
@@ -64,7 +64,7 @@
           <h2 class="message-name">
             <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=template.id) }}">{{ template.name }}</a>
           </h2>
-          <p class="hint bottom-gutter-1-3">
+          <p class="message-type">
             {{ message_count_label(1, template.template_type, suffix='')|capitalize }} template
           </p>
         </div>