Merge pull request #3681 from alphagov/adjust-hierarchy-broadcast-page

Re-order hierarchy of information when viewing a single broadcast

app/assets/stylesheets/app.scss

@@ -252,6 +252,16 @@ details .arrow {
     //box-shadow: inset 0 0 0 2px $red, inset 0 0 0 5px $white;
   }
 
+  &--left {
+
+    &:before {
+      float: left;
+      margin-left: 0;
+      margin-right: 10px;
+    }
+
+  }
+
 }
 
 input:-webkit-autofill::first-line {

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

@@ -32,15 +32,11 @@
         </p>
       {% elif item.status == 'broadcasting' %}
         <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' %}
-        <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
-          Stopped {{ item.cancelled_at|format_datetime_relative }}
+          Live since {{ item.starts_at|format_datetime_relative }}
         </p>
       {% else %}
         <p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
-          Finished {{ item.finishes_at|format_datetime_relative }}
+          Broadcast {{ item.starts_at|format_datetime_relative }}
         </p>
       {% endif %}
     {% endcall %}

app/templates/views/broadcast/preview-message.html

@@ -14,19 +14,17 @@
 
   {{ page_header("Preview", back_link=url_for('.preview_broadcast_areas', service_id=current_service.id, broadcast_message_id=broadcast_message.id)) }}
 
-  {% for area in broadcast_message.areas %}
-    {% if loop.first %}
-      <ul class="area-list">
-    {% endif %}
+  {{ broadcast_message.template|string }}
+
+  <div class="govuk-!-margin-bottom-3">
+    <ul class="area-list">
+      {% for area in broadcast_message.areas %}
         <li class="area-list-item area-list-item--unremoveable">
           {{ area.name }}
         </li>
-    {% if loop.last %}
-      </ul>
-    {% endif %}
-  {% endfor %}
-
-  {{ broadcast_message.template|string }}
+      {% endfor %}
+    </ul>
+  </div>
 
   {% call form_wrapper() %}
     {{ page_footer('Submit for approval') }}

app/templates/views/broadcast/view-message.html

@@ -99,36 +99,27 @@
   {% else %}
     {{ page_header(broadcast_message.template_name) }}
 
-    <p class="govuk-body govuk-!-margin-bottom-3">
-      Created by {{ broadcast_message.created_by.name }} and approved by
-      {{ broadcast_message.approved_by.name }}.
-    </p>
-
-    <p class="govuk-body govuk-!-margin-bottom-3">
-      Started broadcasting
-      {{ broadcast_message.starts_at|format_datetime_human }}.
-    </p>
-
-    <p class="govuk-body">
-      {% if broadcast_message.status == 'pending-approval' %}
-        Will broadcast until {{ broadcast_message.finishes_at|format_datetime_relative }}.
-      {% elif broadcast_message.status == 'broadcasting' %}
-        Live until {{ broadcast_message.finishes_at|format_datetime_relative }}&ensp;
+    {% if broadcast_message.status == 'broadcasting' %}
+      <p class="govuk-body govuk-!-margin-bottom-2 live-broadcast live-broadcast--left">
+        Live since {{ broadcast_message.starts_at|format_datetime_relative }}&ensp;
         {%- if not hide_stop_link %}
-          <a href="{{ url_for('.cancel_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" class="destructive-link destructive-link--no-visited-state">Stop broadcast early</a>
+          <a href="{{ url_for('.cancel_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" class="destructive-link destructive-link--no-visited-state">Stop broadcasting</a>
         {% endif %}
-      {% elif broadcast_message.status == 'cancelled' %}
-        Stopped by {{ broadcast_message.cancelled_by.name }}
-        {{ broadcast_message.cancelled_at|format_datetime_human }}.
-      {% else %}
-        Finished broadcasting {{ broadcast_message.finishes_at|format_datetime_human }}.
-      {% endif %}
-    </p>
+      </p>
+    {% else %}
+      <p class="govuk-body govuk-!-margin-bottom-4">
+        Broadcast
+        {{ broadcast_message.starts_at|format_datetime_human }}.
+      </p>
+    {% endif %}
+
   {% endif %}
 
+  {{ broadcast_message.template|string }}
+
   {% for area in broadcast_message.areas %}
     {% if loop.first %}
-      <ul class="area-list govuk-!-margin-bottom-4">
+      <ul class="area-list">
     {% endif %}
         <li class="area-list-item area-list-item--unremoveable">
           {{ area.name }}
@@ -145,6 +136,26 @@
     }) }}
   </div>
 
