Make labels blocks, put next to message templates

This commit is contained in:
Chris Hill-Scott
2015-12-11 11:32:24 +00:00
parent 703eed3d36
commit 64f03bed06
4 changed files with 24 additions and 10 deletions

View File

@@ -28,14 +28,14 @@
} }
&-wrapper { &-wrapper {
display: inline-block;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
z-index: 30; z-index: 30;
width: 100%;
height: 100%;
padding: $gutter/2; padding: $gutter/2;
background: $panel-colour; background: $panel-colour;
border-radius: 5px; border-radius: 5px;
white-space: normal;
} }
} }

View File

@@ -7,9 +7,22 @@
&-option { &-option {
input { white-space: nowrap;
float: left; 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;
} }
} }
} }

View File

@@ -20,6 +20,7 @@
@import "govuk_elements/public/sass/elements/details"; @import "govuk_elements/public/sass/elements/details";
@import "govuk_elements/public/sass/elements/elements-typography"; @import "govuk_elements/public/sass/elements/elements-typography";
@import "govuk_elements/public/sass/elements/forms"; @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/icons";
@import "govuk_elements/public/sass/elements/layout"; @import "govuk_elements/public/sass/elements/layout";
@import "govuk_elements/public/sass/elements/lists"; @import "govuk_elements/public/sass/elements/lists";
@@ -27,9 +28,9 @@
@import "govuk_elements/public/sass/elements/tables"; @import "govuk_elements/public/sass/elements/tables";
// Extra CSS for this application // Extra CSS for this application
@import "components/template-picker";
@import "components/sms-message"; @import "components/sms-message";
@import "components/placeholder"; @import "components/placeholder";
@import "components/template-picker";
@import "components/button"; @import "components/button";
@import "components/table"; @import "components/table";

View File

@@ -15,16 +15,16 @@
<h2 class="heading-medium">1. Choose text message template</h2> <h2 class="heading-medium">1. Choose text message template</h2>
{% for template in message_templates %} {% for template in message_templates %}
<div class="template-picker-option"> <div class="template-picker-option">
<label> <label class="block-label" for="template-{{loop.index}}">
<span class="template-picker-name">{{ template.name }}</span> {{ template.name }}
<input type="radio" name="template" value="{{ template.name }}" /> <input type="radio" name="template" id="template-{{loop.index}}" value="{{ template.name }}" />
{{ sms_message(template.body) }}
</label> </label>
{{ sms_message(template.body) }}
</div> </div>
{% endfor %} {% endfor %}
<p> <p>
<a href="{{ url_for(".managetemplates") }}">Create a new template</a> <a href="{{ url_for(".managetemplates") }}">Or create a new template</a>
</p> </p>
<h2 class="heading-medium">2. Add recipients</h2> <h2 class="heading-medium">2. Add recipients</h2>