From 2c482216c1982e4050c8e07590a678292c414f26 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 9 Mar 2026 09:46:25 +0000
Subject: [PATCH] Add case viewing buttons and improve layout in case display
 block

---
 atlas/templates/atlas/case_display_block.html | 112 ++++++++++--------
 1 file changed, 63 insertions(+), 49 deletions(-)

diff --git a/atlas/templates/atlas/case_display_block.html b/atlas/templates/atlas/case_display_block.html
index 3c7b0367..f32b6c37 100755
--- a/atlas/templates/atlas/case_display_block.html
+++ b/atlas/templates/atlas/case_display_block.html
@@ -99,6 +99,23 @@
 </style>
 
 <div class="atlas {% if case.scrapped %}atlas-scrapped{% endif %}">
+    <div class="btn-group btn-group-sm link-buttons" role="group">
+        <button type="button" class="btn btn-primary btn-sm"
+                onclick="window.location.href='/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}'">View case in OHIF</button>
+        <button type="button" class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <span class="visually-hidden">Toggle dropdown</span>
+        </button>
+        <ul class="dropdown-menu">
+            <li>
+                <a class="dropdown-item" target="_blank" href="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Open in new tab</a>
+            </li>
+        </ul>
+    </div>
+    <div class="normal-block">
+        <div class="mt-1">
+            {% include "atlas/partials/_normal_toggle.html" %}
+        </div>
+    </div>
     <h2 class="d-flex align-items-center" style="gap: .5rem; white-space: nowrap;">
         <span>Case:</span>
         <div class="d-flex align-items-center quick-edit-wrap">
@@ -195,17 +212,7 @@
 
 
         {% else %}
-            <div class="btn-group link-buttons" role="group">
-                <button type="button" class="btn btn-primary" onclick="window.location.href='/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}'">View case in OHIF</button>
-                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-                    <span class="visually-hidden">Toggle dropdown</span>
-                </button>
-                <ul class="dropdown-menu">
-                    <li>
-                        <a class="dropdown-item" target="_blank" href="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Open in new tab</a>
-                    </li>
-                </ul>
-            </div>
+
         {% endif %}
 
         <div class="clearfix mb-2">
@@ -215,50 +222,54 @@
                 <span class="date">{{ case.created_date|date:"d/m/Y" }}</span>
             </div>
 
-            <div class="float-end text-end">
+            <div class="metadata-block">
+                <div class="float-end text-end">
             {# Subspecialty badges (preserve any anchor returned by get_link) #}
-                <div class="quick-edit-wrap d-inline-block align-middle">
-                    <span id="case-inline-subspecialty">
-                        {% if case.subspecialty.all %}
-                            {% for sub in case.subspecialty.all %}
-                                <span class="badge bg-secondary ms-1">{{ sub.get_link|safe }}</span>
-                            {% endfor %}
-                        {% else %}
-                            <span class="text-muted me-2">No subspecialty</span>
+                    <div class="quick-edit-wrap d-inline-block align-middle">
+                        Subspecialty:
+                        <span id="case-inline-subspecialty">
+                            {% if case.subspecialty.all %}
+                                {% for sub in case.subspecialty.all %}
+                                    <span class="badge bg-secondary ms-1">{{ sub.get_link|safe }}</span>
+                                {% endfor %}
+                            {% else %}
+                                <span class="text-muted me-2">No subspecialty</span>
+                            {% endif %}
+                        </span>
+                        {% if can_edit %}
+                            <button class="btn btn-sm btn-link text-muted p-0 ms-2 quick-edit-button"
+                                    hx-get="{% url 'atlas:case_inline_field' case.pk 'subspecialty' %}?edit=1&show_label=0"
+                                    hx-target="#case-inline-subspecialty"
+                                    hx-swap="outerHTML">quick edit</button>
                         {% endif %}
-                    </span>
-                    {% if can_edit %}
-                        <button class="btn btn-sm btn-link text-muted p-0 ms-2 quick-edit-button"
-                                hx-get="{% url 'atlas:case_inline_field' case.pk 'subspecialty' %}?edit=1&show_label=0"
-                                hx-target="#case-inline-subspecialty"
-                                hx-swap="outerHTML">quick edit</button>
-                    {% endif %}
-                </div>
+                    </div>
 
             {# Pathological process badges #}
-                {% if case.pathological_process.all %}
-                    {% for p in case.pathological_process.all %}
-                        <span class="badge bg-secondary ms-1">{{ p.get_link|safe }}</span>
-                    {% endfor %}
-                {% endif %}
+                    <div class="d-flex d-inline-block align-middle">
+                        Pathological process:
+                        {% if case.pathological_process.all %}
+                            {% for p in case.pathological_process.all %}
+                                <span class="badge bg-secondary ms-1">{{ p.get_link|safe }}</span>
+                            {% endfor %}
+                        {% else %}
+                            <span class="text-muted me-2">No pathological process</span>
+                        {% endif %}
+                    </div>
 
             {# Diagnostic certainty quick inline editor #}
-                <div class="d-flex align-items-center quick-edit-wrap">
-                    <span>Diagnostic certainty:</span>
-                    {% if can_edit %}
-                        <button class="btn btn-sm btn-link text-muted p-0 ms-2 quick-edit-button"
-                                hx-get="{% url 'atlas:case_inline_field' case.pk 'diagnostic_certainty' %}?edit=1&show_label=0"
-                                hx-target="#case-inline-diagnostic_certainty"
-                                hx-swap="outerHTML">quick edit</button>
-                    {% endif %}
-                    {% url 'atlas:case_inline_field' case.pk 'diagnostic_certainty' as diag_url %}
-                    {% with endpoint_default=diag_url|add:"?show_label=0" endpoint_edit=diag_url|add:"?edit=1&show_label=0" %}
-                        {% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label="Diagnostic certainty" can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-diagnostic_certainty' field_kind='select' value=case.get_diagnostic_certainty_display display_value=case.get_diagnostic_certainty_display field_name='diagnostic_certainty' error_message='' %}
-                    {% endwith %}
-                </div>
-            {# Normal toggle HTMX block #}
-                <div class="mt-1">
-                    {% include "atlas/partials/_normal_toggle.html" %}
+                    <div class="d-flex align-items-center quick-edit-wrap">
+                        <span>Diagnostic certainty:</span>
+                        {% url 'atlas:case_inline_field' case.pk 'diagnostic_certainty' as diag_url %}
+                        {% with endpoint_default=diag_url|add:"?show_label=0" endpoint_edit=diag_url|add:"?edit=1&show_label=0" %}
+                            {% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label="Diagnostic certainty" can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-diagnostic_certainty' field_kind='select' value=case.get_diagnostic_certainty_display display_value=case.get_diagnostic_certainty_display field_name='diagnostic_certainty' error_message='' %}
+                        {% endwith %}
+                        {% if can_edit %}
+                            <button class="btn btn-sm btn-link text-muted p-0 ms-2 quick-edit-button"
+                                    hx-get="{% url 'atlas:case_inline_field' case.pk 'diagnostic_certainty' %}?edit=1&show_label=0"
+                                    hx-target="#case-inline-diagnostic_certainty"
+                                    hx-swap="outerHTML">quick edit</button>
+                        {% endif %}
+                    </div>
                 </div>
             </div>
         </div>
@@ -1010,4 +1021,7 @@
         .link-buttons {
             float: right;
         }
+        .normal-block {
+            float: right;
+        }
     </style>
\ No newline at end of file