Improvements to send SMS page

- make messages align horizontally
- change wording of step 2 (from Lorena)
This commit is contained in:
Chris Hill-Scott
2015-12-11 14:20:44 +00:00
parent d2562889b8
commit c6a73c287a
4 changed files with 20 additions and 15 deletions

View File

@@ -2,6 +2,7 @@
display: inline; display: inline;
background: $light-blue; background: $light-blue;
color: $white; color: $white;
white-space: nowrap;
padding: 0 5px; padding: 0 5px;
border-radius: 3px; border-radius: 3px;
} }

View File

@@ -10,17 +10,22 @@
white-space: nowrap; white-space: nowrap;
clear: both; clear: both;
.block-label { &-radio {
float: none; padding-right: 10px;
clear: none; box-sizing: border-box;
display: inline-block;
margin-right: 10px;
vertical-align: top; vertical-align: top;
width: 33%;
display: inline-block;
}
.block-label {
display: inline-block;
} }
.sms-message { .sms-message {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
max-width: 66%;
} }
} }

View File

@@ -33,5 +33,6 @@
@import "components/sms-message"; @import "components/sms-message";
@import "components/button"; @import "components/button";
@import "components/table"; @import "components/table";
// TODO: break this up // TODO: break this up
@import "app"; @import "app";

View File

@@ -15,10 +15,12 @@
<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 class="block-label" for="template-{{loop.index}}"> <div class="template-picker-option-radio">
{{ template.name }} <label class="block-label" for="template-{{loop.index}}">
<input type="radio" name="template" id="template-{{loop.index}}" value="{{ template.name }}" /> {{ template.name }}
</label> <input type="radio" name="template" id="template-{{loop.index}}" value="{{ template.name }}" />
</label>
</div>
{{ sms_message(template.body) }} {{ sms_message(template.body) }}
</div> </div>
{% endfor %} {% endfor %}
@@ -30,14 +32,10 @@
<h2 class="heading-medium">2. Add recipients</h2> <h2 class="heading-medium">2. Add recipients</h2>
<p> <p>
Add recipients by uploading a CSV Upload a CSV file to add your recipients details.
</p> </p>
<p> <p>
Format the cells as text in your spreadsheet app this stores the mobile You can also <a href="#">download an example CSV</a>.
numbers correctly
</p>
<p>
You can also <a href="#">download an example</a>
</p> </p>
<p> <p>
<input type="file" /> <input type="file" />