From c69eecc1ec9fff0c1c9bc1bcbb475b3b5a3d0a05 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Tue, 11 Nov 2025 14:02:41 +0000
Subject: [PATCH] Refactor mark2 overview page layout; enhance question display
 and button functionality for improved user interaction

---
 anatomy/templates/anatomy/mark2_overview.html | 90 +++++++++++++++----
 1 file changed, 75 insertions(+), 15 deletions(-)

diff --git a/anatomy/templates/anatomy/mark2_overview.html b/anatomy/templates/anatomy/mark2_overview.html
index ebfa1baf..5d66895d 100644
--- a/anatomy/templates/anatomy/mark2_overview.html
+++ b/anatomy/templates/anatomy/mark2_overview.html
@@ -1,20 +1,80 @@
 {% extends 'anatomy/exams.html' %}
 
 {% block content %}
-<div class="anatomy">
-    <h2>Mark2: Marking exam: {{ exam }}</h2>
-    Use the improved HTMX marking UI by clicking into a question below.
+    <div class="container my-4 anatomy">
+        <div class="d-flex justify-content-between align-items-start mb-3">
+            <div>
+                <h2 class="h4 mb-1">Mark2 — Marking: {{ exam }}</h2>
+                <p class="small text-muted mb-0">Use the improved HTMX marking UI by opening a question below.</p>
+            </div>
+            <div class="text-end">
+                <div class="btn-group me-2" role="group" aria-label="listing actions">
+                    <button class="btn btn-sm btn-outline-secondary show-all-button">Show all</button>
+                    <button class="btn btn-sm btn-outline-secondary show-unmarked-button">Show unmarked</button>
+                </div>
+                <a href="{% url 'anatomy:mark2' exam_pk=exam.pk sk=0 %}" class="btn btn-sm btn-primary">Start mark2</a>
+            </div>
+        </div>
 
-    <div>
-    <button class="show-all-button">Show all</button><button class="show-unmarked-button">Show unmarked</button>
-    </div>
-    <div id="stark-marking-button"><a href="{% url 'anatomy:mark2' exam_pk=exam.pk sk=0 %}"><button>Click here to start mark2</button></a></div>
+        <div class="card">
+            <div class="card-body p-2">
+                <ul class="list-group list-group-flush" id="question-mark-list">
+                                {% for question, unmarked_count, unmarked_count2 in question_unmarked_map %}
+                                    <li class="list-group-item d-flex justify-content-between align-items-start" data-unmarked="{{ unmarked_count }}">
+                            <div class="me-3">
+                                <a href="{% url 'anatomy:mark2' exam_pk=exam.pk sk=forloop.counter0 %}" class="fw-semibold">Question {{ forloop.counter }}:</a>
+                                <div class="small text-truncate" style="max-width:60vw;">{{ question }}</div>
+                            </div>
+                                        <div class="text-end">
+                                            <div class="small text-muted">Unmarked</div>
+                                                            {% if unmarked_count > 0 %}
+                                                <span class="badge bg-danger">{{ unmarked_count }}</span>
+                                            {% else %}
+                                                <span class="badge bg-secondary">{{ unmarked_count }}</span>
+                                            {% endif %}
+                                        </div>
+                        </li>
+                    {% empty %}
+                        <li class="list-group-item small text-muted">No questions found.</li>
+                    {% endfor %}
+                        </ul>
+                    </div>
+                </div>
+            </div>
 
-    <ul id="question-mark-list">
-        {% for question, unmarked_count, unmarked_count2 in question_unmarked_map %}
-        <li data-markcount={{unmarked_count}} {% if unmarked_count %}class="unmarked" {% endif %}><a href="{% url 'anatomy:mark2' exam_pk=exam.pk sk=forloop.counter0 %}">Question {{forloop.counter }}:
-                {{ question }}</a><br />Unmarked answers:  {{ unmarked_count }}</li>
-        {% endfor %}
-    </ul>
-</div>
-{% endblock %}
+            <script>
+                (function(){
+                    function $(sel, ctx){ return (ctx||document).querySelector(sel); }
+                    function $all(sel, ctx){ return Array.from((ctx||document).querySelectorAll(sel)); }
+
+                    var showAllBtn = $('.show-all-button');
+                    var showUnmarkedBtn = $('.show-unmarked-button');
+                    var list = $('#question-mark-list');
+                    if (!list) return;
+
+                    function showAll(){
+                        $all('#question-mark-list .list-group-item').forEach(function(li){ li.classList.remove('d-none'); });
+                        showAllBtn && showAllBtn.classList.add('active');
+                        showUnmarkedBtn && showUnmarkedBtn.classList.remove('active');
+                    }
+
+                    function showUnmarked(){
+                        $all('#question-mark-list .list-group-item').forEach(function(li){
+                            var u = parseInt(li.getAttribute('data-unmarked') || '0', 10);
+                            if (u > 0) li.classList.remove('d-none'); else li.classList.add('d-none');
+                        });
+                        showUnmarkedBtn && showUnmarkedBtn.classList.add('active');
+                        showAllBtn && showAllBtn.classList.remove('active');
+                    }
+
+                    if (showAllBtn) showAllBtn.addEventListener('click', function(e){ e.preventDefault(); showAll(); });
+                    if (showUnmarkedBtn) showUnmarkedBtn.addEventListener('click', function(e){ e.preventDefault(); showUnmarked(); });
+
+                    // Initialize to show all
+                    showAll();
+                })();
+            </script>
+            <style>
+                .show-all-button.active, .show-unmarked-button.active { box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08); }
+            </style>
+    {% endblock %}