t

docker/docker-compose.yml

@@ -8,19 +8,23 @@ services:
     command: ["redis-server", "/usr/local/etc/redis/redis.conf"]
   web:
     build:
-      # Use the rad/ directory as the build context and the Dockerfile inside it.
-      # This avoids relative path issues with different docker/compose versions and buildx.
-      context: ./rad
-      dockerfile: Dockerfile
+      # Use the repository root as the build context so files like requirements.txt
+      # (located at the repo root) are available during image build. The Dockerfile
+      # lives at rad/Dockerfile inside the context.
+      context: ..
+      dockerfile: rad/Dockerfile
     command: python manage.py runserver 0.0.0.0:8000
     #command: pip install -r requirements.txt
     volumes:
-      # Mount the rad app directory into the container WORKDIR used by the Dockerfile
-      - ./rad:/usr/src/rad
-      # Mount host media/static/backups into sensible container paths
-      - ./backups:/usr/src/rad/backups
-      - ./media:/usr/src/rad/media
-      - ./static:/usr/src/rad/static
+      # Mount the repository root into the container WORKDIR so manage.py and
+      # requirements.txt are available at build/run time. This mirrors working
+      # in the project root inside the container for development.
+      - ../:/usr/src/app
+      # (Optional) keep explicit mounts for media/static/backups if you need
+      # to override them separately; otherwise they are covered by the repo mount.
+      - ../backups:/usr/src/app/backups
+      - ../media:/usr/src/app/media
+      - ../static:/usr/src/app/static
     ports:
       - 8000:8000
       - 3459:3459

requirements.txt

@@ -1,5 +1,5 @@
 #Django==3.2.13
-Django==5.1.4
+Django==5.2.7
 django_debug_toolbar
 django_jquery
 django_reversion

sbas/templates/sbas/exam_take.html

@@ -1,72 +1,105 @@
 {% extends 'base.html' %}
 
 {% block content %}
-    <span id="user-id">
-        {% if request.user.is_authenticated %}
-            User: {{request.user}}
-        {% else %}
-            CID: {{cid}}
-        {% endif %}
-    </span>
-    {% include "exam_clock.html" %}
-    <div class="no-select">
-        <h2>{{exam}}: Question [<span id="question-number">{{pos|add:1}}</span>/<span id="exam-length">{{exam_length}}</span>]</h2>
-        {% if exam.publish_results %}
-            <div class="alert alert-primary review-mode-alert" role="alert">
-                Exam is in review mode. Add question feedback <a href="#" onclick="return window.create_popup_window('{% url 'feedback_create' question_type='sbas' pk=question.pk %}')">here</a>.
-            </div>
-        {% elif cid_user_exam.completed %}
-            <div class="alert alert-primary review-mode-alert" role="alert">
-                Exam completed.
-            </div>
-        {% endif %}
-
-        <div>
-            <p><span id="question-stem">{{question.stem|safe}}</span></p>
-        </div>
-        <ul class="sba-answer-list">
-            <li data-ans="a">{{question.a_answer|safe}}</li>
-            <li data-ans="b">{{question.b_answer|safe}}</li>
-            <li data-ans="c">{{question.c_answer|safe}}</li>
-            <li data-ans="d">{{question.d_answer|safe}}</li>
-            <li data-ans="e">{{question.e_answer|safe}}</li>
-        </ul>
-
-
-        <div>
-
-            <form method="POST" class="post-form">{% csrf_token %}
-                <div class="form-contents">
-                    {{form}}
-                </div>
-
-                {% if previous > -1 %}
-                    <button type="submit" name="previous" class="save btn btn-default" title="Click to save your answer(s) and go to the previous question">Previous</button>
-                {% endif %}
-                {% if next %}
-                    <button type="submit" name="next" class="save btn btn-default" title="Click to save your answer(s) and go to the next quesiton">Next</button>
+<div class="py-3">
+    <div class="d-flex justify-content-between align-items-start mb-2">
+        
+            <span id="user-id" class="text-muted small">
+                {% if request.user.is_authenticated %}
+                    User: {{ request.user }}
                 {% else %}
-                    {% if not exam.publish_results %}
-                        <button type="submit" name="save" class="save btn btn-default" title="Click to save your current answer(s)">Save</button>
-                    {% endif %}
+                    CID: {{ cid }}
                 {% endif %}
-
-                {% if exam.publish_results and question.feedback %}
-                    <h3>Feedback</h3>
-                    <p>{{question.feedback|safe}}</p>
-                {% endif %}
-                <br />
-                <button type="submit" name="finish" class="save btn btn-default" title="Click to go to the overview page (your answers will be saved).">Overview</button>
-                <button type="submit" id="goto-button" value="test" name="goto" class="hide">goto</button>
-            </form>
+            </span>
+            <h2 class="h5 mt-1">{{ exam }}: Question <small class="text-muted">[<span id="question-number">{{ pos|add:1 }}</span>/<span id="exam-length">{{ exam_length }}</span>]</small></h2>
+        
+        <div class="">
+            {% include "exam_clock.html" %}
         </div>
     </div>
 
