From cc04a924d04f32485f2b67210079f8c1d5f0ac34 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 27 Oct 2020 15:16:27 +0000 Subject: [PATCH] Make list of areas on dashboard use full width MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When the list of areas is restricted to half the width of the page it starts to look pretty higgledy-piggledy when you have lots of areas or areas with very long names. To do this I’ve ripped out the table markup in favour of headings, paragraphs and lists. Probably pros and cons for each, but it was really hard to do the layout with the content in a table. --- .../stylesheets/components/area-list.scss | 4 + app/assets/stylesheets/views/dashboard.scss | 4 + app/templates/views/broadcast/dashboard.html | 2 +- .../broadcast/partials/dashboard-table.html | 82 ++++++++++--------- .../views/broadcast/previous-broadcasts.html | 2 +- tests/app/main/views/test_broadcast.py | 24 +++--- 6 files changed, 66 insertions(+), 52 deletions(-) diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss index 1397d6b06..5b1bb651a 100644 --- a/app/assets/stylesheets/components/area-list.scss +++ b/app/assets/stylesheets/components/area-list.scss @@ -70,6 +70,10 @@ font-weight: bold; } + &--smaller { + @include bold-16; + } + } .govuk-button { diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss index 55de2bc0b..4e9f9be45 100644 --- a/app/assets/stylesheets/views/dashboard.scss +++ b/app/assets/stylesheets/views/dashboard.scss @@ -94,6 +94,10 @@ max-width: 580px; } + &-status { + text-align: right; + } + } /* The focus state for sibling links overlaps the hint so the hint's text colour needs to adapt */ diff --git a/app/templates/views/broadcast/dashboard.html b/app/templates/views/broadcast/dashboard.html index 3b0fe41f7..405bbc9de 100644 --- a/app/templates/views/broadcast/dashboard.html +++ b/app/templates/views/broadcast/dashboard.html @@ -16,7 +16,7 @@ {% endif %} -

Current alerts

+

Current alerts

{{ ajax_block( partials, diff --git a/app/templates/views/broadcast/partials/dashboard-table.html b/app/templates/views/broadcast/partials/dashboard-table.html index 8cd572313..ebf1d8694 100644 --- a/app/templates/views/broadcast/partials/dashboard-table.html +++ b/app/templates/views/broadcast/partials/dashboard-table.html @@ -1,44 +1,48 @@ {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %} -
- {% call(item, row_number) list_table( - broadcasts|sort|reverse|list, - caption="Live broadcasts", - caption_visible=False, - empty_message=empty_message, - field_headings=[ - 'Template name', - 'Status' - ], - field_headings_visible=False - ) %} - {% call row_heading() %} -
+
+{% for item in broadcasts|sort|reverse|list %} +
+
+

{{ item.template_name }} - - {{ item.content }} - -
    - {% for area in item.areas %} -
  • {{ area.name }}
    • - {% endfor %} -
+

+
+
+ + {{ item.content }} + +
+
+ {% if item.status == 'pending-approval' %} +

+ Waiting for approval +

+ {% elif item.status == 'broadcasting' %} +

+ Live since {{ item.starts_at|format_datetime_relative }} +

+ {% else %} +

+ Broadcast {{ item.starts_at|format_datetime_relative }} +

+ {% endif %} +
- {% endcall %} - {% call field(align='right') %} - {% if item.status == 'pending-approval' %} -

- Waiting for approval -

- {% elif item.status == 'broadcasting' %} -

- Live since {{ item.starts_at|format_datetime_relative }} -

- {% else %} -

- Broadcast {{ item.starts_at|format_datetime_relative }} -

- {% endif %} - {% endcall %} - {% endcall %} +
    + {% for area in item.areas %} +
  • {{ area.name }}
    • + {% endfor %} +
+
+
+ {% if loop.last %} +
+
+ {% endif %} +{% else %} +

+ {{ empty_message }} +

+{% endfor %}
diff --git a/app/templates/views/broadcast/previous-broadcasts.html b/app/templates/views/broadcast/previous-broadcasts.html index a21ccf3a5..dbda6575f 100644 --- a/app/templates/views/broadcast/previous-broadcasts.html +++ b/app/templates/views/broadcast/previous-broadcasts.html @@ -8,7 +8,7 @@ {% block maincolumn_content %} -

Previous alerts

+

Previous alerts

{% include('views/broadcast/partials/dashboard-table.html') %} diff --git a/tests/app/main/views/test_broadcast.py b/tests/app/main/views/test_broadcast.py index 899fe52ff..4e8a3acc4 100644 --- a/tests/app/main/views/test_broadcast.py +++ b/tests/app/main/views/test_broadcast.py @@ -281,7 +281,7 @@ def test_empty_broadcast_dashboard( 'Current alerts' ) assert [ - normalize_spaces(row.text) for row in page.select('tbody tr .table-empty-message') + normalize_spaces(row.text) for row in page.select('.table-empty-message') ] == [ 'You do not have any current alerts', ] @@ -300,15 +300,16 @@ def test_broadcast_dashboard( service_id=SERVICE_ONE_ID, ) - assert len(page.select('table')) == len(page.select('h1')) == 1 + assert len(page.select('.ajax-block-container')) == len(page.select('h1')) == 1 assert [ - normalize_spaces(row.text) for row in page.select('table')[0].select('tbody tr') + normalize_spaces(row.text) + for row in page.select('.ajax-block-container')[0].select('.file-list') ] == [ - 'Half an hour ago This is a test England Scotland Waiting for approval', - 'Hour and a half ago This is a test England Scotland Waiting for approval', - 'Example template This is a test England Scotland Live since today at 2:20am', - 'Example template This is a test England Scotland Live since today at 1:20am', + 'Half an hour ago This is a test Waiting for approval England Scotland', + 'Hour and a half ago This is a test Waiting for approval England Scotland', + 'Example template This is a test Live since today at 2:20am England Scotland', + 'Example template This is a test Live since today at 1:20am England Scotland', ] @@ -351,12 +352,13 @@ def test_previous_broadcasts_page( assert normalize_spaces(page.select_one('main h1').text) == ( 'Previous alerts' ) - assert len(page.select('table')) == 1 + assert len(page.select('.ajax-block-container')) == 1 assert [ - normalize_spaces(row.text) for row in page.select('table')[0].select('tbody tr') + normalize_spaces(row.text) + for row in page.select('.ajax-block-container')[0].select('.file-list') ] == [ - 'Example template This is a test England Scotland Broadcast yesterday at 2:20pm', - 'Example template This is a test England Scotland Broadcast yesterday at 2:20am', + 'Example template This is a test Broadcast yesterday at 2:20pm England Scotland', + 'Example template This is a test Broadcast yesterday at 2:20am England Scotland', ]