From 127c381d220487250f56fcf78ff08099a1d1a4e8 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 25 Oct 2017 11:46:12 +0100
Subject: [PATCH] Tidy up layout of letter contact blocks

Linebreaks are an important part of the letter contact block, and make
it easier to read.

Bold text works for short pieces of info like email addresses or phone
numbers, but is too heavy for the letter contact blocks because they
tend to be longer.
---
 app/assets/stylesheets/views/users.scss       | 12 +++++++++-
 .../letter-contact-details.html               | 22 +++++++++----------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/views/users.scss b/app/assets/stylesheets/views/users.scss
index 57b3a2da4..4854de20f 100644
--- a/app/assets/stylesheets/views/users.scss
+++ b/app/assets/stylesheets/views/users.scss
@@ -1,3 +1,5 @@
+$item-top-padding: $gutter-half;
+
 .user-list {
 
   @include core-19;
@@ -5,8 +7,9 @@
 
   &-item {
 
-    padding: $gutter-half 150px $gutter-half 0;
+    padding: $item-top-padding 150px $gutter-half 0;
     border-top: 1px solid $border-colour;
+    position: relative;
 
     &:last-child {
       border-bottom: 1px solid $border-colour;
@@ -14,4 +17,11 @@
 
   }
 
+  &-edit-link {
+    text-align: right;
+    position: absolute;
+    top: $item-top-padding;
+    right: 0px;
+  }
+
 }
diff --git a/app/templates/views/service-settings/letter-contact-details.html b/app/templates/views/service-settings/letter-contact-details.html
index c52a42ec7..a017cf022 100644
--- a/app/templates/views/service-settings/letter-contact-details.html
+++ b/app/templates/views/service-settings/letter-contact-details.html
@@ -27,18 +27,16 @@
     {% endif %}
     {% for item in letter_contact_details %}
       <div class="user-list-item">
-        <h3>
-          <span class="heading-small">{{ item.contact_block }}</span>&ensp;<span class="hint">
-            {%- if item.is_default -%}
-              (default)
-            {% endif %}
-          </span>
-        </h3>
-        <ul class="tick-cross-list">
-          <li class="tick-cross-list-edit-link">
-            <a href="{{ url_for('.service_edit_letter_contact', service_id =current_service.id, letter_contact_id = item.id) }}">Change</a>
-          </li>
-        </ul>
+        <p>
+          {{ item.contact_block | nl2br | safe }}
+        </p>
+        <p class="hint">
+          {%- if item.is_default -%}
+            (default)
+          {% endif %}
+        </p>
+
+        <a class="user-list-edit-link" href="{{ url_for('.service_edit_letter_contact', service_id =current_service.id, letter_contact_id = item.id) }}">Change</a>
         {% if letter_contact_details|length  > 1 %}
           {{ api_key(item.id, thing="ID") }}
         {% endif %}