From d213e2cc67b03c96adf3668399bf25546becdd64 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 8 Jun 2016 13:41:02 +0100
Subject: [PATCH] Give each row in a table a heading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The first columns of our tables are always headings for the
subsequent columns, even though they go horizontally.

HTML has the `<th>` tag, which doesn’t just have to be used for headings
along the top of a table. So this commit changes the first column to be
a `<th>`.

This then allows us to style these elements differently, specifically
making them 50% wide. This makes pages like the dashboard align more
nicely.
---
 app/assets/stylesheets/components/table.scss | 15 +++++++++++++++
 app/assets/stylesheets/views/dashboard.scss  |  3 +--
 app/templates/components/table.html          | 12 ++++++++++++
 app/templates/views/dashboard/_jobs.html     | 16 ++++++++--------
 app/templates/views/notifications.html       | 10 +++++-----
 5 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index efe70d644..7e6f0c8f8 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/app/assets/stylesheets/components/table.scss
@@ -1,5 +1,6 @@
 .table {
   margin-bottom: $gutter;
+  width: 100%;
 }
 
 .table-heading {
@@ -13,6 +14,16 @@
   }
 }
 
+.table-row {
+  th {
+    width: 52.5%;
+
+    a {
+      max-height: 1.25em;
+    }
+  }
+}
+
 %table-field,
 .table-field {
 
@@ -77,6 +88,10 @@
     width: 15px;
   }
 
+  &-date {
+    white-space: nowrap;
+  }
+
   p {
     margin: 0 0 5px 0;
   }
diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss
index 1f4d2022e..04c2cc622 100644
--- a/app/assets/stylesheets/views/dashboard.scss
+++ b/app/assets/stylesheets/views/dashboard.scss
@@ -3,8 +3,7 @@
   table {
     th {
       @include core-16;
-      padding-top: 0;
-      border: 0;
+      border-bottom: 0;
     }
 
     td {
diff --git a/app/templates/components/table.html b/app/templates/components/table.html
index 5f96508ce..95ba0264f 100644
--- a/app/templates/components/table.html
+++ b/app/templates/components/table.html
@@ -55,12 +55,24 @@
   </td>
 {%- endmacro %}
 
+{% macro row_heading() -%}
+  <th class="table-field">
+    <span>{{ caller() }}</span>
+  </th>
+{%- endmacro %}
+
 {% macro index_field(text) -%}
   <td class="table-field-index">
     <span>{{ text }}</span>
   </td>
 {%- endmacro %}
 
+{% macro date_field(text) -%}
+  <td class="table-field-date">
+    <span>{{ text }}</span>
+  </td>
+{% endmacro %}
+
 {% macro text_field(text) -%}
   {% call field() %}
     {{ text }}
diff --git a/app/templates/views/dashboard/_jobs.html b/app/templates/views/dashboard/_jobs.html
index 26dc0acca..4b21598f8 100644
--- a/app/templates/views/dashboard/_jobs.html
+++ b/app/templates/views/dashboard/_jobs.html
@@ -1,4 +1,4 @@
-{% from "components/table.html" import list_table, field, right_aligned_field_heading %}
+{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
 {% from "components/big-number.html" import big_number %}
 
 {% call(item, row_number) list_table(
@@ -8,28 +8,28 @@
   empty_message='You haven’t sent any batch messages yet',
   field_headings=[
     'File',
-    right_aligned_field_heading('Sending'),
-    right_aligned_field_heading('Delivered'),
-    right_aligned_field_heading('Failed')
+    'Sending',
+    'Delivered',
+    'Failed'
   ],
   field_headings_visible=True
 ) %}
-  {% call field() %}
+  {% call row_heading() %}
     <div class="file-list">
       <a class="file-list-filename" href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
       <span class="file-list-hint">Uploaded {{ item.created_at|format_datetime_short }}</span>
     </div
   {% endcall %}
-  {% call field(align='right') %}
+  {% call field() %}
     {{ big_number(
       item.get('notifications_sent', 0) - item.get('notifications_delivered', 0) - item.get('notifications_failed', 0),
       smaller=True
     ) }}
   {% endcall %}
-  {% call field(align='right') %}
+  {% call field() %}
     {{ big_number(item.get('notifications_delivered', 0), smaller=True) }}
   {% endcall %}
-  {% call field(align='right', status='error' if 0 else '') %}
+  {% call field(status='error' if 0 else '') %}
     {{ big_number(item.get('notifications_failed', 0), smaller=True) }}
   {% endcall %}
 {% endcall %}
diff --git a/app/templates/views/notifications.html b/app/templates/views/notifications.html
index 41bd3b6cb..ff70f7cc6 100644
--- a/app/templates/views/notifications.html
+++ b/app/templates/views/notifications.html
@@ -1,5 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading %}
+{% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading, row_heading, date_field %}
 {% from "components/previous-next-navigation.html" import previous_next_navigation %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/pill.html" import pill %}
@@ -46,19 +46,19 @@
     caption="Recent activity",
     caption_visible=False,
     empty_message='No messages found',
-    field_headings=['Recipient', 'Error', 'Status', 'Started'],
+    field_headings=['Recipient', 'Started', 'Status'],
     field_headings_visible=False
   ) %}
 
-    {% call field() %}
+    {% call row_heading() %}
       <p>
         {{ item.to }}
       </p>
       <p class="hint">
         {% if item.job %}
-          From <a class="truncated" href="{{ url_for(".view_job", service_id=current_service.id, job_id=item.job.id) }}">{{ item.job.original_file_name }}</a>
+          From <a href="{{ url_for(".view_job", service_id=current_service.id, job_id=item.job.id) }}">{{ item.job.original_file_name }}</a>
         {% else %}
-          <a class="truncated" href="{{ url_for('.view_template_version', service_id=current_service.id, template_id=item.template.id, version=item.template_version) }}">{{ item.template.name }}</a>
+          <a href="{{ url_for('.view_template_version', service_id=current_service.id, template_id=item.template.id, version=item.template_version) }}">{{ item.template.name }}</a>
           from an API call
         {% endif %}
       </p>