From 9bda3f22db80afcfd9f005e523146d546ac99d59 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 18 Aug 2025 10:45:02 +0100
Subject: [PATCH] Refactor details elements to use styled-detail class for
 consistent styling and add empty state message for findings

---
 atlas/templates/atlas/series_viewer.html | 35 +++++++++++-------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/atlas/templates/atlas/series_viewer.html b/atlas/templates/atlas/series_viewer.html
index 8cc05756..1f20800f 100755
--- a/atlas/templates/atlas/series_viewer.html
+++ b/atlas/templates/atlas/series_viewer.html
@@ -83,13 +83,9 @@ Associated case:
         <button id="reset-viewport-button">Reset viewport</button>
     {% endif %}
 
-    <details open>
+    <details class="styled-detail open">
         <summary>Findings</summary>
 
-
-
-
-
         {% for finding in series.findings.all %}
             <div class="finding-box">
                 <button id="finding-{{finding.pk}}-3d" class="view-finding-button-3d" data-annotationjson3d='{{finding.annotation_json_3d}}' data-viewerstatejson='{{finding.viewer_state_3d}}' data-findingid='{{finding.pk}}'>Click to view</button>
@@ -122,12 +118,13 @@ Associated case:
                     <a href="{% url 'atlas:delete_finding' pk=finding.pk %}" class="delete-finding-link">Delete</a>
                 {% endif %}
             </div>
-
+        {% empty %}
+            <p>No findings available.</p>
         {% endfor %}
     </details>
 
     {% if can_edit %}
-        <details>
+        <details class="styled-detail">
             <summary>Truncate series</summary>
             <p>
                 This will limit the series to the selected bounds (the rest of the images will be deleted). This is useful when you have a large volume of which only a small area is relevant to the case. NOTE: once deleted the images cannot be recovered on the site (they would have to be reuploaded if required). Make sure your images are shown in the correct order above and use test the test truncate button first.
@@ -149,7 +146,7 @@ Associated case:
 
 
 {% if can_edit %}
-    <details>
+    <details class="styled-detail">
         <summary>Series info</summary>
         <div class="d-flex flex-wrap gap-2 mb-2">
             <button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_anonymise_dicom' pk=series.pk %}'" title="Anonymise dicom images">
@@ -403,7 +400,7 @@ Associated case:
         cursor: pointer;
     }
 
-    details {
+    details.styled-detail {
         background: #23272b;
         border-radius: 0.7em;
         margin: 1.2em 0;
@@ -412,11 +409,11 @@ Associated case:
         border: 1px solid #343a40;
         transition: box-shadow 0.2s;
     }
-    details[open] {
+    details.styled-detail[open] {
         box-shadow: 0 4px 24px rgba(13,110,253,0.10);
         border-color: #0d6efd;
     }
-    details > summary {
+    details.styled-detail > summary {
         font-size: 1.15em;
         font-weight: 600;
         color: #0d6efd;
@@ -429,41 +426,41 @@ Associated case:
         transition: background 0.2s, font-size 0.2s;
     }
 
-details:not([open]) {
+details.styled-detail:not([open]) {
     padding-bottom: 0;
     min-height: 0;
 }
 
-details:not([open]) > *:not(summary) {
+details.styled-detail:not([open]) > *:not(summary) {
     display: none;
 }
 
-    details:not([open]) > summary {
+    details.styled-detail:not([open]) > summary {
         padding: 0.7em 1.2em 0.3em 1.2em;
     }
-    details > summary:hover {
+    details.styled-detail > summary:hover {
         background: linear-gradient(90deg, #23272b 60%, #0d6efd44 100%);
         color: #198754;
     }
-    details > div, details > p, details > form, details > ul {
+    details.styled-detail > div, details.styled-detail > p, details.styled-detail > form, details.styled-detail > ul {
         margin-top: 0.7em;
     }
     .alert {
         margin-top: 1em;
     }
     /* Nested details */
-    details details {
+    details.styled-detail details {
         background: #181a1b;
         border: 1px solid #444;
         margin: 0.7em 0;
         box-shadow: none;
     }
-    details details > summary {
+    details.styled-detail details > summary {
         color: #ffc107;
         background: linear-gradient(90deg, #181a1b 80%, #ffc10722 100%);
         border-bottom: 1px solid #444;
     }
-    details details > summary:hover {
+    details.styled-detail details > summary:hover {
         color: #0d6efd;
         background: linear-gradient(90deg, #181a1b 60%, #0d6efd22 100%);
     }