From 4077e2860dc80a76d24d1ba424fb8f739dc28b3f Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 9 Jun 2016 15:52:10 +0100
Subject: [PATCH] Fix display of spreadsheet tables

a9f79bcf078fae57c52b496762ca2e78f285a725 made all tables have a `fixed`
layout. This causes issues with the spreadsheet-looking tables.

This commit treats tables with half-width first columns as the
exception, not the rule, and makes other tables display as before.
---
 app/assets/stylesheets/components/table.scss | 39 +++++++-----
 app/templates/views/dashboard/_jobs.html     | 64 ++++++++++----------
 app/templates/views/notifications.html       | 62 ++++++++++---------
 3 files changed, 88 insertions(+), 77 deletions(-)

diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index 05079605f..6c0c6517e 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/app/assets/stylesheets/components/table.scss
@@ -1,7 +1,6 @@
 .table {
   margin-bottom: $gutter;
   width: 100%;
-  table-layout: fixed;
 }
 
 .table-heading {
@@ -9,24 +8,32 @@
   margin: 40px 0 $gutter-half 0;
 }
 
-.table-field-headings {
-  th {
-    padding: 0 0 5px 0;
+.dashboard-table {
+
+  .table {
+    table-layout: fixed;
   }
-}
 
-.table-row {
-  th {
-    display: table-cell;
-    width: 52.5%;
-    font-weight: normal;
-
-    .hint {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+  .table-field-headings {
+    th {
+      padding: 0 0 5px 0;
     }
   }
+
+  .table-row {
+    th {
+      display: table-cell;
+      width: 52.5%;
+      font-weight: normal;
+
+      .hint {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
 }
 
 %table-field,
@@ -105,7 +112,7 @@
 
 .table-field-heading {
 
-  &-first {
+  .dashboard-table &-first {
     width: 52.5%;
   }
 
diff --git a/app/templates/views/dashboard/_jobs.html b/app/templates/views/dashboard/_jobs.html
index 4b21598f8..1360bb63a 100644
--- a/app/templates/views/dashboard/_jobs.html
+++ b/app/templates/views/dashboard/_jobs.html
@@ -1,35 +1,37 @@
 {% 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(
-  jobs,
-  caption="Recent batch jobs",
-  caption_visible=False,
-  empty_message='You haven’t sent any batch messages yet',
-  field_headings=[
-    'File',
-    'Sending',
-    'Delivered',
-    'Failed'
-  ],
-  field_headings_visible=True
-) %}
-  {% 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
+<div class='dashboard-table'>
+  {% call(item, row_number) list_table(
+    jobs,
+    caption="Recent batch jobs",
+    caption_visible=False,
+    empty_message='You haven’t sent any batch messages yet',
+    field_headings=[
+      'File',
+      'Sending',
+      'Delivered',
+      'Failed'
+    ],
+    field_headings_visible=True
+  ) %}
+    {% 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() %}
+      {{ big_number(
+        item.get('notifications_sent', 0) - item.get('notifications_delivered', 0) - item.get('notifications_failed', 0),
+        smaller=True
+      ) }}
+    {% endcall %}
+    {% call field() %}
+      {{ big_number(item.get('notifications_delivered', 0), smaller=True) }}
+    {% endcall %}
+    {% call field(status='error' if 0 else '') %}
+      {{ big_number(item.get('notifications_failed', 0), smaller=True) }}
+    {% endcall %}
   {% endcall %}
-  {% call field() %}
-    {{ big_number(
-      item.get('notifications_sent', 0) - item.get('notifications_delivered', 0) - item.get('notifications_failed', 0),
-      smaller=True
-    ) }}
-  {% endcall %}
-  {% call field() %}
-    {{ big_number(item.get('notifications_delivered', 0), smaller=True) }}
-  {% endcall %}
-  {% call field(status='error' if 0 else '') %}
-    {{ big_number(item.get('notifications_failed', 0), smaller=True) }}
-  {% endcall %}
-{% endcall %}
+</div>
diff --git a/app/templates/views/notifications.html b/app/templates/views/notifications.html
index c42216def..4e9c14622 100644
--- a/app/templates/views/notifications.html
+++ b/app/templates/views/notifications.html
@@ -41,38 +41,40 @@
     </p>
   {% endif %}
 
-  {% call(item, row_number) list_table(
-    notifications,
-    caption="Recent activity",
-    caption_visible=False,
-    empty_message='No messages found',
-    field_headings=['Recipient', 'Started', 'Status'],
-    field_headings_visible=False
-  ) %}
+  <div class='dashboard-table'>
+    {% call(item, row_number) list_table(
+      notifications,
+      caption="Recent activity",
+      caption_visible=False,
+      empty_message='No messages found',
+      field_headings=['Recipient', 'Started', 'Status'],
+      field_headings_visible=False
+    ) %}
+
+      {% call row_heading() %}
+        <p>
+          {{ item.to }}
+        </p>
+        <p class="hint">
+          {% if item.job %}
+            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 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>
+      {% endcall %}
+
+      {{ date_field(
+        (item.updated_at or item.created_at)|format_datetime_short
+      ) }}
+
+      {% call field(status=item.status|format_notification_status_as_field_status, align='right') %}
+        {{ item.status|format_notification_status(item.template.template_type) }}
+      {% endcall %}
 
-    {% call row_heading() %}
-      <p>
-        {{ item.to }}
-      </p>
-      <p class="hint">
-        {% if item.job %}
-          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 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>
     {% endcall %}
-
-    {{ date_field(
-      (item.updated_at or item.created_at)|format_datetime_short
-    ) }}
-
-    {% call field(status=item.status|format_notification_status_as_field_status, align='right') %}
-      {{ item.status|format_notification_status(item.template.template_type) }}
-    {% endcall %}
-
-  {% endcall %}
+  </div>
 
   {{ previous_next_navigation(prev_page, next_page) }}