Some sample data and UX work

This commit is contained in:
2021-07-06 12:16:43 +01:00
parent 5e15b8bb59
commit 68a424d62b
5 changed files with 59 additions and 36 deletions

View File

@@ -1,40 +1,44 @@
{% extends 'base_rigs.html' %}
{% block content %}
<div class="row my-3 align-items-end">
<a type="button" class="btn btn-success" href="{% url 'edit_record' pk=request.user.pk %}">
<i class="fas fa-plus"></i> Add New Training Record
</a>
<div class="row mb-3">
<h2 class="col-12">Training Levels</h2>
{% for level in levels %}
<div class="card m-3">
<h3 class="card-header"><a href="{% url 'level_edit' level.pk %}">{{ level }}</a></h3>
<div class="card-body">
<div class="progress mb-2">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25% complete</div>
</div>
<p>{{ level.description }}</p>
<p>Requirements:
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#reqs" aria-expanded="false" aria-controls="reqs">
<span class="fas fa-arrow-down"></span>
</button>
<div class="collapse" id="reqs">
{% for req in level.requirements.all %}
<li>{{req}}</li>
{% endfor %}
</p>
</div>
</div>
<div class="card-footer">
<button class="btn btn-success" disabled>Incomplete</button>
</div>
</div>
{% endfor %}
<div class="row mb-3">
<h2 class="col-12">Training Levels</h2>
<div class="card-columns">
{% for level in levels %}
<div class="card my-3">
<h3 class="card-header"><a href="{% url 'level_edit' level.pk %}">{{ level }}</a></h3>
<div class="card-body">
<div class="progress mb-2">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25% complete</div>
</div>
<p>{{ level.description }}</p>
<p>Requirements:
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#reqs" aria-expanded="false" aria-controls="reqs">
<span class="fas fa-arrow-down"></span>
</button>
<div class="collapse" id="reqs">
{% for req in level.requirements.all %}
<li>{{req}}</li>
{% endfor %}
</p>
</div>
</div>
<div class="card-footer">
<button class="btn btn-success" disabled>Incomplete</button>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="row">
<h2 class="col-12">Training Items</h2><br>
{% for category in categories %}
<div class="col-md-3">
<h2 class="col-12">Training Items</h2><br>
<div class="card-columns">
{% for category in categories %}
<div class="card mb-3">
<h3 class="card-header">{{ category.name }}</h3>
<div class="list-group list-group-flush">
@@ -48,7 +52,7 @@
{% endfor %}
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
{% endblock %}