From 740d01319889a8311e2385ebdba78ff8101b57f7 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 17 Nov 2025 09:22:17 +0000
Subject: [PATCH] Refactor case prior display: enhance layout with Bootstrap
 cards for improved readability and user interaction

---
 .../atlas/collection_case_priors.html         | 175 +++++++++---------
 1 file changed, 89 insertions(+), 86 deletions(-)

diff --git a/atlas/templates/atlas/collection_case_priors.html b/atlas/templates/atlas/collection_case_priors.html
index fde90ee0..089cfd32 100644
--- a/atlas/templates/atlas/collection_case_priors.html
+++ b/atlas/templates/atlas/collection_case_priors.html
@@ -4,106 +4,109 @@
 
 {% block content %}
 
-    <div>
-
-        {% if previous %}
-            <a href="{% url 'atlas:collection_case_questions' collection.id previous.id %}">Previous question</a>
-        {% endif %}
-        Viewing question as part of collection: <a href="{% url 'atlas:collection_detail' collection.id %}">{{collection.name}}</a> [{{case_number|add:1}}/{{collection_length}}]
-        {% if next %}
-            <a href="{% url 'atlas:collection_case_questions' collection.id next.id %}">Next question</a>
-        {% endif %}
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div>
+            {% if previous %}
+                <a class="btn btn-outline-secondary btn-sm" href="{% url 'atlas:collection_case_priors' collection.id previous.id %}">&larr; Previous</a>
+            {% endif %}
+        </div>
+        <div class="text-center">
+            <div class="h6 mb-0">Viewing question in collection</div>
+            <div>
+                <a href="{% url 'atlas:collection_detail' collection.id %}" class="fw-bold">{{collection.name}}</a>
+                <small class="text-muted">[{{case_number|add:1}}/{{collection_length}}]</small>
+            </div>
+        </div>
+        <div>
+            {% if next %}
+                <a class="btn btn-outline-secondary btn-sm" href="{% url 'atlas:collection_case_priors' collection.id next.id %}">Next &rarr;</a>
+            {% endif %}
+        </div>
     </div>
 
 
-    <h2>Case: <a href="{% url 'atlas:case_detail' case_detail.case.pk %}">{{case_detail.case.title}}</a></h2>
+    <h2 class="mb-3">Case: <a href="{% url 'atlas:case_detail' case_detail.case.pk %}" class="text-decoration-none">{{case_detail.case.title}}</a></h2>
 
-    <p>This page allows you to add series from prior cases to a case in a collection. In order to be available here the cases must be linked on the system.</p>
-    <p>It is necessary to give a description of how the cases are related that will be displayed to the user when viewing the case.</p>
+    <div class="card mb-4">
+        <div class="card-body">
+            <p class="mb-1">This page allows you to add series from prior cases to a case in a collection. In order to be available here the cases must be linked on the system.</p>
+            <p class="mb-0">It is necessary to give a description of how the cases are related that will be displayed to the user when viewing the case.</p>
+        </div>
+    </div>
 
-    <h3>Available priors</h3>
+    <h3 class="mb-3">Available priors</h3>
 
-    <ul>
+    <div class="row g-3">
         {% for case, added, relation, visibility in available_priors %}
+            <div class="col-12 col-md-6 col-lg-4" data-case="{{case.id}}">
+                <div class="card h-100 shadow-sm {% if added %}border-success{% else %}border-secondary{% endif %}">
+                    <div class="card-body d-flex flex-column">
+                        <div class="d-flex justify-content-between align-items-start mb-2">
+                            <h5 class="card-title mb-0">{{case.title}}</h5>
+                            <div>
+                                {% if added %}
+                                    <span class="badge bg-success">Added</span>
+                                {% else %}
+                                    <span class="badge bg-secondary">Available</span>
+                                {% endif %}
+                            </div>
+                        </div>
 
-            <li class='
-                       {% if added %}
-                           added
-                       {% else %}
-                           not-added
-                       {% endif %}
-                      ' data-case={{case.id}}>
-                {{case.title}} / {{added}} / {{relation}} / <a href="{% url 'atlas:case_detail' case.id %}">View case</a>
-                <br/>{{case.get_series_blocks|safe}}
+                        <p class="card-text small text-muted mb-2">Relation: <span class="fw-medium">{{ relation }}</span></p>
 
-                <br/>
+                        <div class="mb-3 small">{{case.get_series_blocks|safe}}</div>
 
