ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance exam overview layout with responsive design improvements and candidate count buttons for better user interaction

Browse Source
This commit is contained in:
Ross
2025-10-21 22:32:40 +01:00
parent 132f3c48c9
commit a055e138c4
1 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
generic/templates/generic/exam_overview_headers.html
+25 -4
View File
@@ -3,6 +3,7 @@
<div class="container-fluid mb-3">
<div class="row align-items-start">
<div class="col-12 col-md-8">
{# Responsive: title stacks above metadata on small screens; use h4 for compactness #}
<h1 class="h4 mb-1">Exam: {{ exam }}</h1>
{% include 'exam_notes.html' %}
@@ -32,6 +33,7 @@
{% endif %}
<div class="mt-2 small text-muted">
This exam has <strong>{{ question_number }}</strong> questions &nbsp;•&nbsp;
Time limit: <strong>{{ exam.time_limit }}</strong> seconds (<span title="Time per question: {% widthratio exam.time_limit question_number 1 %} seconds">per question</span>)
</div>
@@ -42,13 +44,31 @@
{% if exam.exam_open_access %}
<div class="small text-muted">Available to all registered users.</div>
{% else %}
<div class="small">Cid candidates: <a href="{{exam.get_cid_edit_url}}">{{candidate_count.0}}</a>, User candidates: <a href="{{exam.get_user_edit_url}}">{{candidate_count.1}}</a></div>
{# Improved candidate counts: use compact buttons with badges and icons; stack on xs, inline on md+ #}
<div class="small">
<div class="d-flex flex-column flex-md-row align-items-start align-items-md-center gap-2">
<div class="text-muted d-none d-md-block me-md-2">Candidates:</div>
<a href="{{ exam.get_cid_edit_url }}" class="btn btn-sm btn-outline-primary d-inline-flex align-items-center" title="CID candidates">
<i class="bi bi-person-badge" aria-hidden="true"></i>
<span class="ms-1 d-none d-sm-inline">CID</span>
<span class="badge bg-secondary ms-2" aria-label="CID candidates count">{{ candidate_count.0 }}</span>
</a>
<a href="{{ exam.get_user_edit_url }}" class="btn btn-sm btn-outline-success d-inline-flex align-items-center" title="User candidates">
<i class="bi bi-people" aria-hidden="true"></i>
<span class="ms-1 d-none d-sm-inline">Users</span>
<span class="badge bg-secondary ms-2" aria-label="User candidates count">{{ candidate_count.1 }}</span>
</a>
</div>
</div>
{% endif %}
{% endif %}
</div>
</div>
<div class="col-12 col-md-4">
{# Cards stack vertically on mobile, align on md+ using gap utilities #}
<div class="d-flex flex-column gap-2">
<div class="card">
<div class="card-body p-2">
@@ -94,7 +114,8 @@
</div>
<div class="card">
<div class="card-header p-2">
<a class="d-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#open-access-bulk" role="button" aria-expanded="false" aria-controls="open-access-bulk">
{# Use d-block on small screens so the summary text wraps nicely; md uses flex for spacing #}
<a class="d-block d-md-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#open-access-bulk" role="button" aria-expanded="false" aria-controls="open-access-bulk">
<span>Open access (questions)</span>
<small class="text-muted">Expand to change selected questions open access status</small>
</a>
@@ -104,8 +125,8 @@
<form hx-post="{% url 'generic:generic_exam_set_open_access' %}" hx-target="#action-result" hx-swap="innerHTML" class="row g-2 align-items-center">
<input type="hidden" name="type" value="sbas" />
<input type="hidden" name="exam_id" value="{{ exam.pk }}" />
<div class="col-12 col-md-8 small text-muted">Select questions on the list above (checkboxes) then click one of the actions below.</div>
<div class="col-12 col-md-8 d-flex gap-2 justify-content-md-end">
<div class="col-12 small text-muted">Select questions on the list above (checkboxes) then click one of the actions below.</div>
<div class="col-12 d-flex flex-column flex-md-row gap-2 justify-content-md-end">
<button class="btn btn-sm btn-outline-success" type="submit" name="set_open_access" value="true" hx-include="input[name='selection']:checked">Set Open Access = True</button>
<button class="btn btn-sm btn-outline-danger" type="submit" name="set_open_access" value="false" hx-include="input[name='selection']:checked">Set Open Access = False</button>
<button class="btn btn-sm btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#open-access-bulk">Close</button>