Make email pattern work in new context

The email pattern looked a bit shonky when displayed in a narrower column. This
commit fixes it by making the email’s metadata (eg subject, from) into a table,
which it sort of is. This means that it is more flexible about the size of
container in which it sits.

app/assets/stylesheets/components/email-message.scss

@@ -7,9 +7,26 @@
     margin: 20px 0 10px 0;
   }
 
-  &-subject,
+  &-meta {
-  &-from {
+
-    margin: 10px 0;
+    @include core-19;
+    margin: 0;
+
+    td,
+    th {
+      @include core-19;
+      border-bottom: 0;
+      border-top: 1px solid $border-colour;
+    }
+
+    th {
+      color: $secondary-text-colour;
+    }
+
+    td {
+      width: 99%;
+    }
+
   }
 
   &-from {

app/assets/stylesheets/components/sms-message.scss

@@ -40,7 +40,7 @@
 .sms-message-use-links {
 
   @include copy-19;
-  margin-top: 55px;
+  margin-top: 52px;
 
   a {
 

app/main/views/templates.py

@@ -31,7 +31,7 @@ def add_service_template(service_id, template_type):
 
     if form.validate_on_submit():
         tdao.insert_service_template(
-            form.name.data, template['template_type'], form.template_content.data, service_id, form.subject.data or None
+            form.name.data, template_type, form.template_content.data, service_id, form.subject.data or None
         )
         return redirect(
             url_for('.choose_template', service_id=service_id, template_type=template_type)

app/templates/components/email-message.html

@@ -9,29 +9,27 @@
     </h3>
   {% endif %}
   <div class="email-message">
-    {% if from_name and from_address %}
+    {% if from_name or subject %}
-      <div class="email-message-from">
+      <table class="email-message-meta">
-        <div class="grid-row">
+        <tbody>
-          <div class="column-one-eighth">
+          {% if from_name and from_address %}
-            <span class="form-hint">From</span>
+            <tr>
-          </div>
+              <th>From</th>
-          <div class="column-seven-eighths">
+              <td>
-            {{ from_name }} &lt;{{ from_address }}&gt;
+                {{ from_name }} &lt;{{ from_address }}&gt;
-          </div>
+              </td>
-        </div>
+            </tr>
-      </div>
+          {% endif %}
-    {% endif %}
+          {% if subject %}
-    {% if subject %}
+            <tr class="email-message-meta">
-      <div class="email-message-subject">
+              <th>Subject</th>
-        <div class="grid-row">
+              <td>
-          <div class="column-one-eighth">
+                {{ subject }}
-            <span class="form-hint">Subject</span>
+              </td>
-          </div>
+            </div>
-          <div class="column-seven-eighths">
+          {% endif %}
-            {{ subject }}
+        </tbody>
-          </div>
+      </table>
-        </div>
-      </div>
     {% endif %}
     <div class="email-message-body">
       {{ body|nl2br }}

app/templates/views/choose-email-template.html

@@ -29,7 +29,7 @@
     {% endif %}
 
     <p>
-      <a href="{{ url_for('.add_service_template', service_id=service_id, template_type='sms') }}" class="button">Add a new template</a>
+      <a href="{{ url_for('.add_service_template', service_id=service_id, template_type='email') }}" class="button">Add a new template</a>
     </p>
 
   </form>