From 6c7a37ca4accf28e1cfdaf3b3c54e4eb627678a2 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 9 Mar 2026 12:06:24 +0000
Subject: [PATCH] Refactor series actions layout and enhance button styles for
 improved usability

---
 atlas/templates/atlas/case_display_block.html | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/atlas/templates/atlas/case_display_block.html b/atlas/templates/atlas/case_display_block.html
index 6a9fe876..f2567a90 100755
--- a/atlas/templates/atlas/case_display_block.html
+++ b/atlas/templates/atlas/case_display_block.html
@@ -354,20 +354,22 @@
                 {% partial case-series %}
             </div>
         </form>
-        <span>
-            <button type="button"
-                    class="btn btn-info"
-                    onclick="window.location.href='{% url 'atlas:user_uploads_case' case_id=case.pk %}'">
-                Import new uploads
-            </button><br />
+        <div class="d-flex flex-column flex-sm-row gap-2 align-items-start">
+            <div>
+                <button type="button"
+                        class="btn btn-outline-primary btn-sm"
+                        onclick="window.location.href='{% url 'atlas:user_uploads_case' case_id=case.pk %}'">
+                    Import new uploads
+                </button>
+            </div>
             <details class="series-actions" id="series-actions">
                 <summary>
-                    <button type="button" class="btn btn-primary" title="Click to manage series" onclick="this.closest('details').open = !this.closest('details').open;">
+                    <button type="button" class="btn btn-outline-secondary btn-sm" title="Click to manage series" onclick="this.closest('details').open = !this.closest('details').open;">
                         Manage Series
                     </button>
                 </summary>
                 <a href="{% url 'atlas:series_id_create' pk=case.pk %}">Create and add new series</a><br />
-                <button hx-get="{% url 'atlas:case_order_dicom' pk=case.pk %}"
+                <button class="btn btn-sm btn-outline-secondary mb-1" hx-get="{% url 'atlas:case_order_dicom' pk=case.pk %}"
                         title="order dicom by slice location"
                         hx-target="#series-action-results"
                         hx-swap="innerHTML"
@@ -375,7 +377,7 @@
                 >
                     Order dicoms by slice location
                 </button>
-                <button hx-post="{% url 'atlas:combine_series' %}"
+                <button class="btn btn-sm btn-outline-primary mb-1" hx-post="{% url 'atlas:combine_series' %}"
                         title="merge series"
                         hx-include="[name='series-ids']"
                         hx-target="#series-action-results"
@@ -384,7 +386,7 @@
                 >
                     Merge selected series
                 </button>
-                <button hx-post="{% url 'atlas:use_dates_as_descriptions' case.pk %}"
+                <button class="btn btn-sm btn-outline-secondary mb-1" hx-post="{% url 'atlas:use_dates_as_descriptions' case.pk %}"
                         title="merge series"
                         hx-include="[name='series-ids']"
                         hx-target="#series-action-results"
@@ -416,7 +418,7 @@
                 </div>
             </details>
 
-        </span>
+        </div>
     </div>
 
     <div class="container">
@@ -1151,6 +1153,20 @@
         padding: 8px;
         margin-top: 8px;
     }
+    .series-actions {
+        display: inline-block;
+        border: 1px solid rgba(0,0,0,0.06);
+        border-radius: .375rem;
+        padding: .5rem;
+        background: rgba(255,255,255,0.02);
+        margin-top: .5rem;
+    }
+    .series-actions summary { list-style: none; }
+    .series-actions summary::-webkit-details-marker { display:none; }
+    .series-actions .btn { vertical-align: middle; }
+    @media (prefers-color-scheme: dark) {
+        .series-actions { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.04); }
+    }
     .link-buttons {
         float: right;
     }