From b5c3a9468ffff07b09067b7d06fdcafaec2d23cf Mon Sep 17 00:00:00 2001
From: Matthew Lemon <lemon@matthewlemon.com>
Date: Thu, 8 Oct 2020 15:15:08 +0100
Subject: using list-group-items instead of table

---
 ctrack/caf/templates/caf/caf_detail.html | 43 +++++++++++++-------------------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/ctrack/caf/templates/caf/caf_detail.html b/ctrack/caf/templates/caf/caf_detail.html
index e3dae9f..485fdf0 100644
--- a/ctrack/caf/templates/caf/caf_detail.html
+++ b/ctrack/caf/templates/caf/caf_detail.html
@@ -138,32 +138,25 @@
         <div class="card-body">
           <div class="card-title text-muted">CAF History <a href="{% url "register:create_from_caf" object.pk %}"
                                                             class="btn btn-outline-primary btn-sm float-right">Add
-            new...</a></div>
-          <div class="table table-responsive">
-            <table class="table">
-              <thead>
-              <tr>
-                <th>Date</th>
-                <th>Event</th>
-                <th>Inspector</th>
-                <th>Comments</th>
-              </tr>
-              </thead>
-              <tbody>
-              {% for event in object.get_events %}
-                <tr>
-                  <td>{{ event.date|date:"j F Y" }}</td>
-                  <td>{{ event.type }}</td>
-                  <td>{{ event.user }}</td>
-                  <td>{{ event.comments }}</td>
-                </tr>
-              {% endfor %}
-
-              <tr>
+            new...</a>
+          </div>
 
-              </tr>
-              </tbody>
-            </table>
+          <div class="list-group">
+            {% for event in object.get_events %}
+              <div class="list-group-item">
+                <div class="d-flex w-100 justify-content-between">
+                  <p class="mb-1"><strong>{{ event.date|date:"j F Y" }}</strong></p>
+                  <small>{{ event.type }}</small>
+                </div>
+                {% if event.comments%}
+                  <p class="mb-2">{{ event.comments }}<br>
+                  <small>(Inspector: {{ event.user }})</small>
+                </p>
+                {% else %}
+                  <p class="mb-1"><small>No comments made.</small></p>
+                {% endif %}
+              </div>
+            {% endfor %}
           </div>
         </div>
       </div>
-- 
cgit v1.2.3