From f55bb1b18e06cadf7c4d5c99a7531223f5dfd671 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 17 Nov 2025 12:02:21 +0000
Subject: [PATCH] Refactor exam navigation: enhance layout and accessibility by
 replacing links with a responsive navbar structure

---
 longs/templates/longs/exams.html     | 31 +++++++++++++++++------
 physics/templates/physics/exams.html | 30 ++++++++++++++++------
 rapids/templates/rapids/exams.html   | 37 +++++++++++++++++++---------
 sbas/templates/sbas/exams.html       | 29 ++++++++++++++++------
 shorts/templates/shorts/exams.html   | 37 +++++++++++++++++++---------
 5 files changed, 120 insertions(+), 44 deletions(-)

diff --git a/longs/templates/longs/exams.html b/longs/templates/longs/exams.html
index 235acbeb..d8d9b6b9 100644
--- a/longs/templates/longs/exams.html
+++ b/longs/templates/longs/exams.html
@@ -2,12 +2,27 @@
 
 {% block navigation %}
     {{block.super}}
-    <br/>
-    Exams: {{exam}}-> 
-    <a href="{% url 'longs:exam_overview' pk=exam.pk %}">Overview</a> / 
-    <a href="{% url 'longs:mark_overview' pk=exam.pk %}">Mark</a> / 
-    <a href="{% url 'longs:exam_scores_all' pk=exam.pk %}">Scores</a> /
-    <a href="{% url 'longs:exam_cids' exam_id=exam.pk %}">Candidates</a> /
-    <a href="{% url 'longs:exam_stats' exam_id=exam.pk %}">Stats</a> /
-    <a href="{% url 'longs:exam_review_start' pk=exam.pk %}">Review</a> /
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-2 rounded">
+        <div class="container-fluid px-3">
+            <span class="navbar-text me-3 text-white">
+                <strong>Exam:</strong> {{ exam.title|default:exam.name|default:exam }}
+            </span>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#examNav" aria-controls="examNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="examNav">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item"><a class="nav-link" href="{% url 'longs:exam_overview' pk=exam.pk %}">Overview</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'longs:mark_overview' pk=exam.pk %}">Mark</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'longs:exam_scores_all' pk=exam.pk %}">Scores</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'longs:exam_cids' exam_id=exam.pk %}">Candidates</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'longs:exam_stats' exam_id=exam.pk %}">Stats</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'longs:exam_review_start' pk=exam.pk %}">Review</a></li>
+                </ul>
+
+                {% include 'generic/partials/exams/dropdown_menu.html'%}
+            </div>
+        </div>
+    </nav>
 {% endblock %}
diff --git a/physics/templates/physics/exams.html b/physics/templates/physics/exams.html
index d3a8e274..2891577c 100644
--- a/physics/templates/physics/exams.html
+++ b/physics/templates/physics/exams.html
@@ -1,11 +1,27 @@
 {% extends 'physics/base.html' %}
 
 {% block navigation %}
-{{block.super}}
-<br/>
-Exams: {{exam}}-> <a href="{% url 'physics:exam_overview' pk=exam.pk %}">Overview</a> / 
-<a href="{% url 'physics:exam_scores_all' pk=exam.pk %}">Scores</a> /
-<a href="{% url 'physics:exam_cids' exam_id=exam.pk %}">Candidates</a> /
-    <a href="{% url 'physics:exam_stats' exam_id=exam.pk %}">Stats</a> /
-    <a href="{% url 'physics:exam_review_start' pk=exam.pk %}">Review</a> /
+    {{block.super}}
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-2 rounded">
+        <div class="container-fluid px-3">
+            <span class="navbar-text me-3 text-white">
+                <strong>Exam:</strong> {{ exam.title|default:exam.name|default:exam }}
+            </span>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#examNav" aria-controls="examNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="examNav">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item"><a class="nav-link" href="{% url 'physics:exam_overview' pk=exam.pk %}">Overview</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'physics:exam_scores_all' pk=exam.pk %}">Scores</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'physics:exam_cids' exam_id=exam.pk %}">Candidates</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'physics:exam_stats' exam_id=exam.pk %}">Stats</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'physics:exam_review_start' pk=exam.pk %}">Review</a></li>
+                </ul>
+
+                {% include 'generic/partials/exams/dropdown_menu.html'%}
+            </div>
+        </div>
+    </nav>
 {% endblock %}
\ No newline at end of file
diff --git a/rapids/templates/rapids/exams.html b/rapids/templates/rapids/exams.html
index ec8feaeb..df8c92a4 100644
--- a/rapids/templates/rapids/exams.html
+++ b/rapids/templates/rapids/exams.html
@@ -2,15 +2,30 @@
 
 {% block navigation %}
     {{block.super}}
