Add case viewing buttons and improve layout in case display block

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,9 +222,11 @@
                 <span class="date">{{ case.created_date|date:"d/m/Y" }}</span>
             </div>
 
+            <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">
+                        Subspecialty:
                         <span id="case-inline-subspecialty">
                             {% if case.subspecialty.all %}
                                 {% for sub in case.subspecialty.all %}
@@ -236,29 +245,31 @@
                     </div>
 
             {# Pathological process badges #}
+                    <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>
+                        {% 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 %}
-                    {% 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>
             </div>
         </div>
@@ -1010,4 +1021,7 @@
         .link-buttons {
             float: right;
         }
+        .normal-block {
+            float: right;
+        }
     </style>