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/assets/stylesheets/components/template-picker.scss b/app/assets/stylesheets/components/template-picker.scss deleted file mode 100644 index 1b2851194..000000000 --- a/app/assets/stylesheets/components/template-picker.scss +++ /dev/null @@ -1,33 +0,0 @@ -.template-picker { - - &-name { - @include bold-19; - padding-left: 5px; - } - - &-option { - - white-space: nowrap; - clear: both; - - &-radio { - padding-right: 10px; - box-sizing: border-box; - vertical-align: top; - width: 33%; - display: inline-block; - } - - .block-label { - display: inline-block; - } - - .sms-message { - display: inline-block; - vertical-align: top; - max-width: 66%; - } - - } - -} diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 59b450ec7..38d1547e1 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -32,7 +32,6 @@ // Specific to this application @import 'grids'; -@import 'components/template-picker'; @import 'components/placeholder'; @import 'components/sms-message'; @import 'components/page-footer'; diff --git a/app/main/views/_templates.py b/app/main/views/_templates.py index da7f97c32..6d20217ce 100644 --- a/app/main/views/_templates.py +++ b/app/main/views/_templates.py @@ -1,39 +1,12 @@ templates = [ { 'type': 'sms', - 'name': 'Confirmation', - 'body': 'Lasting power of attorney: We’ve received your application. Applications take between 8 and 10 weeks to process.' # noqa + 'name': 'Confirmation with details Jan 2016', + 'body': '((name)), we’ve received your ((thing)). We’ll contact you again within 1 week.' }, { 'type': 'sms', - 'name': 'Reminder', - 'body': 'Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)). Tax your vehicle at www.gov.uk/vehicle-tax' # noqa - }, - { - 'type': 'sms', - 'name': 'Warning', - 'body': 'Vehicle tax: Your vehicle tax for ((registration number)) has expired. Tax your vehicle at www.gov.uk/vehicle-tax' # noqa - }, - { - 'type': 'email', - 'name': 'Application alert 06/2016', - 'subject': 'Your lasting power of attorney application', - 'body': """Dear ((name)), - -When you’ve made your lasting power of attorney (LPA), you need to register it \ -with the Office of the Public Guardian (OPG). - -You can apply to register your LPA yourself if you’re able to make your own decisions. - -Your attorney can also register it for you. You’ll be told if they do and you can \ -object to the registration. - -It takes between 8 and 10 weeks to register an LPA if there are no mistakes in the application. - """ - }, - { - 'type': 'sms', - 'name': 'Air quality alert', - 'body': 'Air pollution levels will be ((level)) in ((region)) tomorrow.' - }, + 'name': 'Confirmation Jan 2016', + 'body': 'We’ve received your payment. We’ll contact you again within 1 week.' + } ] 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 %} +