-    <br/>
-    Exams: {{exam}}->
-    <a href="{% url 'rapids:exam_overview' pk=exam.pk %}">Overview</a> /
-    {% if exam.exam_mode %}
-        <a href="{% url 'rapids:mark_overview' pk=exam.pk %}">Mark</a> /
-        <a href="{% url 'rapids:exam_scores_all' pk=exam.pk %}">Scores</a> /
-        <a href="{% url 'rapids:exam_cids' exam_id=exam.pk %}">Candidates</a> /
-        <a href="{% url 'rapids:exam_stats' exam_id=exam.pk %}">Stats</a> /
-    {% endif %}
-    <a href="{% url 'rapids:question_create_exam' pk=exam.pk %}">Add New Question</a>
-    <a href="{% url 'rapids:exam_review_start' pk=exam.pk %}">Review</a>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-2 rounded">
+        <div class="container-fluid px-3">
+            <span class="navbar-text me-3 text-white">
+                <strong>Exam:</strong> {{ exam.title|default:exam.name|default:exam }}
+            </span>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#examNav" aria-controls="examNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="examNav">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item"><a class="nav-link" href="{% url 'rapids:exam_overview' pk=exam.pk %}">Overview</a></li>
+                    {% if exam.exam_mode %}
+                        <li class="nav-item"><a class="nav-link" href="{% url 'rapids:mark_overview' pk=exam.pk %}">Mark</a></li>
+                        <li class="nav-item"><a class="nav-link" href="{% url 'rapids:exam_scores_all' pk=exam.pk %}">Scores</a></li>
+                        <li class="nav-item"><a class="nav-link" href="{% url 'rapids:exam_cids' exam_id=exam.pk %}">Candidates</a></li>
+                        <li class="nav-item"><a class="nav-link" href="{% url 'rapids:exam_stats' exam_id=exam.pk %}">Stats</a></li>
+                    {% endif %}
+                    <li class="nav-item"><a class="nav-link" href="{% url 'rapids:question_create_exam' pk=exam.pk %}">Add Question</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'rapids:exam_review_start' pk=exam.pk %}">Review</a></li>
+                </ul>
+
+                {% include 'generic/partials/exams/dropdown_menu.html'%}
+            </div>
+        </div>
+    </nav>
 {% endblock %}
diff --git a/sbas/templates/sbas/exams.html b/sbas/templates/sbas/exams.html
index 46630742..8d947afd 100644
--- a/sbas/templates/sbas/exams.html
+++ b/sbas/templates/sbas/exams.html
@@ -2,11 +2,26 @@
 
 {% block navigation %}
     {{block.super}}
-    <br/>
-    Exams: {{exam}}->
-    <a href="{% url 'sbas:exam_overview' pk=exam.pk %}">Overview</a> /
-    <a href="{% url 'sbas:exam_scores_all' pk=exam.pk %}">Scores</a> /
-    <a href="{% url 'sbas:exam_cids' exam_id=exam.pk %}">Candidates</a> /
-    <a href="{% url 'sbas:exam_stats' exam_id=exam.pk %}">Stats</a> /
-    <a href="{% url 'sbas:exam_review_start' pk=exam.pk %}">Review</a> /
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-2 rounded">
+        <div class="container-fluid px-3">
+            <span class="navbar-text me-3 text-white">
+                <strong>Exam:</strong> {{ exam.title|default:exam.name|default:exam }}
+            </span>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#examNav" aria-controls="examNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="examNav">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item"><a class="nav-link" href="{% url 'sbas:exam_overview' pk=exam.pk %}">Overview</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'sbas:exam_scores_all' pk=exam.pk %}">Scores</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'sbas:exam_cids' exam_id=exam.pk %}">Candidates</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'sbas:exam_stats' exam_id=exam.pk %}">Stats</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'sbas:exam_review_start' pk=exam.pk %}">Review</a></li>
+                </ul>
+
+                {% include 'generic/partials/exams/dropdown_menu.html'%}
+            </div>
+        </div>
+    </nav>
 {% endblock %}
diff --git a/shorts/templates/shorts/exams.html b/shorts/templates/shorts/exams.html
index 2d0a7a97..cda62881 100644
--- a/shorts/templates/shorts/exams.html
+++ b/shorts/templates/shorts/exams.html
@@ -2,15 +2,30 @@
 
 {% block navigation %}
     {{block.super}}
-    <br/>
-    Exams: {{exam}}->
-    <a href="{% url 'shorts:exam_overview' pk=exam.pk %}">Overview</a> /
-    {% if exam.exam_mode %}
-        <a href="{% url 'shorts:mark_overview' pk=exam.pk %}">Mark</a> /
-        <a href="{% url 'shorts:exam_scores_all' pk=exam.pk %}">Scores</a> /
-        <a href="{% url 'shorts:exam_cids' exam_id=exam.pk %}">Candidates</a> /
-        <a href="{% url 'shorts:exam_stats' exam_id=exam.pk %}">Stats</a> /
-    {% endif %}
-    <a href="{% url 'shorts:question_create_exam' pk=exam.pk %}">Add New Question</a>
-    <a href="{% url 'shorts:exam_review_start' pk=exam.pk %}">Review</a>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-2 rounded">
+        <div class="container-fluid px-3">
+            <span class="navbar-text me-3 text-white">
+                <strong>Exam:</strong> {{ exam.title|default:exam.name|default:exam }}
+            </span>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#examNav" aria-controls="examNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="examNav">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item"><a class="nav-link" href="{% url 'shorts:exam_overview' pk=exam.pk %}">Overview</a></li>
+                    {% if exam.exam_mode %}
+                        <li class="nav-item"><a class="nav-link" href="{% url 'shorts:mark_overview' pk=exam.pk %}">Mark</a></li>
+                        <li class="nav-item"><a class="nav-link" href="{% url 'shorts:exam_scores_all' pk=exam.pk %}">Scores</a></li>
+                        <li class="nav-item"><a class="nav-link" href="{% url 'shorts:exam_cids' exam_id=exam.pk %}">Candidates</a></li>
+                        <li class="nav-item"><a class="nav-link" href="{% url 'shorts:exam_stats' exam_id=exam.pk %}">Stats</a></li>
+                    {% endif %}
+                    <li class="nav-item"><a class="nav-link" href="{% url 'shorts:question_create_exam' pk=exam.pk %}">Add Question</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{% url 'shorts:exam_review_start' pk=exam.pk %}">Review</a></li>
+                </ul>
+
+                {% include 'generic/partials/exams/dropdown_menu.html'%}
+            </div>
+        </div>
+    </nav>
 {% endblock %}