Enhance series viewer layout with improved author display and button interactions for DICOM operations

atlas/templates/atlas/series_viewer.html

@@ -38,6 +38,7 @@ Associated case:
         </details>
     {% endif %}
 {% endfor %}
+<div>Author: {{ series.get_author_display }}</div>
 
 {% with image_url_array_and_count=series.get_image_url_array_and_count %}
 {% comment %}     <div id="single-dicom-viewer" class="dicom-viewer" data-images="{{ image_url_array_and_count.0 }}" data-annotations=''>
@@ -124,6 +125,7 @@ Associated case:
 
         {% endfor %}
     </details>
+
     {% if can_edit %}
         <details>
             <summary>Truncate series</summary>
@@ -133,7 +135,7 @@ Associated case:
             <div role="alert" class="alert alert-warning">
                 <strong>Warning:</strong> Please note: if you have reordered the series this may result in the incorrect images being deleted.
             </div>
-            
+
             Start <input id="lower-truncation-bound-input" type="number" value="1"> <button id="set-lower-truncation-bound-button">Set</button><br/>
             End <input  id="upper-truncation-bound-input"type="number" value="{{image_url_array_and_count.1}}"> <button id="set-upper-truncation-bound-button">Set</button><br/>
             <button id="truncate-test-button">Test truncate</button>
@@ -145,23 +147,29 @@ Associated case:
 {% endwith %}
 
 
-<div>Author: {{ series.get_author_display }}</div>
+
 {% if can_edit %}
     <details>
         <summary>Series info</summary>
-        <div>
+        <div class="d-flex flex-wrap gap-2 mb-2">
-            <a href="{% url 'atlas:series_anonymise_dicom' pk=series.pk %}"
+            <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">
-               title="Anonymise dicom images">Anonymise dicoms</a><br />
+                Anonymise dicoms
-            <a href="{% url 'atlas:series_order_dicom' pk=series.pk %}" title="orders dicom by slice location">Order dicoms
+            </button>
-                by slice location</a>
+            <button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_order_dicom' pk=series.pk %}'" title="orders dicom by slice location">
-            <a href="{% url 'atlas:series_order_dicom_instance' pk=series.pk %}"
+                Order by slice location
-               title="orders dicom by instance number">Order dicoms by instance number</a>
+            </button>
-            <a href="{% url 'atlas:series_order_dicom_SeriesInstanceUID' pk=series.pk %}"
+            <button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_order_dicom_instance' pk=series.pk %}'" title="orders dicom by instance number">
-               title="orders dicom by instance number">Order dicoms by SeriesInstanceUID</a>
+                Order by instance number
-            <a href="{% url 'atlas:series_order_upload_filename' pk=series.pk %}"
+            </button>
-               title="orders dicom by uploaded filename">Order by uploaded filename</a><br/>
+            <button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_order_dicom_SeriesInstanceUID' pk=series.pk %}'" title="orders dicom by SeriesInstanceUID">
-            <a href="{% url 'api-1:series_split_by_tag' series.pk 'ImageType' %}"
+                Order by SeriesInstanceUID
-               title="split series by dicom tag ImageType">Split the series by the ImageType dicom tag</a>
+            </button>
+            <button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_order_upload_filename' pk=series.pk %}'" title="orders dicom by uploaded filename">
+                Order by uploaded filename
+            </button>
+            <button type="button" class="btn btn-outline-warning btn-sm" onclick="window.location.href='{% url 'api-1:series_split_by_tag' series.pk 'ImageType' %}'" title="split series by dicom tag ImageType">
+                Split by ImageType tag
+            </button>
         </div>
         <details>
             <summary>
@@ -172,45 +180,44 @@ Associated case:
             >
                 {% for image in series.get_images %}
                     [{{  image.id  }}] <a href='{% url "atlas:series_image_dicom" image.pk %}'>{{image.image.url}}</a>, pos: {{image.position}}, {{image.upload_filename}}
-
-
                     {% if image.image %}
                         [{{image.get_file_size|filesizeformat}}]
                     {% endif %}
-
                     {{image.image_md5_hash}} ({{image.is_dicom}}) {{image.image_blake3_hash}}
-
                     <input type="checkbox" name="image-id" value="{{image.id}}">
-
                     <br />
