consistency tweaks

1 files changed, 47 insertions, 43 deletions

diff --git a/ctrack/organisations/templates/organisations/organisation_list.html b/ctrack/organisations/templates/organisations/organisation_list.html
index 5ec9710..cbd87dd 100644
--- a/ctrack/organisations/templates/organisations/organisation_list.html
+++ b/ctrack/organisations/templates/organisations/organisation_list.html
@@ -1,51 +1,55 @@
 {% extends "base.html" %}
+{% load static %}
 
-{% block title %}
-  Organisations
-{% endblock %}
+{% block title %} Organisations{% endblock %}
 
 {% block content %}
 
-  <div class="container mt-3">
-    <div class="row">
-      <div class="col-md-12 pl-0 my-2">
-      <div class="row">
-        <div class="col-12">
-          <h4>Organisations <span class="float-right align-bottom"><a href="{% url "organisations:create" %}"><button type="button" class="btn btn-primary">Create new...</button></a></span></h4>
-        </div>
-      </div>
-        <div class="row">
-          <div class="col-md-12 border bg-light my-2">
-            <table class="table compact cell-border">
-              <thead>
-              <tr>
-                <th>Organisation</th>
-                <th>Sub-mode</th>
-                <th>Lead Inspector</th>
-                <th>Point of Contact</th>
-              </tr>
-              </thead>
-              {% for org in organisation_list %}
-                <tr>
-                  <td><a href="{% url "organisations:detail" org.slug %}">{{ org.name }}</a></td>
-                  <td>{{ org.submode }}</td>
-                  <td>LEAD INSPECTOR</td>
-                  <td>
-                    {% if org.primary_contacts %}
-                      <ul style="list-style-type:none; float:left; padding: 0">
-                        {% for p in org.primary_contacts %}
-                          <li>{{ p }} | {{ p.mobile }}</li>
-                        {% endfor %}
-                      </ul>
-                    {% else %}
-                      No contact listed
-                    {% endif %}
-                  </td>
-                </tr>
-              {% endfor %}
-            </table>
-          </div>
-        </div>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+  <script type="application/javascript">
+    $(document).ready(function () {
+      $('#datatable').DataTable({
+        ordering: true,
+        searching: true,
+        buttons: true,
+        dom: 'B<"clear">lfrtip',
+        paging: false,
+      });
+    });
+  </script>
+
+  <div class="col-12 m-2">
+    <h3>Organisations</h3> <span><a href="{% url "organisations:create" %}">[Create new...]</a></span></h4>
+    <div class="row justify-content-center">
+      <div class="col-md-12 my-2 py-2 bg-light">
+        <table id="datatable" class="table table-bordered" style="width: 100%">
+          <thead>
+          <tr>
+            <th>Organisation</th>
+            <th>Sub-mode</th>
+            <th>Lead Inspector</th>
+            <th>Point of Contact</th>
+          </tr>
+          </thead>
+          {% for org in organisation_list %}
+            <tr>
+              <td><a href="{% url "organisations:detail" org.slug %}">{{ org.name }}</a></td>
+              <td>{{ org.submode }}</td>
+              <td>LEAD INSPECTOR</td>
+              <td>
+                {% if org.primary_contacts %}
+                  <ul style="list-style-type:none; float:left; padding: 0">
+                    {% for p in org.primary_contacts %}
+                      <li>{{ p }} | {{ p.mobile }}</li>
+                    {% endfor %}
+                  </ul>
+                {% else %}
+                  No contact listed
+                {% endif %}
+              </td>
+            </tr>
+          {% endfor %}
+        </table>
       </div>
     </div>
   </div>