Rework item list display

This commit is contained in:
2021-12-28 11:34:41 +00:00
parent 3b5b3b84d4
commit d47d00d79b
4 changed files with 51 additions and 58 deletions

View File

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

View File

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

View File

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

View File

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