From d1970edfb304a432a218c07af8b186332c26c917 Mon Sep 17 00:00:00 2001
From: Arona Jones <aj@aronajones.com>
Date: Tue, 21 Dec 2021 15:12:11 +0000
Subject: [PATCH] Change display of 'users with this level'

---
 training/templates/level_detail.html | 38 +++++++++++++++-------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/training/templates/level_detail.html b/training/templates/level_detail.html
index fb965f81..bf8774d4 100644
--- a/training/templates/level_detail.html
+++ b/training/templates/level_detail.html
@@ -58,23 +58,27 @@
 </div>
 <div class="card mb-3 d-none d-md-block">
     <h4 class="card-header">Users with this level</h4>
-    <div class="card-body">
-        <div class="card-columns" style="column-count: 5">
-        {% for user in users_with %}
-        {% user_level_if_present user object as level_qualification %}
-        <div class="card" {% if not level_qualification.confirmed_on %}style="border-style: dashed; opacity: 70%"{%endif%}>
-            <img src="{{user.profile_picture}}" class="card-img-top" />
-            <div class="card-body">
-                <h5 class="card-title">{{user}}</h5>
-                {% if level_qualification.confirmed_on %}<p class="card-text"><small>Qualified on {{ level_qualification.confirmed_on }}</small></p>{%else%}Unconfirmed{%endif%}
-            </div>
-            <div class="card-footer text-right pr-1"><a href="{% url 'profile_detail' user.pk %}" class="btn btn-primary btn-sm"><span class="fas fa-user"></span> View Profile</a></div>
-        </div>
-        {% empty %}
-        Nobody here but us chickens... <span class="fas fa-egg text-warning"></span>
-        {% endfor %}
-        </div>
-    </div>
+        <table class="table table-sm">
+          <thead>
+            <tr>
+              <th scope="col">Person</th>
+              <th scope="col">Confirmed?</th>
+              <th scope="col"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for user in users_with %}
+                {% user_level_if_present user object as level_qualification %}
+                <tr {% if not level_qualification.confirmed_on %}style="border-style: dashed; opacity: 80%"{%endif%}>
+                    <td><img src="{{user.profile_picture}}" style="width: 50px" class="img-thumbnail"/> {{user}}</td>
+                    <td>{% if level_qualification.confirmed_on %}<p class="card-text"><small>Qualified on {{ level_qualification.confirmed_on }}</small></p>{%else%}Unconfirmed{%endif%}</td>
+                    <td><a href="{% url 'profile_detail' user.pk %}" class="btn btn-primary btn-sm"><span class="fas fa-user"></span> View Profile</a></div></td>
+                </tr>
+            {% empty %}
+                Nobody here but us chickens... <span class="fas fa-egg text-warning"></span>
+            {% endfor %}
+            </tbody>
+        </table>
 </div>
 <div class="card">
     <h4 class="card-header">Level Requirements</h4>