Merge pull request #3705 from alphagov/full-width-area-list-dashboard

Make list of areas on dashboard use full width

app/assets/stylesheets/components/area-list.scss

@@ -70,6 +70,10 @@
       font-weight: bold;
     }
 
+    &--smaller {
+      @include bold-16;
+    }
+
   }
 
   .govuk-button {

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 */

app/templates/views/broadcast/dashboard.html

@@ -16,7 +16,7 @@
     </nav>
   {% endif %}
 
-  <h1 class="heading-medium govuk-!-margin-bottom-2">Current alerts</h1>
+  <h1 class="heading-medium">Current alerts</h1>
 
   {{ ajax_block(
     partials,

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 %}
 
-<div class='{% if broadcasts %}dashboard-table{% endif%} ajax-block-container'>
+<div class='ajax-block-container'>
-  {% call(item, row_number) list_table(
+{% for item in broadcasts|sort|reverse|list %}
-    broadcasts|sort|reverse|list,
+  <div class="keyline-block">
-    caption="Live broadcasts",
+    <div class="file-list govuk-!-margin-bottom-2">
-    caption_visible=False,
+      <h2>
-    empty_message=empty_message,
-    field_headings=[
-      'Template name',
-      'Status'
-    ],
-    field_headings_visible=False
-  ) %}
-    {% call row_heading() %}
-      <div class="file-list">
         <a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="{{ url_for(view_broadcast_endpoint, service_id=current_service.id, broadcast_message_id=item.id) }}">{{ item.template_name }}</a>
-        <span class="file-list-hint-large govuk-!-margin-bottom-1">
+      </h2>
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-one-half">
+          <span class="file-list-hint-large govuk-!-margin-bottom-2">
             {{ item.content }}
           </span>
-        <ul class="area-list">
-          {% for area in item.areas %}
-            <li class="area-list-item area-list-item--unremoveable">{{ area.name }}</li>
-          {% endfor %}
-        </ul>
         </div>
-    {% endcall %}
+        <div class="govuk-grid-column-one-half file-list-status">
-    {% call field(align='right') %}
           {% if item.status == 'pending-approval' %}
-        <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
+            <p class="govuk-body govuk-!-margin-bottom-0 govuk-hint">
               Waiting for approval
             </p>
           {% elif item.status == 'broadcasting' %}
-        <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 live-broadcast">
+            <p class="govuk-body govuk-!-margin-bottom-0 live-broadcast">
               Live since {{ item.starts_at|format_datetime_relative }}
             </p>
           {% else %}
-        <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
+            <p class="govuk-body govuk-!-margin-bottom-0 govuk-hint">
               Broadcast {{ item.starts_at|format_datetime_relative }}
             </p>
           {% endif %}
-    {% endcall %}
+        </div>
-  {% endcall %}
+      </div>
+      <ul class="area-list">
+        {% for area in item.areas %}
+          <li class="area-list-item area-list-item--unremoveable area-list-item--smaller">{{ area.name }}</li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+  {% if loop.last %}
+    <div class="keyline-block">
+    </div>
+  {% endif %}
+{% else %}
+  <p class="table-empty-message keyline-block govuk-!-padding-top-4">
+    {{ empty_message }}
+  </p>
+{% endfor %}
 </div>

app/templates/views/broadcast/previous-broadcasts.html

@@ -8,7 +8,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-medium govuk-!-margin-bottom-2">Previous alerts</h1>
+  <h1 class="heading-medium">Previous alerts</h1>
 
   {% include('views/broadcast/partials/dashboard-table.html') %}
 

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',
+        'Half an hour ago This is a test Waiting for approval England Scotland',
-        'Hour and a half ago This is a test England Scotland Waiting for approval',
+        'Hour and a half ago This is a test Waiting for approval England Scotland',
-        'Example template This is a test England Scotland Live since today at 2:20am',
+        'Example template This is a test Live since today at 2:20am England Scotland',
-        'Example template This is a test England Scotland Live since today at 1:20am',
+        '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 Broadcast yesterday at 2:20pm England Scotland',
-        'Example template This is a test England Scotland Broadcast yesterday at 2:20am',
+        'Example template This is a test Broadcast yesterday at 2:20am England Scotland',
     ]