From 3635275573f54f8fa4e5771e9e45cb7427e0340f Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 24 Nov 2025 12:36:18 +0000
Subject: [PATCH] Enhance case view layout and styling for improved readability
 and user experience

---
 .../atlas/collection_case_view_take.html      | 118 +++++++++---------
 1 file changed, 62 insertions(+), 56 deletions(-)

diff --git a/atlas/templates/atlas/collection_case_view_take.html b/atlas/templates/atlas/collection_case_view_take.html
index dfa1147e..e70d1e71 100644
--- a/atlas/templates/atlas/collection_case_view_take.html
+++ b/atlas/templates/atlas/collection_case_view_take.html
@@ -2,43 +2,48 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-    <span class="collection-name-blend">Collection: {{collection}}</span>
-    <div class="d-flex justify-content-between align-items-start">
-        <h2 class="mb-0">Case {{case_number|add:1}}
+    <div class="mb-2"><small class="text-muted">Collection: <strong>{{collection}}</strong></small></div>
 
-            {% if show_title %}
-                : {{case.title}}
-            {% endif %}
+    <div class="d-flex justify-content-between align-items-start mb-3">
+        <div>
+            <h2 class="h4 mb-0">Case {{case_number|add:1}}
+
+                {% if show_title %}
+                    : {{case.title}}
+                {% endif %}
 
 
-            {% if question_completed %}
-                <span class="stamp-white">REVIEW</span>
-            {% endif %}
+                {% if question_completed %}
+                    <span class="badge bg-warning text-dark ms-2 small">REVIEW</span>
+                {% endif %}
 
-        </h2>
+            </h2>
+        </div>
 
-        <!-- Case jump dropdown (loads via HTMX) - placed to the right of the header -->
-        <div class="dropdown ms-3">
-            <a class="btn btn-outline-secondary btn-sm dropdown-toggle" href="#" role="button" id="caseJump" data-bs-toggle="dropdown" aria-expanded="false"
-               hx-get="{% url 'atlas:collection_case_jump_partial' pk=collection.pk %}?current={{case_number}}{% if cid %}&cid={{cid}}&passcode={{passcode}}{% endif %}"
-               hx-target="#case-jump-menu"
-               hx-swap="innerHTML"
-               hx-trigger="click">
-                Jump
-            </a>
-            <div class="dropdown-menu dropdown-menu-end" id="case-jump-menu">
-                <div class="px-3 py-2 text-muted">Loading...</div>
+        <div class="d-flex align-items-center ms-3">
+            <div class="dropdown">
+                <a class="btn btn-outline-secondary btn-sm dropdown-toggle" href="#" role="button" id="caseJump" data-bs-toggle="dropdown" aria-expanded="false"
+                   hx-get="{% url 'atlas:collection_case_jump_partial' pk=collection.pk %}?current={{case_number}}{% if cid %}&cid={{cid}}&passcode={{passcode}}{% endif %}"
+                   hx-target="#case-jump-menu"
+                   hx-swap="innerHTML"
+                   hx-trigger="click">
+                    Jump
+                </a>
+                <div class="dropdown-menu dropdown-menu-end" id="case-jump-menu">
+                    <div class="px-3 py-2 text-muted">Loading...</div>
+                </div>
             </div>
         </div>
     </div>
 
     {% if not question_completed and collection.question_time_limit is not None %}
-        <div id="question-timer-block" style="margin-top:8px; margin-bottom:8px;" title="This question has a time limit of {{ collection.question_time_limit }} seconds. The timer will start when the page loads.">
-            <strong>Time remaining:</strong>
-            <span id="question-timer" aria-live="polite">&nbsp;</span>
-            <div id="question-timer-progress" style="display:inline-block; vertical-align: middle; width: 200px; margin-left:12px;">
-                <div id="question-timer-progress-outer" style="background:#e9ecef; border-radius:6px; height:10px; overflow:hidden;">
-                    <div id="question-timer-progress-inner" style="width:100%; height:100%; background:var(--timer-color, #28a745);"></div>
+        <div id="question-timer-block" class="mb-3" title="This question has a time limit of {{ collection.question_time_limit }} seconds. The timer will start when the page loads.">
+            <div class="d-flex align-items-center gap-3">
+                <div><strong>Time remaining:</strong> <span id="question-timer" aria-live="polite">&nbsp;</span></div>
+                <div style="flex:1; max-width:320px;">
+                    <div class="progress" style="height:10px;">
+                        <div id="question-timer-progress-inner" class="progress-bar" role="progressbar" style="width:100%; background:var(--timer-color, #28a745);"></div>
+                    </div>
                 </div>
             </div>
             <div id="timer-htmx-target" style="display:none;"></div>
