From ad5fc9a5831c68bd384186fc6c0f98a48fb20963 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 23 May 2017 14:21:59 +0100
Subject: [PATCH 1/3] Put error flag on whole row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We’ve seen people miss errors if they’re in the right-hand columns of
the spreadsheet because people’s eyes scan down the left edge of the
table.
---
 app/templates/components/table.html | 4 ++--
 app/templates/views/check.html      | 8 ++++++--
 tests/app/main/views/test_send.py   | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/templates/components/table.html b/app/templates/components/table.html
index 2925ee2f2..2697cc6f6 100644
--- a/app/templates/components/table.html
+++ b/app/templates/components/table.html
@@ -73,9 +73,9 @@
   </th>
 {%- endmacro %}
 
-{% macro index_field(text) -%}
+{% macro index_field(text=None) -%}
   <td class="table-field-index">
-    <span>{{ text }}</span>
+    {{ text if text != None else caller()  }}
   </td>
 {%- endmacro %}
 
diff --git a/app/templates/views/check.html b/app/templates/views/check.html
index 933bda753..5fd5590c0 100644
--- a/app/templates/views/check.html
+++ b/app/templates/views/check.html
@@ -191,11 +191,15 @@
         '<span class="visually-hidden">Row in file</span><span aria-hidden="true">1</span>'|safe
       ] + recipients.column_headers
     ) %}
-      {{ index_field(item.index + 2) }}
+      {% call index_field() %}
+        <span class="{% if item.index in recipients.rows_with_errors %}table-field-error{% endif %}">
+          {{ item.index + 2 }}
+        </span>
+      {% endcall %}
       {% for column in recipients.column_headers %}
         {% if item['columns'][column].error and not recipients.missing_column_headers %}
           {% call field() %}
-            <span class="table-field-error">
+            <span>
               <span class="table-field-error-label">{{ item['columns'][column].error }}</span>
               {{ item['columns'][column].data if item['columns'][column].data != None }}
             </span>
diff --git a/tests/app/main/views/test_send.py b/tests/app/main/views/test_send.py
index a90d690f1..83a25adc7 100644
--- a/tests/app/main/views/test_send.py
+++ b/tests/app/main/views/test_send.py
@@ -255,7 +255,7 @@ def test_upload_valid_csv_shows_file_contents(
     assert response.status_code == 200
     page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
     for index, cell in enumerate([
-        '<td class="table-field-index"> <span>2</span> </td>',
+        '<td class="table-field-index"> <span class=""> 2 </span> </td>',
         '<td class="table-field-center-aligned "> <div class=""> 07700900986 </div> </td>',
         '<td class="table-field-center-aligned "> <div class=""> Jo </div> </td>',
         (

From a0cc7922224038eb0d9f7a7b571a8f580bfb4621 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 23 May 2017 14:24:42 +0100
Subject: [PATCH 2/3] Make row numbers bold
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

They’re headings, not part of the data.
---
 app/assets/stylesheets/components/table.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index 085b16e6f..ca079ea0b 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/app/assets/stylesheets/components/table.scss
@@ -123,6 +123,7 @@
   }
 
   &-index {
+    @include bold-16;
     width: 15px;
   }
 
@@ -132,6 +133,10 @@
 
 }
 
+.table-font-xsmall td.table-field-index {  // overrides GOV.UK Elements
+  @include bold-16;
+}
+
 .table-field-headings,
 .table-field-headings-visible {
 

From f425c5756d887cbc996ddc2435a4dfe8b66268dc Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 23 May 2017 14:28:28 +0100
Subject: [PATCH 3/3] Make sure row numbers stay vertically aligned

Just looks tidier.
---
 app/assets/stylesheets/components/table.scss | 6 ++++++
 app/templates/views/check.html               | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index ca079ea0b..7d1931395 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/app/assets/stylesheets/components/table.scss
@@ -74,6 +74,12 @@
 
   }
 
+  &-invisible-error {
+    border-left: 5px solid transparent;
+    padding-left: 7px;
+    display: block;
+  }
+
   &-status {
 
     &-default {
diff --git a/app/templates/views/check.html b/app/templates/views/check.html
index 5fd5590c0..b349bbcb2 100644
--- a/app/templates/views/check.html
+++ b/app/templates/views/check.html
@@ -188,7 +188,7 @@
       caption=original_file_name,
       caption_visible=False,
       field_headings=[
-        '<span class="visually-hidden">Row in file</span><span aria-hidden="true">1</span>'|safe
+        '<span class="visually-hidden">Row in file</span><span aria-hidden="true" class="{}">1</span>'.format("table-field-invisible-error" if errors else "")|safe
       ] + recipients.column_headers
     ) %}
       {% call index_field() %}