-  {{ broadcast_message.template|string }}
+  {% if broadcast_message.status != 'pending-approval' %}
+    <p class="govuk-body govuk-!-margin-bottom-3">
+      Prepared by {{ broadcast_message.created_by.name }} and approved by
+      {{ broadcast_message.approved_by.name }}.
+    </p>
+  {% endif %}
+
+  {% if broadcast_message.status == 'broadcasting' %}
+    <p class="govuk-body">
+      Broadcasting stops {{ broadcast_message.finishes_at|format_datetime_human }}.
+    </p>
+  {% elif broadcast_message.status == 'cancelled' %}
+    <p class="govuk-body">
+      Stopped by {{ broadcast_message.cancelled_by.name }}
+      {{ broadcast_message.cancelled_at|format_datetime_human }}.
+    </p>
+  {% elif broadcast_message.status == 'completed' %}
+    <p class="govuk-body">
+      Finished broadcasting {{ broadcast_message.finishes_at|format_datetime_human }}.
+    </p>
+  {% endif %}
 
 {% endblock %}

tests/app/main/views/test_broadcast.py

@@ -302,7 +302,7 @@ def test_broadcast_dashboard(
     assert [
         normalize_spaces(row.text) for row in page.select('table')[0].select('tbody tr')
     ] == [
-        'Example template This is a test England Scotland Live until tomorrow at 2:20am',
+        'Example template This is a test England Scotland Live since today at 2:20am',
     ]
 
     assert normalize_spaces(page.select('main h2')[1].text) == (
@@ -338,7 +338,7 @@ def test_broadcast_dashboard_json(
     }
 
     assert 'Prepared by Test User' in json_response['pending_approval_broadcasts']
-    assert 'Live until tomorrow at 2:20am' in json_response['live_broadcasts']
+    assert 'Live since today at 2:20am' in json_response['live_broadcasts']
 
 
 @freeze_time('2020-02-20 02:20')
@@ -361,8 +361,8 @@ def test_previous_broadcasts_page(
     assert [
         normalize_spaces(row.text) for row in page.select('table')[0].select('tbody tr')
     ] == [
-        'Example template This is a test England Scotland Stopped 10 February at 2:20am',
-        'Example template This is a test England Scotland Finished yesterday at 8:20pm',
+        'Example template This is a test England Scotland Broadcast yesterday at 2:20am',
+        'Example template This is a test England Scotland Broadcast yesterday at 2:20pm',
     ]
 
 
@@ -1037,24 +1037,24 @@ def test_start_broadcasting(
         'status': 'broadcasting',
         'finishes_at': '2020-02-23T23:23:23.000000',
     }, [
-        'Created by Alice and approved by Bob.',
-        'Started broadcasting on 20 February at 8:20pm.',
-        'Live until tomorrow at 11:23pm Stop broadcast early',
+        'Live since 20 February at 8:20pm Stop broadcasting',
+        'Prepared by Alice and approved by Bob.',
+        'Broadcasting stops tomorrow at 11:23pm.'
     ]),
     ({
         'status': 'broadcasting',
         'finishes_at': '2020-02-22T22:20:20.000000',  # 2 mins before now()
     }, [
-        'Created by Alice and approved by Bob.',
-        'Started broadcasting on 20 February at 8:20pm.',
-        'Finished broadcasting today at 10:20pm.',
+        'Broadcast on 20 February at 8:20pm.',
+        'Prepared by Alice and approved by Bob.',
+        'Finished broadcasting today at 10:20pm.'
     ]),
     ({
-        'status': 'finished',
+        'status': 'completed',
         'finishes_at': '2020-02-21T21:21:21.000000',
     }, [
-        'Created by Alice and approved by Bob.',
-        'Started broadcasting on 20 February at 8:20pm.',
+        'Broadcast on 20 February at 8:20pm.',
+        'Prepared by Alice and approved by Bob.',
         'Finished broadcasting yesterday at 9:21pm.',
     ]),
     ({
@@ -1062,8 +1062,8 @@ def test_start_broadcasting(
         'cancelled_by_id': sample_uuid,
         'cancelled_at': '2020-02-21T21:21:21.000000',
     }, [
-        'Created by Alice and approved by Bob.',
-        'Started broadcasting on 20 February at 8:20pm.',
+        'Broadcast on 20 February at 8:20pm.',
+        'Prepared by Alice and approved by Bob.',
         'Stopped by Carol yesterday at 9:21pm.',
     ]),
 ))