From 64f03bed06d533aae76ebed6ba104eece64ebce2 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 11 Dec 2015 11:32:24 +0000
Subject: [PATCH] Make labels blocks, put next to message templates

---
 .../stylesheets/components/sms-message.scss     |  4 ++--
 .../stylesheets/components/template-picker.scss | 17 +++++++++++++++--
 app/assets/stylesheets/main.scss                |  3 ++-
 app/templates/views/send-sms.html               | 10 +++++-----
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss
index 0132c290c..83176f2ed 100644
--- a/app/assets/stylesheets/components/sms-message.scss
+++ b/app/assets/stylesheets/components/sms-message.scss
@@ -28,14 +28,14 @@
   }
 
   &-wrapper {
+    display: inline-block;
     box-sizing: border-box;
     position: relative;
     z-index: 30;
-    width: 100%;
-    height: 100%;
     padding: $gutter/2;
     background: $panel-colour;
     border-radius: 5px;
+    white-space: normal;
   }
 
 }
diff --git a/app/assets/stylesheets/components/template-picker.scss b/app/assets/stylesheets/components/template-picker.scss
index 262f53b76..e938dbb78 100644
--- a/app/assets/stylesheets/components/template-picker.scss
+++ b/app/assets/stylesheets/components/template-picker.scss
@@ -7,9 +7,22 @@
 
   &-option {
 
-    input {
-      float: left;
+    white-space: nowrap;
+    clear: both;
+
+    .block-label {
+      float: none;
+      clear: none;
+      display: inline-block;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .sms-message {
+      display: inline-block;
+      vertical-align: top;
     }
 
   }
+
 }
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 189d34b80..2c599e5ca 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -20,6 +20,7 @@
 @import "govuk_elements/public/sass/elements/details";
 @import "govuk_elements/public/sass/elements/elements-typography";
 @import "govuk_elements/public/sass/elements/forms";
+@import "govuk_elements/public/sass/elements/forms/form-block-labels";
 @import "govuk_elements/public/sass/elements/icons";
 @import "govuk_elements/public/sass/elements/layout";
 @import "govuk_elements/public/sass/elements/lists";
@@ -27,9 +28,9 @@
 @import "govuk_elements/public/sass/elements/tables";
 
 // Extra CSS for this application
+@import "components/template-picker";
 @import "components/sms-message";
 @import "components/placeholder";
-@import "components/template-picker";
 @import "components/button";
 @import "components/table";
 
diff --git a/app/templates/views/send-sms.html b/app/templates/views/send-sms.html
index 4082b50cc..26f6a513e 100644
--- a/app/templates/views/send-sms.html
+++ b/app/templates/views/send-sms.html
@@ -15,16 +15,16 @@
 				<h2 class="heading-medium">1. Choose text message template</h2>
 				{% for template in message_templates %}
 					<div class="template-picker-option">
-						<label>
-							<span class="template-picker-name">{{ template.name }}</span>
-							<input type="radio" name="template" value="{{ template.name }}" />
-							{{ sms_message(template.body) }}
+						<label class="block-label" for="template-{{loop.index}}">
+							{{ template.name }}
+							<input type="radio" name="template" id="template-{{loop.index}}" value="{{ template.name }}" />
 						</label>
+						{{ sms_message(template.body) }}
 					</div>
 				{% endfor %}
 
 				<p>
-					<a href="{{ url_for(".managetemplates") }}">Create a new template</a>
+					<a href="{{ url_for(".managetemplates") }}">Or create a new template</a>
 				</p>
 
 				<h2 class="heading-medium">2. Add recipients</h2>