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

Refactor exam_take.html for improved layout by making columns full-width and adjusting padding for better responsiveness

Browse Source
This commit is contained in:
Ross
2025-10-28 07:51:07 +00:00
parent 02e844006d
commit 82ce6b0f93
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sbas/templates/sbas/exam_take.html
+7 -6
View File
@@ -26,8 +26,9 @@
<div class="alert alert-primary review-mode-alert" role="alert">Exam completed.</div>
{% endif %}
<div class="row">
<div class="col-12 col-md-8 order-1 order-md-1 mb-3">
<div class="row flex-wrap">
{# Layout change: make both columns full-width so the right panel is not a sidebar #}
<div class="col-12 order-1 mb-3">
<div class="card">
<div class="card-body">
<div id="question-stem" class="mb-3">{{ question.stem|safe }}</div>
@@ -74,10 +75,10 @@
</div>
</div>
<div class="col-4 col-md-4 order-2 order-md-2 mb-3">
<div class="col-12 order-2 mb-3">
{% include "sbas/exam_take_help.html" %}
<div class="card sticky-top mt-3" style="top:1rem;">
<div class="card mt-3">
<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>
@@ -90,7 +91,7 @@
</div>
<div id="menu-list" class="collapse d-md-block">
<div class="d-flex flex-wrap gap-2" id="menu-buttons" role="toolbar" aria-label="Question navigation">
<div class="d-flex flex-wrap gap-1" id="menu-buttons" role="toolbar" aria-label="Question navigation">
<!-- Buttons injected by JS -->
</div>
</div>
@@ -170,7 +171,7 @@
.question-menu-item {
white-space: nowrap;
flex: 0 0 auto;
padding: .25rem .5rem;
padding: .1rem .1rem;
}
/* Disable sticky behaviour on narrow viewports so the sidebar stacks naturally */