From b95a7403b416085250cb10402f7d7b260a7e45bd Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 15 Jan 2018 11:35:45 +0000
Subject: [PATCH] Make clickable area of link bigger
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fitt’s law[1] states that bigger click areas are quicker and easier for
people to click. Therefore we should make click areas as big as
possible, without being ambiguous about what the outcome of clicking
will be or increasing the potential for accidental clicks.

The click areas of the row numbers in the table were very small – this
commits makes them as big as the containing table cells.

Uses this technique to achieve the bigger click areas without disrupting
the layout:
http://authenticff.com/journal/css-pro-tip-expanding-clickable-area

1. https://en.wikipedia.org/wiki/Fitts%27s_law
---
 app/assets/stylesheets/components/table.scss | 23 ++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index 5bd4c68c0..e7ad5f38a 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/app/assets/stylesheets/components/table.scss
@@ -129,8 +129,31 @@
   }
 
   &-index {
+
     @include bold-16;
     width: 15px;
+
+    a {
+
+      &:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+
+      &:focus {
+
+        &:before {
+          background: $yellow;
+          z-index: -1;
+        }
+
+      }
+
+    }
   }
 
   p {