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

t

Browse Source
This commit is contained in:
Ross
2025-10-27 23:10:14 +00:00
parent 4cce444153
commit 02e844006d
2 changed files with 44 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sbas/templates/sbas/exam_take.html
+26 -9
View File
@@ -1,7 +1,7 @@
{% extends 'base.html' %}
{% block content %}
<div class="container py-3">
<div class="py-3">
<div class="d-flex justify-content-between align-items-start mb-2">
<span id="user-id" class="text-muted small">
@@ -26,8 +26,8 @@
<div class="alert alert-primary review-mode-alert" role="alert">Exam completed.</div>
{% endif %}
<div class="row g-3">
<div class="col-12 col-md-8">
<div class="row">
<div class="col-12 col-md-8 order-1 order-md-1 mb-3">
<div class="card">
<div class="card-body">
<div id="question-stem" class="mb-3">{{ question.stem|safe }}</div>
@@ -40,7 +40,7 @@
<li class="list-group-item" data-ans="e">{{ question.e_answer|safe }}</li>
</ul>
<form method="POST" class="post-form mt-3">{% csrf_token %}
<form method="POST" class="post-form mt-3">{% csrf_token %}
<div class="form-contents visually-hidden">{{ form }}</div>
<div class="d-flex flex-column flex-sm-row gap-2 mt-2">
@@ -74,8 +74,10 @@
</div>
</div>
<div class="col-12 col-md-4">
<div class="card sticky-top" style="top:1rem;">
<div class="col-4 col-md-4 order-2 order-md-2 mb-3">
{% include "sbas/exam_take_help.html" %}
<div class="card sticky-top mt-3" style="top:1rem;">
<div class="card-body">
<h6 class="card-title">Questions</h6>
<p class="small text-muted mb-2">Tap a number to jump to that question.</p>
@@ -94,7 +96,6 @@
</div>
</div>
</div>
{% include "sbas/exam_take_help.html" %}
</div>
</div>
@@ -129,10 +130,11 @@
$("ul.sba-answer-list li[data-ans='{{saved_answer}}']").addClass("selected"); {% endif %}
for (let i = 0; i < {{ exam_length }}; i++) {
qbutton = $(`<button class="question-menu-item" name="goto-${i}" data-qn="${i}">${i+1}</button>`)
// Create Bootstrap-styled buttons and append into the flex-wrap container
qbutton = $(`<button type="button" class="btn btn-sm btn-outline-secondary question-menu-item" name="goto-${i}" data-qn="${i}">${i+1}</button>`)
if (i == {{pos}}) {qbutton.addClass("current-question")}
$("#menu-list").append(qbutton);
$("#menu-buttons").append(qbutton);
}
$("button.question-menu-item").on("click", (e) => {
@@ -164,5 +166,20 @@
float: right
}
/* Make question nav buttons consistent and allow wrapping on small screens */
.question-menu-item {
white-space: nowrap;
flex: 0 0 auto;
padding: .25rem .5rem;
}
/* Disable sticky behaviour on narrow viewports so the sidebar stacks naturally */
@media (max-width: 767.98px) {
.card.sticky-top {
position: static !important;
top: auto !important;
}
}
</style>
{% endblock %}
templates/base.html
+18
View File
@@ -92,6 +92,24 @@
word-break: break-word;
max-width: 100%;
}
/* Reduce horizontal page margins on small screens for better use of space */
@media (max-width: 1210px) {
/* Narrow the default container padding */
.container,
.container-fluid {
padding-left: .5rem !important;
padding-right: .5rem !important;
}
/* Also tighten the main content wrapper specifically */
div.content.container {
padding-left: .5rem !important;
padding-right: .5rem !important;
max-width: 100% !important;
}
}
</style>
{% block css %}
{% endblock %}