From aed9bc3695f0cf33cfbaa3cfa0db6998b7703464 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 21 Jul 2020 09:05:24 +0100
Subject: [PATCH] =?UTF-8?q?Add=20a=20=E2=80=98live=20broadcast=E2=80=99=20?=
 =?UTF-8?q?indicator?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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               | 43 +++++++++++++++++++
 .../broadcast/partials/dashboard-table.html   |  2 +-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
index 1135d69ab..ff4582e89 100644
--- a/app/assets/stylesheets/app.scss
+++ b/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;
+  }
+
+}
diff --git a/app/templates/views/broadcast/partials/dashboard-table.html b/app/templates/views/broadcast/partials/dashboard-table.html
index dbd342917..ea4bbb586 100644
--- a/app/templates/views/broadcast/partials/dashboard-table.html
+++ b/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' %}