-                {% if not added %}
-                    <form hx-post="{% url 'atlas:collection_case_priors' collection.id case_detail.case.pk %}"
-                          hx-target="#htmx-response-{{case.id}}"
-                          _="on htmx:afterRequest log 'test' then remove me">
-                        {% csrf_token %}
-                        <input type="hidden" name="prior_case_id" value="{{case.id}}" />
-                        <input type="text" name="relation" value="{{relation}}" placeholder="relation to case" />
-                        <br />
-                        <label for="prior_visibility_{{case.id}}">Visibility:</label>
-                        <select name="prior_visibility" id="prior_visibility_{{case.id}}">
-                            <option value="AL" 
-                            {% if visibility == 'AL' %}
-                               selected 
-                            {% endif %}
-                                >Always</option>
-                            <option value="RE"
-                            {% if visibility == 'RE' %}
-                               selected 
+                        <div class="mt-auto">
+                            <div class="d-flex gap-2 mb-2">
+                                <a href="{% url 'atlas:case_detail' case.id %}" class="btn btn-sm btn-outline-primary">View case</a>
+                            </div>
+
+                            {% if not added %}
+                                <form class="row g-2" hx-post="{% url 'atlas:collection_case_priors' collection.id case_detail.case.pk %}"
+                                      hx-target="#htmx-response-{{case.id}}">
+                                    {% csrf_token %}
+                                    <input type="hidden" name="prior_case_id" value="{{case.id}}" />
+                                    <div class="col-12">
+                                        <input class="form-control form-control-sm" type="text" name="relation" value="{{relation}}" placeholder="Relation to case" />
+                                    </div>
+                                    <div class="col-8">
+                                        <select class="form-select form-select-sm" name="prior_visibility" id="prior_visibility_{{case.id}}">
+                                            <option value="AL" {% if visibility == 'AL' %}selected{% endif %}>Always</option>
+                                            <option value="RE" {% if visibility == 'RE' %}selected{% endif %}>Review</option>
+                                            <option value="NO" {% if visibility == 'NO' %}selected{% endif %}>None</option>
+                                        </select>
+                                    </div>
+                                    <div class="col-4 d-grid">
+                                        <button class="btn btn-sm btn-primary" type="submit">Add</button>
+                                    </div>
+                                </form>
+                            {% else %}
+                                <form hx-post="{% url 'atlas:collection_case_priors' collection.id case_detail.case.pk %}"
+                                      hx-target="#htmx-response-{{case.id}}">
+                                    {% csrf_token %}
+                                    <input type="hidden" name="remove" value="{{case.id}}" />
+                                    <div class="mb-2 small text-muted">Current relation: <strong>{{relation}}</strong></div>
+                                    <div class="d-flex gap-2">
+                                        <select class="form-select form-select-sm w-50" name="prior_visibility" id="prior_visibility_{{case.id}}" disabled>
+                                            <option value="AL" {% if visibility == 'AL' %}selected{% endif %}>Always</option>
+                                            <option value="RE" {% if visibility == 'RE' %}selected{% endif %}>Review</option>
+                                            <option value="NO" {% if visibility == 'NO' %}selected{% endif %}>None</option>
+                                        </select>
+                                        <button class="btn btn-sm btn-danger" type="submit">Remove</button>
+                                    </div>
+                                </form>
                             {% endif %}
 
-                            >Review</option>
-                            <option value="NO"
-                            {% if visibility == 'NO' %}
-                               selected 
-                            {% endif %}
-                            >None</option>
-                        </select>
-                        <br />
-                        <button class="btn primary">Add to case</button>
-                    </form>
-                {% else %}
-                    <form hx-post="{% url 'atlas:collection_case_priors' collection.id case_detail.case.pk %}"
-                          hx-target="#htmx-response-{{case.id}}"
-                          _="on htmx:afterRequest log 'test' then remove me">
-                        Case available: {{relation}}
-                        <input type="hidden" name="remove" value="{{case.id}}" />
-                        <br />
-                        <label for="prior_visibility_{{case.id}}">Visibility:</label>
-                        <select name="prior_visibility" id="prior_visibility_{{case.id}}" disabled>
-                            <option value="AL" 
-                            {% if visibility == 'AL' %}
-                               selected 
-                            {% endif %}
-                                >Always</option>
-                            <option value="RE"
-                            {% if visibility == 'RE' %}
-                               selected 
-                            {% endif %}
-
-                            >Review</option>
-                            <option value="NO"
-                            {% if visibility == 'NO' %}
-                               selected 
-                            {% endif %}
-                            >None</option>
-                        </select>
-                        <br />
-                        <button class="btn primary">Remove from case</button>
-                    </form>
-                {% endif %}
-                <span id="htmx-response-{{case.id}}"></span>
-
-            </li>
+                        </div>
+                    </div>
 
+                    <div class="card-footer bg-transparent">
+                        <span id="htmx-response-{{case.id}}" class="small"></span>
+                    </div>
+                </div>
+            </div>
         {% endfor %}
-    </ul>
+    </div>