Rework item list display

pipeline/source_assets/scss/dark_screen.scss

@@ -28,6 +28,9 @@
         color: $gray-100 !important;
         border-color: $darktheme;
     }
+    .btn-link {
+        color: white;
+    }
     .bs-popover-right > .arrow::after {
         border-right-color: $darktheme;
     }

training/templates/item_list.html

@@ -1,18 +1,24 @@
 {% extends 'base_training.html' %}
 
 {% block content %}
-<div class="row">
+<div id="accordion">
-{% for category in categories %}
+  {% for category in categories %}
-    <div class="col">
+  <div class="card">
-        <div class="card mb-3">
+    <div class="card-header" id="heading{{forloop.counter}}">
-            <h4 class="card-header">{{ category.name }}</h4>
+        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse{{forloop.counter}}" aria-expanded="true" aria-controls="collapse{{forloop.counter}}">
-            <div class="list-group list-group-flush">
+          {{ category }}
-                {% for item in category.items.all %}
+        </button>
-                <li class="list-group-item">{{ item }}</li>
-                {% endfor %}
-            </div>
-        </div>
     </div>
-{% endfor %}
+    <div id="collapse{{forloop.counter}}" class="collapse" aria-labelledby="heading{{forloop.counter}}" data-parent="#accordion">
+      <div class="card-body">
+        <div class="list-group list-group-flush">
+            {% for item in category.items.all %}
+            <li class="list-group-item">{{ item }}</li>
+            {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
 </div>
 {% endblock %}

training/templates/level_detail.html

@@ -57,32 +57,6 @@
         <p>{{ object.description|markdown }}</p>
     </div>
 </div>
-<div class="card mb-3 d-none d-md-block">
-    <h4 class="card-header">Users with this level</h4>
-    <div class="card-body">
-        <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>
 <div class="card">
     <h4 class="card-header">Level Requirements</h4>
     <table class="table card-body">
@@ -119,6 +93,32 @@
        </ul>
     </div>
 </div>
+<div class="card mb-3 d-none d-md-block">
+    <h4 class="card-header">Users with this level</h4>
+    <div class="card-body">
+        <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>
 <div class="row">
     <div class="col text-right">
     {% include 'partials/last_edited.html' with target="traininglevel_history" %}

training/templates/level_list.html

@@ -54,24 +54,6 @@ ul.tree>li:first-child::before {
 ul.tree>li:first-child::after {
     border-radius:5px 0 0 0;
 }
-
-.tree li a {
-    border: 1px #ccc solid;
-    border-radius: 5px;
-    padding:2px 5px;
-}
-
-.tree li a:hover, .tree li a:hover+ul li a,
-.tree li a:focus, .tree li a:focus+ul li a {
-    background: #ccc; color: #000; border: 1px solid #000;
-}
-
-.tree li a:hover+ul li::after, .tree li a:focus+ul li::after,
-.tree li a:hover+ul li::before, .tree li a:focus+ul li::before 
-.tree li a:hover+ul::before, .tree li a:focus+ul::before 
-.tree li a:hover+ul ul::before, .tree li a:focus+ul ul::before{
-    border-color:  #000; /*connector color on hover*/
-}
 </style>
 {% endblock %}
 
@@ -89,9 +71,11 @@ ul.tree>li:first-child::after {
     <li><div class="card"><div class="card-header">{{ta}}</div><div class="card-body">{{ta.description|markdown}}</div></div>
         <ul>
         {% for level in tech %}
-            <li><div class="card"><div class="card-header">{{level}}</div><div class="card-body">{{level.description|markdown}}</div></div>
+            <li><div class="card"><div class="card-header"><a href="{{level.get_absolute_url}}">{{level}}</a></div><div class="card-body">{{level.description|markdown}}</div></div>
             <ul>
-            <li><div class="card p-3">{{level|get_supervisor}}</div></li>
+            {% with level|get_supervisor as super %}
+            <li><div class="card"><div class="card-header"><a href="{{super.get_absolute_url}}">{{super}}</a></div><div class="card-body">{{super.description|markdown}}</div></div></li>
+            {% endwith %}
             </ul>
             </li>
         {% endfor %}