Make list of areas on dashboard use full width

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.

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'>
-  {% 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() %}
-      <div class="file-list">
+<div class='ajax-block-container'>
+{% for item in broadcasts|sort|reverse|list %}
+  <div class="keyline-block">
+    <div class="file-list govuk-!-margin-bottom-2">
+      <h2>
         <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">
-          {{ 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>
+      </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>
+        </div>
+        <div class="govuk-grid-column-one-half file-list-status">
+          {% if item.status == 'pending-approval' %}
+            <p class="govuk-body govuk-!-margin-bottom-0 govuk-hint">
+              Waiting for approval
+            </p>
+          {% elif item.status == 'broadcasting' %}
+            <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-bottom-0 govuk-hint">
+              Broadcast {{ item.starts_at|format_datetime_relative }}
+            </p>
+          {% endif %}
+        </div>
       </div>
-    {% endcall %}
-    {% call field(align='right') %}
-      {% if item.status == 'pending-approval' %}
-        <p class="govuk-body govuk-!-margin-top-6 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">
-          Live since {{ item.starts_at|format_datetime_relative }}
-        </p>
-      {% else %}
-        <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
-          Broadcast {{ item.starts_at|format_datetime_relative }}
-        </p>
-      {% endif %}
-    {% endcall %}
-  {% endcall %}
+      <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') %}