From 7ac08e9a85e3ab813627990269202abaf6141623 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 11 Dec 2015 17:25:04 +0000
Subject: [PATCH] Simplify check and send SMS page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit:
- removes the row numbering so it’s easier to scan the list of phone numbers
- adds subheadings for 'first three' and 'last three'
- puts the 'see all' link at the end
---
 .../{button.scss => submit-form.scss}         |  6 ++--
 app/assets/stylesheets/main.scss              |  2 +-
 app/templates/components/submit-form.html     | 11 ++++++
 app/templates/views/check-sms.html            | 35 +++++++++----------
 4 files changed, 33 insertions(+), 21 deletions(-)
 rename app/assets/stylesheets/components/{button.scss => submit-form.scss} (71%)
 create mode 100644 app/templates/components/submit-form.html

diff --git a/app/assets/stylesheets/components/button.scss b/app/assets/stylesheets/components/submit-form.scss
similarity index 71%
rename from app/assets/stylesheets/components/button.scss
rename to app/assets/stylesheets/components/submit-form.scss
index 46e7cd153..041c71773 100644
--- a/app/assets/stylesheets/components/button.scss
+++ b/app/assets/stylesheets/components/submit-form.scss
@@ -1,6 +1,8 @@
-.button {
+.submit-form {
 
-  &-secondary {
+  margin-bottom: 50px;
+
+  &-back-link {
     @include button($grey-1);
     padding: 0.52632em 0.78947em 0.26316em 0.78947em;
     @include inline-block;
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index e4cb5ff6f..e0591db04 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -31,7 +31,7 @@
 @import "components/template-picker";
 @import "components/placeholder";
 @import "components/sms-message";
-@import "components/button";
+@import "components/submit-form";
 @import "components/table";
 
 // TODO: break this up
diff --git a/app/templates/components/submit-form.html b/app/templates/components/submit-form.html
new file mode 100644
index 000000000..cd879a238
--- /dev/null
+++ b/app/templates/components/submit-form.html
@@ -0,0 +1,11 @@
+{% macro submit_form(button_text, back_link) %}
+  <div class="submit-form">
+    <form method="POST" enctype="multipart/form-data">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+      <input type="submit" class="button" value="{{ button_text }}" />
+      {% if back_link %}
+        <a class="submit-form-back-link" role="button" href="{{ back_link }}">Back</a>
+      {% endif %}
+    </form>
+  </div>
+{% endmacro %}
diff --git a/app/templates/views/check-sms.html b/app/templates/views/check-sms.html
index 91550665d..13084123a 100644
--- a/app/templates/views/check-sms.html
+++ b/app/templates/views/check-sms.html
@@ -2,6 +2,7 @@
 {% from "components/sms-message.html" import sms_message %}
 {% from "components/table.html" import table, field %}
 {% from "components/placeholder.html" import placeholder %}
+{% from "components/submit-form.html" import submit_form %}
 
 {% block page_title %}
 	GOV.UK Notify | Send text messages
@@ -15,31 +16,28 @@
 
 			<h2 class="heading-medium">Check and confirm</h2>
 
-	  	<p>
-				<form method="POST" enctype="multipart/form-data">
-					<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-			  	<input type="submit" class="button" value="Send {{ number_of_recipients }} text messages" />
-					<a class="button-secondary" role="button" href="{{ url_for(".sendsms") }}">Back</a>
-				</form>
-	  	</p>
+			{{ submit_form(
+				"Send {} text messages".format(number_of_recipients),
+				url_for(".sendsms")
+			) }}
+
+			<h3 class="heading-small">First 3 messages</h2>
 
 			{% if recipients.first_three and recipients.last_three %}
 
 				{% for recipient in recipients.first_three %}
 					{{ sms_message(
 						message_template|replace_placeholders(recipient),
-						"Row {} {}".format(loop.index, recipient['phone'])
+						"{}".format(recipient['phone'])
 					) }}
 				{% endfor %}
 
-				<p>
-					<a href="#">See rows 4 to {{ number_of_recipients - 3 }}</a>
-				</p>
+				<h3 class="heading-small">Last 3 messages</h2>
 
 				{% for recipient in recipients.last_three %}
 					{{ sms_message(
 						message_template|replace_placeholders(recipient),
-						"Row {} {}".format(number_of_recipients - 3 + loop.index, recipient['phone'])
+						"{}".format(recipient['phone'])
 					) }}
 				{% endfor %}
 
@@ -48,20 +46,21 @@
 				{% for recipient in recipients.all %}
 					{{ sms_message(
 						message_template|replace_placeholders(recipient),
-						"Row {} {}".format(loop.index, recipient['phone'])
+						"{}".format(recipient['phone'])
 					) }}
 				{% endfor %}
 
 			{% endif %}
 
 			<p>
-				<form method="POST" enctype="multipart/form-data">
-					<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-					<input type="submit" class="button" value="Send {{ number_of_recipients }} text messages" />
-					<a class="button-secondary" role="button" href="{{ url_for(".sendsms") }}">Back</a>
-				</form>
+				<a href="#">See all</a>
 			</p>
 
+			{{ submit_form(
+				"Send {} text messages".format(number_of_recipients),
+				url_for(".sendsms")
+			) }}
+
 		</div>
 	</div>