Merge pull request #3532 from alphagov/broadcast-dashboard-refinements

Make live broadcasts feel more prominent on dashboard

app/assets/stylesheets/app.scss

@@ -210,3 +210,46 @@ details .arrow {
 .heading-upcoming-jobs {
   margin-top: govuk-spacing(3);
 }
+
+@keyframes live-pulse {
+  0%   {
+    background: $red;
+    box-shadow: inset 0 0 0 2px $red, inset 0 0 0 4px $white;
+  }
+  40%   {
+    background: $red;
+    box-shadow: inset 0 0 0 2px $red, inset 0 0 0 4px $white;
+  }
+  50% {
+    background: $white;
+    box-shadow: inset 0 0 0 2px $red, inset 0 0 0 2px $white;
+  }
+  100% {
+    background: $white;
+    box-shadow: inset 0 0 0 2px $red, inset 0 0 0 4px $white;
+  }
+}
+
+.live-broadcast {
+
+  color: $red;
+  font-weight: bold;
+  position: relative;
+  display: inline-block;
+
+  &:before {
+    content: "";
+    display: block;
+    float: right;
+    margin-top: 1px;
+    margin-left: 5px;
+    border: none;
+    background: $red;
+    width: 19px;
+    height: 19px;
+    border-radius: 50%;
+    animation: live-pulse 1.5s infinite;
+    //box-shadow: inset 0 0 0 2px $red, inset 0 0 0 5px $white;
+  }
+
+}

app/templates/views/broadcast/dashboard.html

@@ -10,14 +10,6 @@
 
   <h1 class="govuk-visually-hidden">Dashboard</h1>
 
-  <h2 class="heading-medium govuk-!-margin-bottom-2">Waiting for approval</h2>
-
-  {{ ajax_block(
-    partials,
-    url_for('.broadcast_dashboard_updates', service_id=current_service.id),
-    'pending_approval_broadcasts'
-  ) }}
-
   <h2 class="heading-medium govuk-!-margin-bottom-2">Live broadcasts</h2>
 
   {{ ajax_block(
@@ -26,6 +18,14 @@
     'live_broadcasts'
   ) }}
 
+  <h2 class="heading-medium govuk-!-margin-bottom-2">Waiting for approval</h2>
+
+  {{ ajax_block(
+    partials,
+    url_for('.broadcast_dashboard_updates', service_id=current_service.id),
+    'pending_approval_broadcasts'
+  ) }}
+
   <h2 class="heading-medium govuk-!-margin-bottom-2">Previous broadcasts</h2>
 
   {{ ajax_block(

app/templates/views/broadcast/partials/dashboard-table.html

@@ -26,7 +26,7 @@
           Prepared by {{ item.created_by.name }}
         </p>
       {% elif item.status == 'broadcasting' %}
-        <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0">
+        <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 live-broadcast">
           Live until {{ item.finishes_at|format_datetime_relative }}
         </p>
       {% elif item.status == 'cancelled' %}

tests/app/main/views/test_broadcast.py

@@ -103,8 +103,8 @@ def test_empty_broadcast_dashboard(
     assert [
         normalize_spaces(row.text) for row in page.select('tbody tr .table-empty-message')
     ] == [
-        'You do not have any broadcasts waiting for approval',
         'You do not have any live broadcasts at the moment',
+        'You do not have any broadcasts waiting for approval',
         'You do not have any previous broadcasts',
     ]
 
@@ -120,22 +120,23 @@ def test_broadcast_dashboard(
         '.broadcast_dashboard',
         service_id=SERVICE_ONE_ID,
     )
+
     assert normalize_spaces(page.select('main h2')[0].text) == (
-        'Waiting for approval'
+        'Live broadcasts'
     )
     assert [
         normalize_spaces(row.text) for row in page.select('table')[0].select('tbody tr')
     ] == [
-        'Example template To England and Scotland Prepared by Test User',
+        'Example template To England and Scotland Live until tomorrow at 2:20am',
     ]
 
     assert normalize_spaces(page.select('main h2')[1].text) == (
-        'Live broadcasts'
+        'Waiting for approval'
     )
     assert [
         normalize_spaces(row.text) for row in page.select('table')[1].select('tbody tr')
     ] == [
-        'Example template To England and Scotland Live until tomorrow at 2:20am',
+        'Example template To England and Scotland Prepared by Test User',
     ]
 
     assert normalize_spaces(page.select('main h2')[2].text) == (