Refactor exam status display to use buttons for publish results and exam active states, enhancing user interaction and visual clarity.

generic/templates/generic/exam_overview_headers.html

@@ -53,10 +53,8 @@
                 <div class="card">
                     <div class="card-body p-2">
                         <div class="d-flex justify-content-between align-items-center">
-                            <div>
+                            {% include "generic/partials/exams/exam_status.html#exam-active" %}
-                                Open access:
+                            {% include "generic/partials/exams/exam_status.html#publish-results" %}
-                                <span class="fw-bold">{{ exam.open_access }}</span>
-                            </div>
                         </div>
                         <div class="mt-2 small text-muted">
                             {% if exam.start_date %}Start: {{ exam.start_date }}{% endif %}
@@ -67,10 +65,14 @@
                 <div class="card">
                     <div class="card-body p-2">
                         <div class="d-flex justify-content-between align-items-center">
-                            {% include "generic/partials/exams/exam_status.html#exam-active" %}
+                            <div>
+                                Open access:
+                                <span class="fw-bold">{{ exam.open_access }}</span>
                             </div>
                         </div>
                     </div>
+                </div>
+
 
                 <div class="card">
                     <div class="card-body p-2">

generic/templates/generic/partials/exams/exam_status.html

@@ -5,20 +5,24 @@
         <div class="me-2 small text-muted">Publish results</div>
         <div>
             {% if exam.publish_results %}
-                <span class="badge bg-success">Published</span>
-            {% else %}
-                <span class="badge bg-secondary">Unpublished</span>
-            {% endif %}
-        </div>
-        <div class="ms-auto">
                 <button
+                    class="btn btn-sm btn-success"
                     hx-post="{% url exam.get_app_name|add:':exam_toggle_results_published' exam.pk %}"
                     hx-swap="outerHTML"
                     hx-target="#publish-results-status"
-                class="btn btn-sm btn-outline-primary"
+                    title="Click to unpublish results"
-            >
+                    aria-label="Unpublish results"
-                {% if exam.publish_results %}Unpublish{% else %}Publish{% endif %}
+                >Published</button>
-            </button>
+            {% else %}
+                <button
+                    class="btn btn-sm btn-secondary"
+                    hx-post="{% url exam.get_app_name|add:':exam_toggle_results_published' exam.pk %}"
+                    hx-swap="outerHTML"
+                    hx-target="#publish-results-status"
+                    title="Click to publish results"
+                    aria-label="Publish results"
+                >Unpublished</button>
+            {% endif %}
         </div>
     </div>
 {% endpartialdef publish-results %}
@@ -29,20 +33,24 @@
         <div class="me-2 small text-muted">Exam active</div>
         <div>
             {% if exam.active %}
-                <span class="badge bg-success">Active</span>
-            {% else %}
-                <span class="badge bg-secondary">Inactive</span>
-            {% endif %}
-        </div>
-        <div class="ms-auto">
                 <button
+                    class="btn btn-sm btn-success"
                     hx-post="{% url exam.get_app_name|add:':exam_toggle_active' exam.pk %}"
                     hx-swap="outerHTML"
                     hx-target="#exam-active-status"
-                class="btn btn-sm btn-outline-primary"
+                    title="Click to deactivate this exam"
-            >
+                    aria-label="Deactivate exam"
-                {% if exam.active %}Deactivate{% else %}Activate{% endif %}
+                >Active</button>
-            </button>
+            {% else %}
+                <button
+                    class="btn btn-sm btn-secondary"
+                    hx-post="{% url exam.get_app_name|add:':exam_toggle_active' exam.pk %}"
+                    hx-swap="outerHTML"
+                    hx-target="#exam-active-status"
+                    title="Click to activate this exam"
+                    aria-label="Activate exam"
+                >Inactive</button>
+            {% endif %}
         </div>
     </div>
 {% endpartialdef exam-active %}