Merge pull request #3511 from alphagov/style-broadcast-message

Add some styling to broadcast messages

app/assets/images/exclamation.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 17.5 14.5" style="enable-background:new 0 0 17.5 14.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0B0B0B;}
+</style>
+<path class="st0" d="M8.6,3.9l5.3,8.6H3.5L8.6,3.9 M8.6,0L0,14.5h17.5L8.6,0L8.6,0z"/>
+<g>
+	<circle class="st0" cx="8.8" cy="10.9" r="1.1"/>
+	<path d="M8.8,9.8c-0.6,0-1.1,0.5-1.1,1.1c0,0.6,0.5,1.1,1.1,1.1s1.1-0.5,1.1-1.1C9.8,10.3,9.4,9.8,8.8,9.8L8.8,9.8z"/>
+</g>
+<polygon class="st0" points="8.2,6.4 9.3,6.4 9.7,6.8 9.6,9.3 8.7,9.1 8,9.3 7.8,6.9 "/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

app/assets/stylesheets/components/area-list.scss

@@ -55,6 +55,15 @@
 
     }
 
+    &--unremoveable {
+      padding-right: govuk-spacing(2);
+      background: $light-blue-25;
+      border-color: $light-blue-25;
+      color: $govuk-blue;
+      font-weight: bold;
+      margin-right: govuk-spacing(3);
+    }
+
   }
 
   .govuk-button {

app/assets/stylesheets/components/broadcast-message.scss

@@ -0,0 +1,33 @@
+.broadcast-message-wrapper {
+
+  position: relative;
+  width: 100%;
+  max-width: 464px;
+  box-sizing: border-box;
+  padding: govuk-spacing(9) govuk-spacing(3) govuk-spacing(3) govuk-spacing(3);
+  background: $panel-colour;
+  border: 2px solid $black;
+  border-radius: 5px;
+  white-space: normal;
+  margin: govuk-spacing(2) 0 govuk-spacing(4) 0;
+  clear: both;
+  word-wrap: break-word;
+
+  &:before {
+    content: "Emergency alert";
+    display: block;
+    border-bottom: 2px solid $black;
+    position: absolute;
+    top: govuk-spacing(2);
+    left: 0;
+    padding: 2px govuk-spacing(3) govuk-spacing(2) 45px;
+    width: 100%;
+    box-sizing: border-box;
+    font-weight: bold;
+    background: file-url('exclamation.svg');
+    background-size: 20px;
+    background-repeat: no-repeat;
+    background-position: govuk-spacing(3) 3px;
+  }
+
+}

app/assets/stylesheets/main.scss

@@ -71,6 +71,7 @@ $path: '/static/images/';
 @import 'components/task-list';
 @import 'components/loading-indicator';
 @import 'components/area-list';
+@import 'components/broadcast-message';
 
 @import 'views/dashboard';
 @import 'views/users';

app/main/views/broadcast.py

@@ -1,5 +1,6 @@
 from flask import redirect, render_template, request, session, url_for
 from notifications_utils.broadcast_areas import broadcast_area_libraries
+from notifications_utils.template import BroadcastPreviewTemplate
 from orderedset import OrderedSet
 
 from app import current_service
@@ -111,4 +112,8 @@ def preview_broadcast_message(service_id):
         selected=list(broadcast_area_libraries.get_areas(
             *selected_areas
         )),
+        template=BroadcastPreviewTemplate({
+            'content': 'Message here',
+            'template_type': 'broadcast',
+        })
     )

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

@@ -58,7 +58,7 @@
 
 {% block maincolumn_content %}
 
-  {{ page_header("Choose where to broadcast to", back_link="{{ url_for('.broadcast', service_id=current_service.id) }}") }}
+  {{ page_header("Choose where to broadcast to", back_link=url_for('.choose_template', service_id=current_service.id)) }}
 
   {% for area in selected %}
     {% if loop.first %}

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

@@ -11,13 +11,13 @@
 
 {% block maincolumn_content %}
 
-  {{ page_header("Preview message", back_link=url_for('.preview_broadcast_areas', service_id=current_service.id)) }}
+  {{ page_header("Preview", back_link=url_for('.preview_broadcast_areas', service_id=current_service.id)) }}
 
   {% for area in selected %}
     {% if loop.first %}
       <ul class="area-list">
     {% endif %}
-        <li class="area-list-item">
+        <li class="area-list-item area-list-item--unremoveable">
           {{ area.name }}
         </li>
     {% if loop.last %}
@@ -28,7 +28,7 @@
   {% if selected %}
 
     <p class="govuk-body">
-      {{ "<message here>" }}
+      {{ template|string }}
     </p>
 
     {% call form_wrapper() %}