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 1/2] 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>

From 02f8e4e14b572ee5408b1e3fae978f53bcbe507f Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 20 Jun 2017 10:04:17 +0100
Subject: [PATCH 2/2] Remove unused CSS

This stuff if leftover from when we used to have the sidebar of links
next to each template.
---
 .../stylesheets/components/message.scss       | 26 -------------------
 1 file changed, 26 deletions(-)

diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index fadc6ef5e..37de83af6 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/app/assets/stylesheets/components/message.scss
@@ -18,30 +18,4 @@
     pointer-events: none;
   }
 
-  &-updated-at {
-    @include copy-16;
-    color: $secondary-text-colour;
-    margin: 0 0 5px 0;
-  }
-
-  &-use-links {
-
-    @include copy-16;
-    margin-top: -7px;
-    color: $secondary-text-colour;
-
-    a {
-      @include core-19;
-      display: block;
-      margin-bottom: 5px;
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-
-    }
-
-  }
-
 }