Add a ‘live broadcast’ indicator

We have a reckon that live broadcasts don’t feel prominent,
consequential or active enough on the dashboard.

This commit adds an animated component, similar to an ‘on air’ indicator
in a broadcast studio, or a ‘recording’ indicator on a video camera.

This is one option for addressing our reckon. We shouldn’t merge this
until we have a better understanding of the problem from another round
of user research.

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/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' %}