darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-26 21:31:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add a ‘live broadcast’ indicator

Browse Source 
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.
This commit is contained in:
Chris Hill-Scott
2020-07-21 09:05:24 +01:00
parent ad1fe752e7
commit aed9bc3695
2 changed files with 44 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/assets/stylesheets/app.scss
View File

@@ -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;
}
}

2
app/templates/views/broadcast/partials/dashboard-table.html
View File

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