From 2d7ed4d34fbfcee6e2686e6f802b23b8207843ce Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Fri, 9 Sep 2016 12:25:39 +0100 Subject: [PATCH] Fix overlapping text on tables of notifications MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit changes the tables of notifications from 3 columns to two columns. This is so the text has more room, so it doesn’t start overlapping. It also makes sure that if the recipient gets really long that it will be cut off with an ellipsis, rather than overlapping… I hypothesize that if a notification fails you probably don’t care when it failed, just that it failed. --- app/__init__.py | 9 +++++++++ app/assets/stylesheets/components/table.scss | 3 ++- app/templates/partials/jobs/notifications.html | 11 +++++------ app/templates/views/notifications.html | 18 ++++++++++-------- tests/app/main/views/test_jobs.py | 2 +- 5 files changed, 27 insertions(+), 16 deletions(-) diff --git a/app/__init__.py b/app/__init__.py index 4eacdff6b..62ef89f19 100644 --- a/app/__init__.py +++ b/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_with_time) application.add_template_filter(format_notification_status_as_field_status) application.add_template_filter(format_notification_status_as_url) @@ -281,6 +282,14 @@ def format_notification_status(status, template_type): }.get(template_type).get(status, status) +def format_notification_status_with_time(status, template_type, when): + return { + 'delivered': 'Delivered {}'.format(when), + 'sending': 'Sending since {}'.format(when), + 'created': 'Sending since {}'.format(when) + }.get(status, format_notification_status(status, template_type)) + + def format_notification_status_as_field_status(status): return { 'failed': 'error', diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss index 1d6c3bbeb..baa5551b5 100644 --- a/app/assets/stylesheets/components/table.scss +++ b/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; diff --git a/app/templates/partials/jobs/notifications.html b/app/templates/partials/jobs/notifications.html index 266ad75ff..4cc539c87 100644 --- a/app/templates/partials/jobs/notifications.html +++ b/app/templates/partials/jobs/notifications.html @@ -43,17 +43,13 @@ empty_message="No messages to show", field_headings=[ 'Recipient', - 'Time', 'Status' ], field_headings_visible=False ) %} {% call row_heading() %} - {{ item.to }} +

{{ 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 @@ -61,7 +57,10 @@ {% if item.status|format_notification_status_as_url %} {% endif %} - {{ item.status|format_notification_status(item.template.template_type) }} + {{ item.status|format_notification_status_with_time( + item.template.template_type, + (item.updated_at or item.created_at)|format_datetime_short + ) }} {% if item.status|format_notification_status_as_url %} {% endif %} diff --git a/app/templates/views/notifications.html b/app/templates/views/notifications.html index 50445772e..082cea952 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, 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,15 +68,17 @@

{% 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') %} + {% call field( + align='right', + status=item.status|format_notification_status_as_field_status + ) %} {% if item.status|format_notification_status_as_url %} {% endif %} - {{ item.status|format_notification_status(item.template.template_type) }} + {{ item.status|format_notification_status_with_time( + item.template.template_type, + (item.updated_at or item.created_at)|format_datetime_short + ) }} {% if item.status|format_notification_status_as_url %} {% endif %} diff --git a/tests/app/main/views/test_jobs.py b/tests/app/main/views/test_jobs.py index 4d9f7de52..c17c3f3fc 100644 --- a/tests/app/main/views/test_jobs.py +++ b/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',