feat: Enhance collection review and overview templates with improved styling and conditional content display
This commit is contained in:
Ross
@@ -1,47 +1,143 @@
|
||||
{% extends 'atlas/base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<h2>Collection: {{exam}}</h2>
|
||||
<style>
|
||||
.take-start-hero {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: linear-gradient(135deg, rgba(13, 110, 253, 0.22), rgba(25, 135, 84, 0.2));
|
||||
border-radius: .75rem;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.take-start-card {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: .75rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.take-start-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 9rem 1fr;
|
||||
gap: .35rem .75rem;
|
||||
}
|
||||
|
||||
.take-start-meta dt {
|
||||
font-weight: 600;
|
||||
color: var(--bs-secondary-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.take-start-meta dd {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="take-start-hero">
|
||||
<div class="d-flex flex-wrap align-items-center gap-2 justify-content-between">
|
||||
<h2 class="mb-0">Review: {{ collection.name }}</h2>
|
||||
<span class="badge bg-light text-dark">Review Collection</span>
|
||||
</div>
|
||||
<p class="mb-0 mt-2 text-body-secondary">Open the collection and browse completed cases.</p>
|
||||
</section>
|
||||
|
||||
{% if collection.start_screen_content %}
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
{{ collection.start_screen_content|safe }}
|
||||
</div>
|
||||
</div>
|
||||
<section class="take-start-card mb-3">
|
||||
{{ collection.start_screen_content|safe }}
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% if collection.start_screen_resources.exists %}
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<h6>Resources</h6>
|
||||
{% for resource in collection.start_screen_resources.all %}
|
||||
<div class="small mb-1">{{ resource.get_display }}</div>
|
||||
{% if start_screen_resources %}
|
||||
<section class="take-start-card mb-3">
|
||||
<h6 class="mb-2">Resources</h6>
|
||||
<div class="d-grid gap-2">
|
||||
{% for resource in start_screen_resources %}
|
||||
<div class="small">{{ resource.get_display }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% comment %} <ul>
|
||||
{% for case in collection.cases.all %}
|
||||
<li><a href="{% url 'atlas:collection_case_view_take_user' pk=collection.id case_number=forloop.counter0 %}">Case {{forloop.counter}}</a></li>
|
||||
{% endfor %}
|
||||
</ul> {% endcomment %}
|
||||
{% if request.user.is_authenticated and valid_user %}
|
||||
<section class="take-start-card">
|
||||
<dl class="take-start-meta mb-3">
|
||||
<dt>User</dt>
|
||||
<dd>{{ request.user }}</dd>
|
||||
|
||||
User: {{request.user}}<br/>
|
||||
{% if cid_exam %}
|
||||
<dt>Started</dt>
|
||||
<dd>{{ cid_exam.start_time }}</dd>
|
||||
|
||||
{% if cid_exam %}
|
||||
Started: {{cid_exam.start_time}} <br/>
|
||||
{% if cid_exam.completed %}
|
||||
Ended: {{cid_exam.end_time}} <br/>
|
||||
{% if cid_exam.completed %}
|
||||
<dt>Ended</dt>
|
||||
<dd>{{ cid_exam.end_time }}</dd>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</dl>
|
||||
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<a class="btn btn-primary"
|
||||
href="{% url 'atlas:collection_case_view_take_user' pk=collection.pk case_number=0 %}">
|
||||
Browse
|
||||
</a>
|
||||
|
||||
{% if cid_exam.completed %}
|
||||
<a class="btn btn-outline-secondary"
|
||||
href="{% url 'atlas:collection_take_overview_user' pk=collection.pk %}">Overview</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% if collection.show_results_sharing_information and sharing_summary %}
|
||||
<section class="take-start-card mt-3">
|
||||
<div class="fw-semibold mb-2 small text-body-secondary text-uppercase" style="letter-spacing:.05em;">Who can see your results</div>
|
||||
<ul class="list-unstyled mb-0 small">
|
||||
<li class="mb-1">
|
||||
<span class="badge bg-secondary me-1">You</span>
|
||||
Always visible to you.
|
||||
</li>
|
||||
{% for u in sharing_summary.always_visible_to %}
|
||||
<li class="mb-1">
|
||||
<span class="badge bg-secondary me-1">Author/Marker</span>
|
||||
{{ u.get_full_name|default:u.username }}
|
||||
{% if u.email %}<span class="text-muted"><{{ u.email }}></span>{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% if sharing_summary.supervisor_always %}
|
||||
<li class="mb-1">
|
||||
<span class="badge bg-info text-dark me-1">Supervisor</span>
|
||||
{% if sharing_summary.supervisor %}
|
||||
{{ sharing_summary.supervisor.get_full_name|default:sharing_summary.supervisor.username }}
|
||||
(always shared - collection setting)
|
||||
{% else %}
|
||||
Your supervisor, if one is linked to your profile (collection setting always on).
|
||||
{% endif %}
|
||||
</li>
|
||||
{% elif sharing_summary.supervisor_opt_in %}
|
||||
<li class="mb-1">
|
||||
<span class="badge bg-outline-secondary me-1" style="border:1px solid var(--bs-secondary);color:var(--bs-secondary);">Supervisor</span>
|
||||
{% if sharing_summary.supervisor %}
|
||||
{{ sharing_summary.supervisor.get_full_name|default:sharing_summary.supervisor.username }}
|
||||
- you can choose to share with them after starting.
|
||||
{% else %}
|
||||
You have a supervisor linked but they do not have a login account yet.
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if not sharing_summary.always_visible_to and not sharing_summary.supervisor_always and not sharing_summary.supervisor_opt_in %}
|
||||
<li class="text-muted fst-italic">Only you can see your results for this collection.</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<section class="take-start-card">
|
||||
<p class="mb-0">
|
||||
Please sign in to access this review collection.
|
||||
<a href="{% url 'login' %}?next={% url 'atlas:collection_take_start' pk=collection.pk %}">Log in here</a>.
|
||||
</p>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<a href="{% url 'atlas:collection_case_view_take_user' pk=collection.pk case_number=0 %}">
|
||||
{% if cid_exam.completed %}
|
||||
<button>Review</button>
|
||||
{% else %}
|
||||
<button>Start</button>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endblock %}
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-start gap-2">
|
||||
<div>
|
||||
<div class="fw-semibold">
|
||||
Case {{ forloop.counter }}{% if collection.show_title_post %}: {{ question.case.title|default:question.case.pk|truncatechars:70 }}{% endif %}
|
||||
Case {{ forloop.counter }}{% if collection.show_title_post and answer and answer.completed or collection.show_title_post and cid_user_exam.completed %}: {{ question.case.title|default:question.case.pk|truncatechars:70 }}{% endif %}
|
||||
{% if answer and answer.completed or cid_user_exam.completed %}
|
||||
<span class="badge bg-success-subtle text-success-emphasis ms-2">Completed</span>
|
||||
{% elif answer %}
|
||||
@@ -79,7 +79,7 @@
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if collection.show_title_post %}
|
||||
{% if collection.show_title_post and answer and answer.completed or collection.show_title_post and cid_user_exam.completed %}
|
||||
<div class="small text-muted">
|
||||
{{ question.case }}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user