From b8cc0de44ed0d0d51195b953405f19300ca90358 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 19 Jun 2017 17:05:14 +0100
Subject: [PATCH] Use file list pattern for notifications

Most of our tables are now lists which have:
- a thing you click on
- some secondary info about that thing underneath
- some extra numbers/status on the right hand side

Since these are so similar, they should share the same pattern, which
this commit does (using the `file-list` pattern).

Visually this means:
- the secondary text on the inbox becomes grey not black, for
  consistency
- the status bit of the notifications tables bottom align like the
  status of messages in the inbox

These both seem like OK changes to make for the sake of consistency.
---
 app/assets/stylesheets/views/dashboard.scss     | 1 +
 app/templates/components/table.html             | 2 ++
 app/templates/partials/jobs/notifications.html  | 4 ++--
 app/templates/views/activity/notifications.html | 6 ++----
 app/templates/views/dashboard/inbox.html        | 4 ++--
 5 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss
index a1fed973a..ddd35428a 100644
--- a/app/assets/stylesheets/views/dashboard.scss
+++ b/app/assets/stylesheets/views/dashboard.scss
@@ -96,5 +96,6 @@
 }
 
 .align-with-message-body {
+  display: block;
   margin-top: $gutter * 5 / 6;
 }
diff --git a/app/templates/components/table.html b/app/templates/components/table.html
index 8708465b2..5ad942fe6 100644
--- a/app/templates/components/table.html
+++ b/app/templates/components/table.html
@@ -120,6 +120,7 @@
 
 {% macro notification_status_field(notification) %}
   {% call field(status=notification.status|format_notification_status_as_field_status, align='right') %}
+    {% if notification.status in ['created', 'sending', 'delivered'] %}<span class="align-with-message-body">{% endif %}
     {% if notification.status|format_notification_status_as_url %}
       <a href="{{ notification.status|format_notification_status_as_url }}">
     {% endif %}
@@ -135,6 +136,7 @@
         (notification.updated_at or notification.created_at)|format_datetime_short
       ) }}
     </span>
+    {% if notification.status in ['created', 'sending', 'delivered'] %}</span>{% endif %}
   {% endcall %}
 {% endmacro %}
 
diff --git a/app/templates/partials/jobs/notifications.html b/app/templates/partials/jobs/notifications.html
index c033e9427..4bec657b3 100644
--- a/app/templates/partials/jobs/notifications.html
+++ b/app/templates/partials/jobs/notifications.html
@@ -50,8 +50,8 @@
         field_headings_visible=False
       ) %}
         {% call row_heading() %}
-          <a href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=item.id) }}">{{ item.to }}</a>
-          <p>
+          <a class="file-list-filename" href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=item.id) }}">{{ item.to }}</a>
+          <p class="file-list-hint">
             {{ item.preview_of_content }}
           </p>
         {% endcall %}
diff --git a/app/templates/views/activity/notifications.html b/app/templates/views/activity/notifications.html
index 2b6234d50..cabcd436b 100644
--- a/app/templates/views/activity/notifications.html
+++ b/app/templates/views/activity/notifications.html
@@ -17,10 +17,8 @@
     ) %}
 
       {% call row_heading() %}
-        <p>
-          <a href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=item.id) }}">{{ item.to }}</a>
-        </p>
-        <p>
+        <a class="file-list-filename" href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=item.id) }}">{{ item.to }}</a>
+        <p class="file-list-hint">
           {{ item.preview_of_content }}
         </p>
       {% endcall %}
diff --git a/app/templates/views/dashboard/inbox.html b/app/templates/views/dashboard/inbox.html
index fe343b1bc..6dbc2fb5b 100644
--- a/app/templates/views/dashboard/inbox.html
+++ b/app/templates/views/dashboard/inbox.html
@@ -31,10 +31,10 @@
         >
           {{ item.user_number | format_phone_number_human_readable }}
         </a>
-        <span class="wide-left-hand-column">{{ item.content }}</span>
+        <span class="file-list-hint">{{ item.content }}</span>
       {% endcall %}
       {% call field(align='right') %}
-        <span class="file-list-hint align-with-message-body">
+        <span class="align-with-message-body">
           {{ item.created_at | format_delta }}
         </span>
       {% endcall %}