From 89e81e92b43d8c8fb284d11de1a652390b448e8a Mon Sep 17 00:00:00 2001
From: Simon Cross <hodgestar@gmail.com>
Date: Tue, 14 Jul 2015 00:01:50 +0200
Subject: [PATCH] Simplify structure of contact details layout.

---
 go/base/static/css/contacts.less              |  23 ----
 .../templates/contacts/contact_detail.html    | 111 +++++++++---------
 2 files changed, 54 insertions(+), 80 deletions(-)

diff --git a/go/base/static/css/contacts.less b/go/base/static/css/contacts.less
index 7021158ee..eab856783 100644
--- a/go/base/static/css/contacts.less
+++ b/go/base/static/css/contacts.less
@@ -7,29 +7,6 @@
             width: 20em;
         }
     }
-
-    .details {
-        hr {
-            border: 1px solid #d9d8d3;
-            border-top: none;
-        }
-
-        h4 {
-            padding: 8px;
-        }
-
-        section {
-            padding: 4px;
-            margin: 8px;
-        }
-
-        .profile {
-        }
-
-        .extras {
-            max-width: 480px;
-        }
-    }
 }
 
 #recMatchFrm .modal-dialog {
diff --git a/go/contacts/templates/contacts/contact_detail.html b/go/contacts/templates/contacts/contact_detail.html
index 08340ca26..db83df2f2 100644
--- a/go/contacts/templates/contacts/contact_detail.html
+++ b/go/contacts/templates/contacts/contact_detail.html
@@ -15,66 +15,63 @@
 
 {% block content_main_list %}
     <div class="row">
-        <div class="col-md-4">
-            <form class="form-horizontal details" method="post" action="">
-                {% csrf_token %}
-                    <section class='profile'>
-                        <h4>Contact details</h4>
-                        {% if contact.created_at %}
-                          <p>Contact record created at {{ contact.created_at }}.</p>
-                        {% endif %}
-                        {{ form|crispy }}
-                    </section>
+        <form class="form-horizontal" method="post" action="">
+            {% csrf_token %}
 
-                    {% if contact_extra_items %}
-                      <hr>
-                      <section class="extras">
-                          <h4>Extra details</h4>
-                          <table class="table">
-                              <thead>
-                                  <tr>
-                                      <th>Name</td>
-                                      <th>Value</td>
-                                  </tr>
-                              </thead>
-                              <tbody>
-                                  {% for field, value in contact_extra_items %}
-                                  <tr>
-                                      <td>{{ field }}</td>
-                                      <td>{{ value }}</td>
-                                  </tr>
-                                  {% endfor %}
-                              </tbody>
-                        </table>
-                      </section>
-                    {% endif %}
+            <div class="col-md-4">
+                <h4>Contact details</h4>
+                {% if contact.created_at %}
+                    <p>Contact record created at {{ contact.created_at }}.</p>
+                {% endif %}
+                {{ form|crispy }}
+            </div>
 
-                    {% if contact_subscription_items %}
-                      <hr>
-                      <section class="extras">
-                          <h4>Subscriptions</h4>
-                          <table class="table">
-                              <thead>
-                                  <tr>
-                                      <th>Name</td>
-                                      <th>Position</td>
-                                  </tr>
-                              </thead>
-                              <tbody>
-                                  {% for field, value in contact_subscription_items %}
-                                  <tr>
-                                      <td>{{ field }}</td>
-                                      <td>{{ value }}</td>
-                                  </tr>
-                                  {% endfor %}
-                              </tbody>
-                        </table>
-                      </section>
-                    {% endif %}
+            {% if contact_extra_items %}
+            <div class="col-md-4 col-md-push-1">
+                <h4>Extra details</h4>
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Name</td>
+                            <th>Value</td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for field, value in contact_extra_items %}
+                        <tr>
+                            <td>{{ field }}</td>
+                            <td>{{ value }}</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+            {% endif %}
 
-                    <button type="submit" class="btn btn-primary" data-loading-text="Saving...">Save changes</button>
-            </form>
-        </div>
+            {% if contact_subscription_items %}
+            <div class="col-md-4 col-md-push-1">
+                <h4>Subscriptions</h4>
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Name</td>
+                            <th>Position</td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for field, value in contact_subscription_items %}
+                        <tr>
+                            <td>{{ field }}</td>
+                            <td>{{ value }}</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+            {% endif %}
+
+            <button type="submit" class="btn btn-primary" data-loading-text="Saving...">Save changes</button>
+        </form>
     </div>
 {% endblock %}