-        {% comment %} {{image.get_dicom_info|safe}}<br /> {% endcomment %}
-
                 {% endfor %}
                 <button>Diff files</button>
             </form>
             <span id="temp"></span>
+
+            <span id="diff-controls">show <span id="diff-show-all" _="on click
+                                                                      log '1'
+                                                                      for row in .diff.rows
+                                                                      show row
+                                                                      end">all</span> <span id="diff-show-diff" _="
+                                                             on click
+                                                             log 'go'
+                                                             for row in <.diff tr/>
+                                                             log row.children[0].innerHTML
+                                                             if row.children[0].innerHTML is empty
+                                                             hide row
+                                                             end
+                                                             end
+                                                            ">diff</span></span>
+
         </details>
 
         <p>Total image size: {{series.get_total_image_size|filesizeformat}}</p>
-        <p><a href="{% url 'atlas:series_download' pk=series.pk %}">Download images</a></p>
+        <p>
+            <button type="button" class="btn btn-outline-success btn-sm" onclick="window.location.href='{% url 'atlas:series_download' pk=series.pk %}'">
+                Download images
+            </button>
+        </p>
     </details>
-    <span id="diff-controls">show <span id="diff-show-all" _="on click
-                                                              log '1'
-                                                              for row in .diff.rows
-                                                              show row
-                                                              end">all</span> <span id="diff-show-diff" _="
-                                                     on click
-                                                     log 'go'
-                                                     for row in <.diff tr/>
-                                                     log row.children[0].innerHTML
-                                                     if row.children[0].innerHTML is empty
-                                                     hide row
-                                                     end
-                                                     end
-                                                    ">diff</span></span>
-
 {% endif %}
 
+
 <div id="clone-findings-modal"
      class="modal modal-blur fade"
      style="display: none"
@@ -386,4 +393,78 @@ Associated case:
     #finding-form #hidden-form:focus-within {
         box-shadow: 0 0 24px #198754aa;
     }
+
+    #diff-show-all {
+        color: red;
+        cursor: pointer;
+    }
+    #diff-show-diff {
+        color: #0d6efd;
+        cursor: pointer;
+    }
+
+    details {
+        background: #23272b;
+        border-radius: 0.7em;
+        margin: 1.2em 0;
+        padding: 1.2em 1.5em 1em 1.5em;
+        box-shadow: 0 2px 12px rgba(0,0,0,0.10);
+        border: 1px solid #343a40;
+        transition: box-shadow 0.2s;
+    }
+    details[open] {
+        box-shadow: 0 4px 24px rgba(13,110,253,0.10);
+        border-color: #0d6efd;
+    }
+    details > summary {
+        font-size: 1.15em;
+        font-weight: 600;
+        color: #0d6efd;
+        cursor: pointer;
+        margin: -1.2em -1.5em 1em -1.5em;
+        padding: 1.2em 1.5em 0.5em 1.5em;
+        border-bottom: 1px solid #343a40;
+        background: linear-gradient(90deg, #23272b 80%, #0d6efd22 100%);
+        border-radius: 0.7em 0.7em 0 0;
+        transition: background 0.2s, font-size 0.2s;
+    }
+
+details:not([open]) {
+    padding-bottom: 0;
+    min-height: 0;
+}
+
+details:not([open]) > *:not(summary) {
+    display: none;
+}
+
+    details:not([open]) > summary {
+        padding: 0.7em 1.2em 0.3em 1.2em;
+    }
+    details > summary:hover {
+        background: linear-gradient(90deg, #23272b 60%, #0d6efd44 100%);
+        color: #198754;
+    }
+    details > div, details > p, details > form, details > ul {
+        margin-top: 0.7em;
+    }
+    .alert {
+        margin-top: 1em;
+    }
+    /* Nested details */
+    details details {
+        background: #181a1b;
+        border: 1px solid #444;
+        margin: 0.7em 0;
+        box-shadow: none;
+    }
+    details details > summary {
+        color: #ffc107;
+        background: linear-gradient(90deg, #181a1b 80%, #ffc10722 100%);
+        border-bottom: 1px solid #444;
+    }
+    details details > summary:hover {
+        color: #0d6efd;
+        background: linear-gradient(90deg, #181a1b 60%, #0d6efd22 100%);
+    }
 </style>