PyRIGS/training/templates/level_list.html

{% extends 'base_training.html' %}

{% load markdown_tags %}
{% load get_supervisor from tags %}

{% block css %}
<style>
.tree ul {
    margin-left: 20px;
}

.tree li {
    list-style-type: none;
    margin:10px;
    position: relative;
}

.tree li::before {
    content: "";
    position: absolute;
    top:-7px;
    left:-20px;
    border-left: 1px solid #ccc;
    border-bottom:1px solid #ccc;
    border-radius:0 0 0 0px;
    width:20px;
    height:15px;
}

.tree li::after {
    position:absolute;
    content:"";
    top:8px;
    left:-20px;
    border-left: 1px solid #ccc;
    border-top:1px solid #ccc;
    border-radius:0px 0 0 0;
    width:20px;
    height:100%;
}

.tree li:last-child::after  {
    display:none;
}

.tree li:last-child:before{
    border-radius: 0 0 0 5px;
}

ul.tree>li:first-child::before {
    display:none;
}

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 %}

{% block content %}
<div class="alert alert-info" role="alert">
<p>Please Note:</p>
<ul>
<li>Technical Assistant status is automatically valid when the item requirements are met.</li>
<li>Technician status is also automatic, but notification of status should be made at the next general meeting, at which point 'approval' should be granted on the system.</li>
<li>Supervisor status is <em>not automatically valid</em> and until signed off at a general meeting, does not count.</li>
</ul>
<sup>Correct as of 3rd September 2021, check the Training Policy.</sup>
</div>
<ul class="tree">
    <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>
            <ul>
            <li><div class="card p-3">{{level|get_supervisor}}</div></li>
            </ul>
            </li>
        {% endfor %}
        </ul>
    </li>
</ul>
{% endblock %}