improved the person detail table slightly

1 files changed, 106 insertions, 106 deletions

diff --git a/ctrack/organisations/templates/organisations/person_detail.html b/ctrack/organisations/templates/organisations/person_detail.html
index 1bedb35..b51a891 100644
--- a/ctrack/organisations/templates/organisations/person_detail.html
+++ b/ctrack/organisations/templates/organisations/person_detail.html
@@ -1,121 +1,121 @@
 {% extends "base.html" %}
 
 {% block title %}
-{{ person.get_full_name }}
+  {{ person.get_full_name }}
 {% endblock %}
 
 {% block content %}
 
 
-<div class="container mt-3">
+  <div class="container my-3">
     <div class="row">
-        <h3>{{ person.get_full_name }}</h3>
+      <div class="col">
+        <h3>{{ person.get_full_name }} | <span class="text-muted">{{ person.organisation.name }}</span>
+          {% if person.primary_nis_contact %}
+            <span class="badge badge-success">NIS Primary Contact</span>
+          {% elif person.voluntary_point_of_contact %}
+            <span class="badge badge-dark">Voluntary Point of Contact</span>
+          {% else %}
+            &nbsp;
+          {% endif %}
+        </h3>
+      </div>
     </div>
     <div class="row">
-        <h5>{{ person.organisation.name }}</h5>
-    </div>
-    <div class="row">
-        <div class="container-fluid">
-            <table class="table table-striped table-condensed">
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Name</strong></td>
-                    <td class="col-9">{{ person.get_full_name }}</td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Job Title</strong></td>
-                    <td class="col-9">{{ person.job_title }}</td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Organisation</strong></td>
-                    <td class="col-9"><a href="{% url "organisations:detail" person.organisation.slug %}">{{ person.organisation.name }}</a></td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Role</strong></td>
-                    <td class="col-9">{{ person.role.name }}</td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>NIS Primary Point of Contact</strong></td>
-                    {% if person.primary_nis_contact %}
-                        <td class="col-9">Yes</td>
-                    {% else %}
-                        <td class="col-9">No</td>
-                    {% endif %}
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Voluntary Point of Contact</strong></td>
-                    {% if person.voluntary_point_of_contact %}
-                        <td class="col-9">Yes</td>
-                    {% else %}
-                        <td class="col-9">No</td>
-                    {% endif %}
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Has Egress</strong></td>
-                    {% if person.has_egress %}
-                        <td class="col-9">Yes</td>
-                    {% else %}
-                        <td class="col-9">No</td>
-                    {% endif %}
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Email</strong></td>
-                    <td class="col-9"><a href="mailto:{{ person.email }}">{{ person.email }}</a></td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Secondary Email</strong></td>
-                    <td class="col-9"><a href="mailto:{{ person.secondary_email }}">{{ person.secondary_email }}</a></td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Mobile Phone</strong></td>
-                    <td class="col-9">{{ person.mobile }}</td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Land line</strong></td>
-                    <td class="col-9">{{ person.landline }}</td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Updated</strong></td>
-                    <td class="col-9">{{ person.date_updated }}</td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Clearance Level</strong></td>
-                    <td class="col-9">{{ person.clearance }}</td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Clearance Sponsor</strong></td>
-                    <td class="col-9">{{ person.clearance_sponsor.get_full_name }}</td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Clearance Start Date</strong></td>
-                    <td class="col-9">{{ person.clearance_start_date }}</td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Clearance Last Checked</strong></td>
-                    <td class="col-9">{{ person.clearance_last_checked }}</td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Clearance Expiry</strong></td>
-                    <td class="col-9">{{ person.clearance_expiry }}</td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Active</strong></td>
-                    <td class="col-9">{{ person.active }}</td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Date Ended</strong></td>
-                    <td class="col-9">{{ person.date_ended }}</td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Predecessor</strong></td>
-                    <td class="col-9">{{ person.predecessor }}</td>
-                </tr>
-                <tr class="d-flex">
-                    <td class="col-3"><strong>Comments</strong></td>
-                    <td class="col-9">{{ person.comments }}</td>
-                </tr>
-            </table>
+      <div class="container-fluid">
+        <div class="col-12 m-2">
+          <p class="h5">Key Details</p>
+          <table class="table table-bordered">
+            <tr class="d-flex">
+              <td class="col-3"><strong>Job Title</strong></td>
+              <td class="col-9">{{ person.job_title }}</td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Role</strong></td>
+              <td class="col-9">{{ person.role.name }}</td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Active</strong></td>
+              <td class="col-9">{{ person.active }}</td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Predecessor</strong></td>
+              <td class="col-9">{{ person.predecessor }}</td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Comments</strong></td>
+              <td class="col-9">{{ person.comments }}</td>
+            </tr>
+          </table>
+
+          <p class="h5">Contact Details</p>
+          <table class="table table-bordered">
+            <tr class="d-flex">
+              <td class="col-3"><strong>Has Egress</strong></td>
+              {% if person.has_egress %}
+                <td class="col-9">Yes</td>
+              {% else %}
+                <td class="col-9">No</td>
+              {% endif %}
+              </td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Email</strong></td>
+              <td class="col-9"><a href="mailto:{{ person.email }}">{{ person.email }}</a></td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Secondary Email</strong></td>
+              <td class="col-9"><a href="mailto:{{ person.secondary_email }}">{{ person.secondary_email }}</a></td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Mobile Phone</strong></td>
+              <td class="col-9">{{ person.mobile }}</td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Land line</strong></td>
+              <td class="col-9">{{ person.landline }}</td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Updated</strong></td>
+              <td class="col-9">{{ person.date_updated }}</td>
+            </tr>
+          </table>
+
+          <p class="h5">Clearance Details</p>
+          <table class="table table-bordered">
+            <tr class="d-flex">
+              <td class="col-3"><strong>Clearance Level</strong></td>
+              <td class="col-9">{{ person.clearance }}</td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Clearance Sponsor</strong></td>
+              <td class="col-9">{{ person.clearance_sponsor.get_full_name }}</td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Clearance Start Date</strong></td>
+              <td class="col-9">{{ person.clearance_start_date }}</td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Clearance Last Checked</strong></td>
+              <td class="col-9">{{ person.clearance_last_checked }}</td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Clearance Expiry</strong></td>
+              <td class="col-9">{{ person.clearance_expiry }}</td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Active</strong></td>
+              <td class="col-9">{{ person.active }}</td>
+            </tr>
+            <tr class="d-flex">
+              <td class="col-3"><strong>Date Ended</strong></td>
+              <td class="col-9">{{ person.date_ended }}</td>
+            </tr>
+          </table>
+
         </div>
+      </div>
     </div>
-</div>
+  </div>
 
 {% endblock content %}