From 0cf3124f7351fe261cbafb071f7edaf6fef6fe02 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Wed, 8 Jul 2020 17:24:08 +0100 Subject: [PATCH 1/3] Add some styling to broadcast messages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This is borrowed from an earlier prototype, and is meant to be temporary – something better than just plain text. Text in generated content isn’t always announced by screen readers, so we should definitely move away from that once we understand what text will be shown on the phone and where it comes from. --- app/assets/images/exclamation.svg | 26 +++++++++++++++ .../components/broadcast-message.scss | 33 +++++++++++++++++++ app/assets/stylesheets/main.scss | 1 + .../views/broadcast/preview-areas.html | 2 +- 4 files changed, 61 insertions(+), 1 deletion(-) create mode 100644 app/assets/images/exclamation.svg create mode 100644 app/assets/stylesheets/components/broadcast-message.scss diff --git a/app/assets/images/exclamation.svg b/app/assets/images/exclamation.svg new file mode 100644 index 000000000..7c5e6d28f --- /dev/null +++ b/app/assets/images/exclamation.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/stylesheets/components/broadcast-message.scss b/app/assets/stylesheets/components/broadcast-message.scss new file mode 100644 index 000000000..4ccf1a423 --- /dev/null +++ b/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; + } + +} diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 5f08c25fe..062888810 100644 --- a/app/assets/stylesheets/main.scss +++ b/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'; diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html index 8599a7f67..c719f0f22 100644 --- a/app/templates/views/broadcast/preview-areas.html +++ b/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 %} From 846fcbb8dd5a4a4aecd0b62c78c196ca87f9f095 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Wed, 8 Jul 2020 17:31:51 +0100 Subject: [PATCH 2/3] Add a rendered template to the preview page --- app/main/views/broadcast.py | 5 +++++ app/templates/views/broadcast/preview-message.html | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/app/main/views/broadcast.py b/app/main/views/broadcast.py index 7e60f3f12..fbcd10189 100644 --- a/app/main/views/broadcast.py +++ b/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', + }) ) diff --git a/app/templates/views/broadcast/preview-message.html b/app/templates/views/broadcast/preview-message.html index fe595c850..79bfe72d4 100644 --- a/app/templates/views/broadcast/preview-message.html +++ b/app/templates/views/broadcast/preview-message.html @@ -28,7 +28,7 @@ {% if selected %}

- {{ "" }} + {{ template|string }}

{% call form_wrapper() %} From 4d0da6594de60fcf37dc7796279462e32072d7a1 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Wed, 8 Jul 2020 17:41:20 +0100 Subject: [PATCH 3/3] Add style for areas once selected Just having them in the boxes with the 2px black border made them look too much like textboxes. --- app/assets/stylesheets/components/area-list.scss | 9 +++++++++ app/templates/views/broadcast/preview-message.html | 4 ++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss index 24046d611..e7fb451c0 100644 --- a/app/assets/stylesheets/components/area-list.scss +++ b/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 { diff --git a/app/templates/views/broadcast/preview-message.html b/app/templates/views/broadcast/preview-message.html index 79bfe72d4..5073a1803 100644 --- a/app/templates/views/broadcast/preview-message.html +++ b/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 %}
    {% endif %} -
  • +
  • {{ area.name }}
    • {% if loop.last %}