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