Implement feature X to enhance user experience and optimize performance

atlas/templates/atlas/case_display_block.html

@@ -96,6 +96,17 @@
     .normal-group { border: 1px solid rgba(13,110,253,0.15); background: #f8fbff; padding: .75rem; border-radius: .375rem; margin-bottom: .75rem; }
     .normal-group .normal-heading { font-weight: 600; color: #0d6efd; margin-bottom: .5rem; }
     .normal-group .badge { margin-right: .25rem; }
+
+
+    .section-icon { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:0.5rem; }
+    .section-icon.description { background:#6c757d; }
+    .section-icon.presentation { background:#0d6efd; }
+    .section-icon.history { background:#198754; }
+    .section-icon.discussion { background:#fd7e14; }
+    .section-icon.report { background:#dc3545; }
+    .case-metadata { border-left: 1px solid #eee; padding-left: 1rem; }
+    .case-meta-item { margin-bottom: .5rem; }
+    .case-meta-label { font-weight:600; font-size:0.9rem; display:block; }
 </style>
 
 <div class="atlas {% if case.scrapped %}atlas-scrapped{% endif %}">
@@ -221,57 +232,8 @@
                 <span class="mx-1">/</span>
                 <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 %}
-                                    <span class="badge bg-secondary ms-1">{{ sub.get_link|safe }}</span>
-                                {% endfor %}
-                            {% else %}
-                                <span class="badge bg-secondary ms-1 text-muted">None</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 %}
         </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="badge bg-secondary ms-1 text-muted">None</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 %}
-                    </div>
-                </div>
-            </div>
     </div>
 
     <details id="dicom-viewer-details">
@@ -284,8 +246,13 @@
         ></div>
     </details>
 
+        <div class="container">
+            <div class="row g-3 mb-3">
+                <div class="col-12 col-md-8">
+                    <div class="mb-3">
                         <div class="d-flex align-items-start justify-content-between quick-edit-wrap">
                             <div class="d-flex align-items-start flex-grow-1">
+                                <span class="section-icon description" aria-hidden="true"></span>
                                 <strong>Description:</strong>
                                 {% url 'atlas:case_inline_field' case.pk 'description' as desc_url %}
                                 {% with endpoint_default=desc_url|add:"?show_label=0" endpoint_edit=desc_url|add:"?edit=1&show_label=0" %}
@@ -299,8 +266,11 @@
                                         hx-swap="outerHTML">quick edit</button>
                             {% endif %}
                         </div>
+                    </div>
 
+                    <div class="mb-3">
                         <p>
+                            <span class="section-icon presentation" aria-hidden="true"></span>
                             <b>Presentation:</b>
                             <ul>
                                 {% for presentation in case.presentation.all %}
@@ -308,11 +278,13 @@
                                 {% endfor %}
                             </ul>
                         </p>
+                    </div>
 
                     <div class="row g-3 mb-3">
-            <div class="col-12 col-md-12">
+                        <div class="col-12">
                             <div class="card h-100">
-                    <div class="card-header d-flex justify-content-between align-items-center quick-edit-wrap">History
+                                <div class="card-header d-flex justify-content-between align-items-center quick-edit-wrap">
+                                    <span><span class="section-icon history" aria-hidden="true"></span>History</span>
                                     {% if can_edit %}
                                         <button class="btn btn-sm btn-link text-muted p-0 quick-edit-button"
                                                 hx-get="{% url 'atlas:case_inline_field' case.pk 'history' %}?edit=1&show_label=0"
@@ -323,14 +295,15 @@
                                 <div class="card-body">
                                     {% url 'atlas:case_inline_field' case.pk 'history' as history_url %}
                                     {% with endpoint_default=history_url|add:"?show_label=0" endpoint_edit=history_url|add:"?edit=1&show_label=0" %}
-                            {% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label="History" can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-history' field_kind='textarea' value=case.history display_value=case.history field_name='history' error_message='' %}
+                                        {% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label='History' can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-history' field_kind='textarea' value=case.history display_value=case.history field_name='history' error_message='' %}
                                     {% endwith %}
                                 </div>
                             </div>
                         </div>
-            <div class="col-12 col-md-12">
+                        <div class="col-12">
                             <div class="card h-100">
-                    <div class="card-header d-flex justify-content-between align-items-center quick-edit-wrap">Discussion
+                                <div class="card-header d-flex justify-content-between align-items-center quick-edit-wrap">
+                                    <span><span class="section-icon discussion" aria-hidden="true"></span>Discussion</span>
                                     {% if can_edit %}
                                         <button class="btn btn-sm btn-link text-muted p-0 quick-edit-button"
                                                 hx-get="{% url 'atlas:case_inline_field' case.pk 'discussion' %}?edit=1&show_label=0"
@@ -341,14 +314,15 @@
                                 <div class="card-body">
                                     {% url 'atlas:case_inline_field' case.pk 'discussion' as discussion_url %}
                                     {% with endpoint_default=discussion_url|add:"?show_label=0" endpoint_edit=discussion_url|add:"?edit=1&show_label=0" %}
-                            {% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label="Discussion" can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-discussion' field_kind='textarea' value=case.discussion display_value=case.discussion field_name='discussion' error_message='' %}
+                                        {% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label='Discussion' can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-discussion' field_kind='textarea' value=case.discussion display_value=case.discussion field_name='discussion' error_message='' %}
                                     {% endwith %}
                                 </div>
                             </div>
                         </div>
-            <div class="col-12 col-md-12">
+                        <div class="col-12">
                             <div class="card h-100">
-                    <div class="card-header d-flex justify-content-between align-items-center quick-edit-wrap">Report
+                                <div class="card-header d-flex justify-content-between align-items-center quick-edit-wrap">
+                                    <span><span class="section-icon report" aria-hidden="true"></span>Report</span>
                                     {% if can_edit %}
                                         <button class="btn btn-sm btn-link text-muted p-0 quick-edit-button"
                                                 hx-get="{% url 'atlas:case_inline_field' case.pk 'report' %}?edit=1&show_label=0"
@@ -359,12 +333,68 @@
                                 <div class="card-body">
                                     {% url 'atlas:case_inline_field' case.pk 'report' as report_url %}
                                     {% with endpoint_default=report_url|add:"?show_label=0" endpoint_edit=report_url|add:"?edit=1&show_label=0" %}
-                            {% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label="Report" can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-report' field_kind='textarea' value=case.report display_value=case.report field_name='report' error_message='' %}
+                                        {% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label='Report' can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-report' field_kind='textarea' value=case.report display_value=case.report field_name='report' error_message='' %}
                                     {% endwith %}
                                 </div>
                             </div>
                         </div>
                     </div>
+                </div>
+
+                <aside class="col-12 col-md-4 case-metadata">
+                {# ID/date shown above; removed duplicate here #}
+
+                    <div class="case-meta-item">
+                        <span class="case-meta-label">Subspecialty</span>
+                        <div 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="badge bg-secondary ms-1 text-muted">None</span>
+                            {% endif %}
+                        </div>
+                        {% if can_edit %}
+                            <div class="mt-1"><button class="btn btn-sm btn-link text-muted p-0 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></div>
+                        {% endif %}
+                    </div>
+
+                    <div class="case-meta-item">
+                        <span class="case-meta-label">Pathological process</span>
+                        <div>
+                            {% 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="badge bg-secondary ms-1 text-muted">None</span>
+                            {% endif %}
+                        </div>
+                    </div>
+
+                    <div class="case-meta-item">
+                        <span class="case-meta-label">Diagnostic certainty</span>
+                        <div class="d-flex align-items-center">
+                            {% 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 %}
+                                <div class="ms-2"><button class="btn btn-sm btn-link text-muted p-0 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></div>
+                            {% endif %}
+                        </div>
+                    </div>
+                </aside>
+            </div>
+
+        </div>
     <div class="mb-3">
         <h5>Resources</h5>
 
@@ -644,30 +674,30 @@
             </li>
         {% endfor %}
     </ul>
-    </p>
+</p>
 
 
-    {% if casedetail %}
+{% if casedetail %}
     {% include 'atlas/partials/collection_question_block.html' with can_edit=can_edit %}
 
-    {% endif %}
+{% endif %}
 
 
 
 
-    <p class="pre-whitespace"><b>Previous case:</b> {{ case.previous_case.get_link }}</p>
+<p class="pre-whitespace"><b>Previous case:</b> {{ case.previous_case.get_link }}</p>
-    <p class="pre-whitespace"><b>Next case:</b>
+<p class="pre-whitespace"><b>Next case:</b>
     {% if case.next_case %}
         {{ case.next_case.get_link }}
     {% else %}
         <a href="{% url 'atlas:case_clone_next' case.pk %}">Clone and add next case</a>
     {% endif %}
-    </p>
+</p>
-    <div>
+<div>
     {% include 'question_notes.html' %}
 
-    </div>
+</div>
-    <div class="modal fade" id="displaysetModal" tabindex="-1" aria-labelledby="displaysetModalLabel" aria-hidden="true">
+<div class="modal fade" id="displaysetModal" tabindex="-1" aria-labelledby="displaysetModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
@@ -682,18 +712,18 @@
             </div>
         </div>
     </div>
-    </div>
+</div>
 
-    <p><b>Checked by:</b> {% for verified in case.verified.all %} <a
+<p><b>Checked by:</b> {% for verified in case.verified.all %} <a
     href="{% url 'atlas:verified_detail' pk=verified.pk %}">{{verified}}</a>, {% endfor %}</p>
 
-    <p><b>Author(s):</b> {% for author in case.author.all %} <a
+<p><b>Author(s):</b> {% for author in case.author.all %} <a
     href="{% url 'atlas:author_detail' pk=author.pk %}">{{author}}</a>, {% endfor %}</p>
 
 
-    <p><b>Case size:</b> {{ case.get_total_series_images_size | filesizeformat }}</p>
+<p><b>Case size:</b> {{ case.get_total_series_images_size | filesizeformat }}</p>
 
-    <div class="modal fade" id="findingModal" tabindex="-1" aria-labelledby="findingModalLabel" aria-hidden="true">
+<div class="modal fade" id="findingModal" tabindex="-1" aria-labelledby="findingModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
@@ -709,9 +739,9 @@
             </div>
         </div>
     </div>
-    </div>
+</div>
 <!-- Reorder Series Modal -->
-    <div class="modal fade" id="reorderSeriesModal" tabindex="-1" aria-labelledby="reorderSeriesModalLabel" aria-hidden="true">
+<div class="modal fade" id="reorderSeriesModal" tabindex="-1" aria-labelledby="reorderSeriesModalLabel" aria-hidden="true">
     <div class="modal-dialog">
         <form method="post" action="{% url 'atlas:reorder_series' case.pk %}" id="reorder-series-form">
             {% csrf_token %}
@@ -743,9 +773,9 @@
             </div>
         </form>
     </div>
-    </div>
+</div>
 
-    <script>
+<script>
     // From series_viewer.html
     function loadAnnotationAndViewportOnElement(annotation, viewport, dicom_element, current_image_id_index) {
         cornerstoneTools.globalImageIdSpecificToolStateManager.clear(dicom_element);
@@ -990,9 +1020,9 @@
     });
 
 
-    </script>
+</script>
 
-    <style>
+<style>
     /* Highlight style for the series-block */
     .highlight-series {
         background-color: blue;
@@ -1024,4 +1054,4 @@
     .normal-block {
         float: right;
     }
-    </style>
+</style>