Merge pull request #935 from alphagov/fix-overlapping-on-notification-tables

Fix overlapping text on tables of notifications

app/__init__.py

@@ -116,6 +116,7 @@ def create_app():
     application.add_template_filter(format_date_normal)
     application.add_template_filter(format_date_short)
     application.add_template_filter(format_notification_status)
+    application.add_template_filter(format_notification_status_as_time)
     application.add_template_filter(format_notification_status_as_field_status)
     application.add_template_filter(format_notification_status_as_url)
 
@@ -281,6 +282,13 @@ def format_notification_status(status, template_type):
     }.get(template_type).get(status, status)
 
 
+def format_notification_status_as_time(status, created, updated):
+    return {
+        'sending': ' since {}'.format(created),
+        'created': ' since {}'.format(created)
+    }.get(status, updated)
+
+
 def format_notification_status_as_field_status(status):
     return {
         'failed': 'error',

app/assets/stylesheets/components/table.scss

@@ -40,7 +40,8 @@
       width: 52.5%;
       font-weight: normal;
 
-      .hint {
+      .hint,
+      p {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -93,6 +94,13 @@
 
       }
 
+      .status-hint {
+        display: block;
+        font-weight: normal;
+        color: $red;
+        margin-top: 5px;
+      }
+
     }
 
     &-yes,
@@ -114,10 +122,6 @@
     width: 15px;
   }
 
-  &-date {
-    white-space: nowrap;
-  }
-
   p {
     margin: 0 0 5px 0;
   }

app/templates/components/table.html

@@ -67,12 +67,6 @@
   </td>
 {%- endmacro %}
 
-{% macro date_field(text) -%}
-  <td class="table-field-date">
-    <span>{{ text }}</span>
-  </td>
-{% endmacro %}
-
 {% macro text_field(text, status='') -%}
   {% call field(status=status) %}
     {{ text }}
@@ -104,3 +98,24 @@
 {% macro hidden_field_heading(text) %}
   <span class="visuallyhidden">{{ text }}</span>
 {%- endmacro %}
+
+
+{% macro notification_status_field(notification) %}
+  {% call field(status=notification.status|format_notification_status_as_field_status, align='right') %}
+    {% if notification.status|format_notification_status_as_url %}
+      <a href="{{ notification.status|format_notification_status_as_url }}">
+    {% endif %}
+    {{ notification.status|format_notification_status(
+      notification.template.template_type
+    ) }}
+    {% if notification.status|format_notification_status_as_url %}
+      </a>
+    {% endif %}
+    <span class="status-hint">
+      {{ notification.status|format_notification_status_as_time(
+        notification.created_at|format_datetime_short,
+        (notification.updated_at or notification.created_at)|format_datetime_short
+      ) }}
+    </span>
+  {% endcall %}
+{% endmacro %}

app/templates/partials/jobs/notifications.html

@@ -1,4 +1,4 @@
-{% from "components/table.html" import list_table, field, right_aligned_field_heading, date_field, row_heading %}
+{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, notification_status_field %}
 {% from "components/page-footer.html" import page_footer %}
 
 <div class="ajax-block-container">
@@ -43,29 +43,14 @@
         empty_message="No messages to show",
         field_headings=[
           'Recipient',
-          'Time',
           'Status'
         ],
         field_headings_visible=False
       ) %}
         {% call row_heading() %}
-          {{ item.to }}
-        {% endcall %}
-        {{ date_field(
-          (item.updated_at or item.created_at)|format_datetime_short
-        ) }}
-        {% call field(
-          align='right',
-          status=item.status|format_notification_status_as_field_status
-        ) %}
-          {% if item.status|format_notification_status_as_url %}
-            <a href="{{ item.status|format_notification_status_as_url }}">
-          {% endif %}
-          {{ item.status|format_notification_status(item.template.template_type) }}
-          {% if item.status|format_notification_status_as_url %}
-            </a>
-          {% endif %}
+          <p>{{ item.to }}</p>
         {% endcall %}
+        {{ notification_status_field(item) }}
       {% endcall %}
 
       {% if more_than_one_page %}

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, row_heading, date_field %}
+{% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading, row_heading, notification_status_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 %}
@@ -50,7 +50,7 @@
       caption="Recent activity",
       caption_visible=False,
       empty_message='No messages found',
-      field_headings=['Recipient', 'Started', 'Status'],
+      field_headings=['Recipient', 'Status'],
       field_headings_visible=False
     ) %}
 
@@ -68,19 +68,7 @@
         </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') %}
-        {% if item.status|format_notification_status_as_url %}
-          <a href="{{ item.status|format_notification_status_as_url }}">
-        {% endif %}
-        {{ item.status|format_notification_status(item.template.template_type) }}
-        {% if item.status|format_notification_status_as_url %}
-          </a>
-        {% endif %}
-      {% endcall %}
+      {{ notification_status_field(item) }}
 
     {% endcall %}
   {% if notifications %}

tests/app/main/views/test_jobs.py

@@ -78,7 +78,7 @@ def test_should_show_page_for_one_job(
             '{}: Your vehicle tax is about to expire'.format(service_one['name'])
         )
         assert ' '.join(page.find('tbody').find('tr').text.split()) == (
-            '07123456789 1 January at 11:10am Delivered'
+            '07123456789 Delivered 1 January at 11:10am'
         )
         assert page.find('div', {'data-key': 'notifications'})['data-resource'] == url_for(
             'main.view_job_updates',