From 482abb97d5726722ea6e6213c2331a9b611c80ac Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Wed, 20 Jan 2016 10:36:41 +0000 Subject: [PATCH] =?UTF-8?q?Put=20message=20previews=20on=20=E2=80=98Send?= =?UTF-8?q?=20SMS=E2=80=99=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A previous commit removed these to differentiate between this page and the manage templates page. It turns out that we do want previews on this page because: - the users for the two pages might be different—they might only be allowed to do one or the other depending what permissions they have - it’s useful to see what the placeholders in the message are before uploading a CSV, to make sure the CSV has the correct column headings This commit re-adds the message preview with a simpler UI. Discussed with @antimega and we both agreed that the speech bubble tails on the messages should go. --- app/assets/javascripts/main.js | 2 +- .../stylesheets/components/sms-message.scss | 96 ++++++++++--------- app/templates/admin_template.html | 6 +- app/templates/components/sms-message.html | 19 +++- app/templates/views/send-sms.html | 53 +++++----- 5 files changed, 101 insertions(+), 75 deletions(-) diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 1a8d54926..f19cc9f9c 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -1,3 +1,3 @@ $(() => GOVUK.modules.start()); -$(() => new GOVUK.SelectionButtons('.block-label input')); +$(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input')); diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss index a429edbaa..a72e7c939 100644 --- a/app/assets/stylesheets/components/sms-message.scss +++ b/app/assets/stylesheets/components/sms-message.scss @@ -1,53 +1,63 @@ -.sms-message { - - position: relative; +%sms-message-wrapper, +.sms-message-wrapper { + width: 100%; + box-sizing: border-box; + padding: $gutter/2; + background: $panel-colour; + border: 1px solid $panel-colour; + border-radius: 5px; + white-space: normal; margin: 0 0 $gutter 0; +} + +.sms-message-wrapper-with-radio { + @extend %sms-message-wrapper; + padding-left: 45px; + cursor: pointer; +} + +.sms-message-recipient { + @include copy-19; + color: $secondary-text-colour; + margin: -$gutter-half 0 $gutter 0; +} + +.sms-message-name { + @include bold-19; + margin: 30px 0 10px 0; +} + +.sms-message-picker { + display: block; + margin: 7px 0 0 0; + position: absolute; + left: 15px; + top: 50%; + z-index: 50; +} + +label.sms-message-option { + + display: block; + position: relative; + + &.selected { + + .sms-message-wrapper-with-radio { + background: $white; + border: 1px solid $text-colour; + } - &:before { - content: ''; - position: absolute; - z-index: 10; - bottom: -12px; - right: 5px; - width: 20px; - height: 25px; - border-radius: 100%; - background: $panel-colour; } - &:after { - content: ''; - position: absolute; - z-index: 20; - bottom: -15px; - right: -5px; - border-radius: 100%; - width: 20px; - height: 20px; - background: $white; - } + &.focused { - &-wrapper { - width: 100%; - display: inline-block; - box-sizing: border-box; - position: relative; - z-index: 30; - padding: $gutter/2; - background: $panel-colour; - border-radius: 5px; - white-space: normal; - } + outline: none; - &-recipient { - @include copy-19; - color: $secondary-text-colour; - margin: -$gutter-half 0 $gutter 0; - } + .sms-message-wrapper-with-radio { + box-shadow: 0 0 0 3px $yellow; + } - &-name { - @include bold-19; - margin: 50px 0 10px 0; } } diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html index d3ac7c6da..85ec76dd6 100644 --- a/app/templates/admin_template.html +++ b/app/templates/admin_template.html @@ -55,8 +55,10 @@ Service name - Switch to A N Other service - Add a new service to GOV.UK Notify +
+ Switch to A N Other service + Add a new service to GOV.UK Notify +
diff --git a/app/templates/components/sms-message.html b/app/templates/components/sms-message.html index a04a47c62..38d41f486 100644 --- a/app/templates/components/sms-message.html +++ b/app/templates/components/sms-message.html @@ -1,4 +1,9 @@ -{% macro sms_message(body, recipient=None, name=None, edit_link=None) %} +{% macro sms_message( + body, recipient=None, name=None, edit_link=None, input_name=None, input_index=None +) %} + {% if input_name %} +