From dbc55e76b02e204a529530e415116c9ba776bfe6 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 10 Dec 2015 17:54:05 +0000 Subject: [PATCH] Add table of recipients Uses an adapted version of the 'summary table' pattern from Digital Marketplace frontend toolkit: http://alphagov.github.io/digitalmarketplace-frontend-toolkit/summary-table.html --- .../stylesheets/components/placeholder.scss | 2 +- app/assets/stylesheets/components/table.scss | 7 ++++ app/assets/stylesheets/main.scss | 3 +- app/main/views/index.py | 8 +++- app/templates/components/placeholder.html | 3 ++ app/templates/components/table.html | 39 +++++++++++++++++++ app/templates/views/check-sms.html | 33 +++++++++++----- app/templates/views/send-sms.html | 4 ++ 8 files changed, 87 insertions(+), 12 deletions(-) create mode 100644 app/assets/stylesheets/components/table.scss create mode 100644 app/templates/components/placeholder.html create mode 100644 app/templates/components/table.html diff --git a/app/assets/stylesheets/components/placeholder.scss b/app/assets/stylesheets/components/placeholder.scss index 3eed3e1e5..30f528c3b 100644 --- a/app/assets/stylesheets/components/placeholder.scss +++ b/app/assets/stylesheets/components/placeholder.scss @@ -3,5 +3,5 @@ background: $light-blue; color: $white; padding: 0 5px; - box-shadow: inset 0 0 0 2px $panel-colour; + border-radius: 3px; } diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss new file mode 100644 index 000000000..33ff865ef --- /dev/null +++ b/app/assets/stylesheets/components/table.scss @@ -0,0 +1,7 @@ +.table { + + &-heading { + text-align: left; + } + +} diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index ebe01c9ec..e52c6d9d4 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -30,6 +30,7 @@ @import "components/sms-message"; @import "components/placeholder"; @import "components/template-picker"; +@import "components/table"; -// Break this uq +// TODO: break this up into components @import "app"; diff --git a/app/main/views/index.py b/app/main/views/index.py index cf40f02b8..ecf829350 100644 --- a/app/main/views/index.py +++ b/app/main/views/index.py @@ -68,7 +68,13 @@ def sendsms(): def checksms(): return render_template( 'views/check-sms.html', - recipient_count=159, + recipients=[ + {'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'}, + {'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'}, + {'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'}, + {'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'}, + {'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'} + ], message_template=""" Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)). Tax your vehicle at www.gov.uk/vehicle-tax diff --git a/app/templates/components/placeholder.html b/app/templates/components/placeholder.html new file mode 100644 index 000000000..e9deb0f4a --- /dev/null +++ b/app/templates/components/placeholder.html @@ -0,0 +1,3 @@ +{% macro placeholder(variable) %} + {{variable}} +{% endmacro %} diff --git a/app/templates/components/table.html b/app/templates/components/table.html new file mode 100644 index 000000000..c104c926a --- /dev/null +++ b/app/templates/components/table.html @@ -0,0 +1,39 @@ +{% macro table(items, caption='', field_headings='', field_headings_visible=True) -%} + + + + + {% for field_heading in field_headings %} + + {% endfor %} + + + + {% if items %} + {% for item in items %} + + {{ caller(item) }} + + {% endfor %} + {% else %} +

+ {{ empty_message }} +

+ {% endif %} + +
+ {{ caption }} +
+ {% if field_headings_visible %} + {{ field_heading }} + {% else %} + {{ field_heading }} + {% endif %} +
+{%- endmacro %} + +{% macro field(first=False, wide=False, action=False) -%} + + {{ caller() }} + +{%- endmacro %} diff --git a/app/templates/views/check-sms.html b/app/templates/views/check-sms.html index 7ddbc030f..9219404ac 100644 --- a/app/templates/views/check-sms.html +++ b/app/templates/views/check-sms.html @@ -1,22 +1,37 @@ {% extends "admin_template.html" %} {% from "components/sms-message.html" import sms_message %} +{% from "components/table.html" import table, field %} +{% from "components/placeholder.html" import placeholder %} {% block page_title %} -GOV.UK Notify | Send text messages + GOV.UK Notify | Send text messages {% endblock %} {% block content %} -
-
-

Send text messages

+
+
+

Send text messages

- {{ sms_message(message_template) }} +

Check and confirm

+ {{ sms_message(message_template) }} -

- Send {{recipient_count}} text messages -

+

+ Send {{recipients|length}} text messages +

+
-
+ + {% call(item) table( + recipients, + caption="Preview of the first 3 recipients", + field_headings=[ + 'Recipient', placeholder('registration number'), placeholder('date') + ] + ) %} + {% call field() %}{{item.phone}}{% endcall %} + {% call field() %}{{item.registration}}{% endcall %} + {% call field() %}{{item.date}}{% endcall %} + {% endcall %} {% endblock %} diff --git a/app/templates/views/send-sms.html b/app/templates/views/send-sms.html index 36d0624f7..de4fb659d 100644 --- a/app/templates/views/send-sms.html +++ b/app/templates/views/send-sms.html @@ -23,6 +23,10 @@
{% endfor %} +

+ Create a new template +

+

2. Add recipients