From 4077e2860dc80a76d24d1ba424fb8f739dc28b3f Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 9 Jun 2016 15:52:10 +0100 Subject: [PATCH 1/2] 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() %} -
- {{ item.original_file_name }} - Uploaded {{ item.created_at|format_datetime_short }} -
+ {% 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() %} +
+ {{ item.original_file_name }} + Uploaded {{ item.created_at|format_datetime_short }} +
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 @@

{% 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 - ) %} +
+ {% 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() %} +

+ {{ item.to }} +

+

+ {% if item.job %} + From {{ item.job.original_file_name }} + {% else %} + {{ item.template.name }} + from an API call + {% endif %} +

+ {% 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() %} -

- {{ item.to }} -

-

- {% if item.job %} - From {{ item.job.original_file_name }} - {% else %} - {{ item.template.name }} - from an API call - {% endif %} -

{% 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 %} +
{{ previous_next_navigation(prev_page, next_page) }} From 281c54b80b4db3c1ab7024116f272e7f26589fa3 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 9 Jun 2016 16:39:25 +0100 Subject: [PATCH 2/2] Make job counters smaller MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit With sending, delivered and failed all on one line there’s not much space. When these numbers get relatively big (in the 000s) they can start mushing into each other. This commit makes them smaller so that they remain separate. --- app/assets/stylesheets/components/big-number.scss | 10 ++++++++++ app/templates/components/big-number.html | 6 +++--- app/templates/views/dashboard/_jobs.html | 6 +++--- 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/components/big-number.scss b/app/assets/stylesheets/components/big-number.scss index f9d0508be..f3a97af4a 100644 --- a/app/assets/stylesheets/components/big-number.scss +++ b/app/assets/stylesheets/components/big-number.scss @@ -26,6 +26,16 @@ } +.big-number-smallest { + + @extend %big-number; + + .big-number-number { + @include bold-24(); + } + +} + .big-number-with-status { @extend %big-number; diff --git a/app/templates/components/big-number.html b/app/templates/components/big-number.html index 3a2991b0f..062297855 100644 --- a/app/templates/components/big-number.html +++ b/app/templates/components/big-number.html @@ -1,11 +1,11 @@ -{% macro big_number(number, label, label_link=None, currency='', smaller=False) %} -
+{% macro big_number(number, label, label_link=None, currency='', smaller=False, smallest=False) %} +
{% if number is number %} {% if currency %} {{ "{}{:,.2f}".format(currency, number) }} {% else %} - {{ "{}{:,}".format(currency, number) }} + {{ "{:,}".format(number) }} {% endif %} {% else %} {{ number }} diff --git a/app/templates/views/dashboard/_jobs.html b/app/templates/views/dashboard/_jobs.html index 1360bb63a..a197fda07 100644 --- a/app/templates/views/dashboard/_jobs.html +++ b/app/templates/views/dashboard/_jobs.html @@ -24,14 +24,14 @@ {% call field() %} {{ big_number( item.get('notifications_sent', 0) - item.get('notifications_delivered', 0) - item.get('notifications_failed', 0), - smaller=True + smallest=True ) }} {% endcall %} {% call field() %} - {{ big_number(item.get('notifications_delivered', 0), smaller=True) }} + {{ big_number(item.get('notifications_delivered', 0), smallest=True) }} {% endcall %} {% call field(status='error' if 0 else '') %} - {{ big_number(item.get('notifications_failed', 0), smaller=True) }} + {{ big_number(item.get('notifications_failed', 0), smallest=True) }} {% endcall %} {% endcall %}