@@ -53,12 +58,10 @@
 
     {% if not question_completed %}
         {% if resources %}
-            <h5>Resources</h4>
-            <ul class="no-list-style">
+            <h5 class="mt-3">Resources</h5>
+            <ul class="list-group list-group-flush mb-3">
                 {% for caseresource in resources %}
-                    <li>
-                        {{caseresource.resource.get_display}}
-                    </li>
+                    <li class="list-group-item py-1 small">{{caseresource.resource.get_display}}</li>
                 {% endfor %}
             </ul>
         {% endif %}
@@ -66,21 +69,21 @@
 
 
     {% if show_description and case.description %}
-        <div>
-            Description: {{case.description}}
+        <div class="mb-3">
+            <h6 class="mb-1">Description</h6>
+            <p class="mb-0">{{case.description}}</p>
         </div>
     {% endif %}
     {% if show_history %}
-        <div class="d-flex justify-content-between align-items-start">
-            <div>
-                History: {{casedetail.get_history_pre|linebreaks}}
+        <div class="card mb-3">
+            <div class="card-body p-2 d-flex justify-content-between align-items-start">
+                <div class="me-3 small text-muted">History: {{casedetail.get_history_pre|linebreaks}}</div>
+                {% if has_priors %}
+                    <div class="ms-2">
+                        <span title="This case has priors available for comparison" class="badge bg-secondary text-white rounded-pill small">Priors{% if prior_count %} ({{ prior_count }}){% endif %}</span>
+                    </div>
+                {% endif %}
             </div>
-            {% if has_priors %}
-                <div class="ms-2">
-                    <span title="This case has priors available for comparison" class="badge bg-info text-dark small">Priors{% if prior_count %} ({{ prior_count }}){% endif %}</span>
-                </div>
-            {% endif %}
-
         </div>
     {% endif %}
 
@@ -268,25 +271,28 @@
             {% endif %}
 
         {% endif %}
-        {% if previous %}
-            <button type="submit" name="previous" class="save btn btn-default">Previous</button>
-        {% endif %}
-        {% if next %}
-            <button type="submit" name="next" class="save btn btn-default">Next</button>
-        {% elif collection.collection_type == "REP" %}
-            {% if not exam.publish_results %}
-                <button type="submit" name="save" class="save btn btn-default">Save</button>
+        <div class="mb-2">
+            {% if previous %}
+                <button type="submit" name="previous" class="btn btn-outline-secondary btn-sm me-2">Previous</button>
             {% endif %}
-        {% endif %}
+            {% if next %}
+                <button type="submit" name="next" class="btn btn-primary btn-sm me-2">Next</button>
+            {% elif collection.collection_type == "REP" %}
+                {% if not exam.publish_results %}
+                    <button type="submit" name="save" class="btn btn-primary btn-sm me-2">Save</button>
+                {% endif %}
+            {% endif %}
+        </div>
 
         {% if collection.self_review and not collection.feedback_once_collection_complete and not question_completed %}
-            <button type="submit" name="complete_case" class="save btn btn-default">Finish Case</button>
+            <button type="submit" name="complete_case" class="btn btn-success btn-sm">Finish Case</button>
         {% endif %}
 
 
-        <br />
-        <button type="submit" name="finish" class="save btn btn-default">Overview</button>
-        <button type="submit" id="goto-button" value="test" name="goto" class="hide">goto</button>
+        <div class="mt-3">
+            <button type="submit" name="finish" class="btn btn-outline-secondary btn-sm">Overview</button>
+            <button type="submit" id="goto-button" value="test" name="goto" class="hide">goto</button>
+        </div>
     </form>
     <style>
         label {