-    <h4>Questions</h4>
-    <div id="menu-list">
+    {% if exam.publish_results %}
+        <div class="alert alert-primary review-mode-alert" role="alert">
+            Exam is in review mode. Add question feedback <a href="#" onclick="return window.create_popup_window('{% url 'feedback_create' question_type='sbas' pk=question.pk %}')">here</a>.
+        </div>
+    {% elif cid_user_exam.completed %}
+        <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="card">
+                <div class="card-body">
+                    <div id="question-stem" class="mb-3">{{ question.stem|safe }}</div>
+
+                    <ul class="sba-answer-list list-group">
+                        <li class="list-group-item" data-ans="a">{{ question.a_answer|safe }}</li>
+                        <li class="list-group-item" data-ans="b">{{ question.b_answer|safe }}</li>
+                        <li class="list-group-item" data-ans="c">{{ question.c_answer|safe }}</li>
+                        <li class="list-group-item" data-ans="d">{{ question.d_answer|safe }}</li>
+                        <li class="list-group-item" data-ans="e">{{ question.e_answer|safe }}</li>
+                    </ul>
+
+                    <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">
+                            <div class="d-flex gap-2 flex-wrap">
+                                {% if previous > -1 %}
+                                    <button type="submit" name="previous" class="btn btn-outline-secondary" title="Save and go to previous">Previous</button>
+                                {% endif %}
+
+                                {% if next %}
+                                    <button type="submit" name="next" class="btn btn-primary">Next</button>
+                                {% else %}
+                                    {% if not exam.publish_results %}
+                                        <button type="submit" name="save" class="btn btn-success">Save</button>
+                                    {% endif %}
+                                {% endif %}
+                            </div>
+
+                            <div class="ms-sm-auto">
+                                {% if exam.publish_results and question.feedback %}
+                                    <div class="mt-2 mt-sm-0">
+                                        <h6 class="mb-1">Feedback</h6>
+                                        <div>{{ question.feedback|safe }}</div>
+                                    </div>
+                                {% endif %}
+                                <button type="submit" name="finish" class="btn btn-outline-primary ms-0 ms-sm-2 mt-2 mt-sm-0">Overview</button>
+                                <button type="submit" id="goto-button" value="test" name="goto" class="visually-hidden">goto</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+
+        <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>
+
+                    <!-- Collapsible for small screens -->
+                    <div class="d-md-none mb-2">
+                        <button class="btn btn-sm btn-outline-secondary w-100" type="button" data-bs-toggle="collapse" data-bs-target="#menu-list" aria-expanded="false" aria-controls="menu-list">
+                            Show questions
+                        </button>
+                    </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">
+                            <!-- Buttons injected by JS -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-    {% include "sbas/exam_take_help.html" %}
+  
+</div>
 {% endblock %}
 
 {% block js %}
@@ -97,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) => {
@@ -132,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 %}

sbas/templates/sbas/question_form.html

@@ -1,30 +1,29 @@
-{% extends "sbas/base.html" %}
+{% extends 'sbas/base.html' %}
 
 {% load static %}
 {% load partials %}
 
 {% block js %}
-<!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
+  <!-- <script type="text/javascript" src="/admin/jsi18n/"></script> -->
 
-    <script type="text/javascript">
-    </script>
+  <script type="text/javascript"></script>
 
-    {{ form.media }}
+  {{ form.media }}
 {% endblock %}
 {% block content %}
-    <div class="d-flex justify-content-between align-items-start mb-3 flex-column flex-md-row">
-        <div>
-            <h2>Submit Question</h2>
-        </div>
-        {% include "sbas/question_detail.html#links-partial" %}
+  <div class="d-flex justify-content-between align-items-start mb-3 flex-column flex-md-row">
+    <div>
+      <h2>Submit Question</h2>
     </div>
+    {% if question %}
+      {% include 'sbas/question_detail.html#links-partial' %}
+    {% endif %}
+  </div>
 
-    <form action="" method="post" enctype="multipart/form-data" id="anatomyquestion-form">
-        {% csrf_token %}
+  <form action="" method="post" enctype="multipart/form-data" id="anatomyquestion-form">
+    {% csrf_token %}
 
-        <table>
-            {{ form.as_table }}
-        </table>
-        <input type="submit" class="submit-button" value="Submit" name="submit">
-    </form>
-{% endblock %}
+    <table>{{ form.as_table }}</table>
+    <input type="submit" class="submit-button" value="Submit" name="submit" />
+  </form>
+{% endblock %}

templates/base.html

@@ -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 %}