Fancy training level list layout

training/models.py

@@ -138,6 +138,8 @@ class TrainingLevel(models.Model, RevisionMixin):
         elif self.department == 2:
             return "danger"
         elif self.department == 3:
+            return "warning"
+        elif self.department == 4:
             return "light"
         else:
             return "primary"

training/templates/level_list.html

@@ -1,4 +1,21 @@
 {% extends 'base_training.html' %}
+{% load colour_from_level from tags %}
+
+{% block css %}
+<style>
+.level-1::after {
+    content: "";
+    position: relative; 
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2px;
+    height: 50px;
+    margin-top: -15px;
+    margin-bottom: -15px;
+    background: black;
+}
+</style>
+{% endblock %}
 
 {% block content %}
 <div class="alert alert-info" role="alert">
@@ -10,15 +27,28 @@
 </ul>
 <sup>Correct as of 3rd September 2021, check the Training Policy.</sup>
 </div>
-
-<div class="card-columns">
-    {% for level in levels %}
-    <div class="card my-3">
-        <h3 class="card-header"><a href="{% url 'level_detail' level.pk %}">{{ level }}</a></h3>
-        <div class="card-body">
-            <p>{{ level.description }}</p>
+<div class="chart">
+  {% for level in levels %}
+    {% if forloop.counter == 3 %}
+    <div class="row">
+    <div class="col-6">
+    {% endif %}
+    {% if level.level == 2 and level.department is None %}
+    </div>
+    <div class="col-6">
+    {% endif %}
+    <div class="{% if forloop.first %}level-1 row{% elif forloop.counter == 2 %}level-2 row{%endif%}">
+        <div class="card my-3">
+            <h3 class="card-header"><a href="{% url 'level_detail' level.pk %}">{{ level }}</a></h3>
+            <div class="card-body bg-{% colour_from_level level %}">
+                <p>{{ level.description }}</p>
+            </div>
         </div>
     </div>
-    {% endfor %}
+    {% if forloop.last %}
+    </div>
+    </div>
+    {% endif %}
+  {% endfor %}
 </div>
 {% endblock %}

training/templatetags/tags.py

@@ -26,3 +26,7 @@ def percentage_complete(level, user):
 @register.simple_tag
 def colour_from_depth(depth):
     return models.TrainingItemQualification.get_colour_from_depth(depth)
+
+@register.simple_tag
+def colour_from_level(level):
+    return level.get_department_colour()

training/views.py

@@ -61,7 +61,7 @@ class LevelList(generic.ListView):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context["page_title"] = "All Training Levels"
-        context["levels"] = models.TrainingLevel.objects.all()
+        context["levels"] = models.TrainingLevel.objects.all().order_by('level','department')
         return context