From 904c023bf10d571cc8ef3690094a986a8de26f45 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 2 Mar 2026 11:18:00 +0000
Subject: [PATCH] Refactor series list display for improved layout and styling

---
 atlas/templates/atlas/user_uploads.html | 67 ++++++++++++++++---------
 1 file changed, 43 insertions(+), 24 deletions(-)

diff --git a/atlas/templates/atlas/user_uploads.html b/atlas/templates/atlas/user_uploads.html
index bdf98029..d1fe13d5 100644
--- a/atlas/templates/atlas/user_uploads.html
+++ b/atlas/templates/atlas/user_uploads.html
@@ -28,22 +28,30 @@
                         </summary>
                         <ul class="study-series-list">
                             {% for series, n, tags, date in study.series %}
-                                <li>
-                                    <span _="on click toggle .selected on me.closest('li') then set i to the first <input/> in me then set i.checked to not i.checked">
-                                        <div class="series-meta">Uploaded: {{ date }} — Series: {{ series }} [{{ n }} images]</div>
-                                        <div class="series-tags">{{ tags }}</div>
+                                <li class="series-item">
+                                    <div _="on click toggle .selected on me.closest('li') then set i to the first <input/> in me then set i.checked to not i.checked" class="series-left">
                                         <input class="hidden" type="checkbox" name="selection" value="{{ series }}">
-                                    </span>
-                                    <span class="series-block-popup-link">
-                                        <a href="#" onclick="return window.create_popup_window('/atlas/uploads/series_id/{{series}}', 'Series')">Popup</a>
-                                        &nbsp;|&nbsp;
-                                        <a
-                                            hx-get="{% url 'atlas:series_tags_partial' series %}"
-                                            hx-target="#seriesTagsModal .modal-body"
-                                            hx-swap="innerHTML"
-                                        >View tags</a>
-                                    </span>
-                                    <div id="series-tags-{{ series }}" class="series-tags-placeholder mt-2"></div>
+                                        <h5 class="series-title">{{ tags.SeriesDescription|default:series }}</h5>
+                                        <div class="series-meta small text-muted">
+                                            <div>UID: <code class="series-uid">{{ series }}</code></div>
+                                            <div>Images: <span class="series-images">{{ n }}</span></div>
+                                            <div>Uploaded: <span class="series-date">{{ date }}</span></div>
+                                        </div>
+                                    </div>
+                                    <div class="series-right">
+                                        <span class="series-block-popup-link">
+                                            <a href="#" onclick="return window.create_popup_window('/atlas/uploads/series_id/{{series}}', 'Series')">Popup</a>
+                                            &nbsp;|&nbsp;
+                                            <a
+                                                hx-get="{% url 'atlas:series_tags_partial' series %}"
+                                                hx-target="#seriesTagsModal .modal-body"
+                                                hx-swap="innerHTML"
+                                            >View tags</a>
+                                        </span>
+                                    </div>
+                                    <div class="w-100 mt-2">
+                                        <div id="series-tags-{{ series }}" class="series-tags-placeholder"></div>
+                                    </div>
                                 </li>
                             {% endfor %}
                         </ul>
@@ -52,16 +60,21 @@
             {% else %}
                 <ul>
                     {% for series, n, tags, date in series_list %}
-                        <li>
-                            <span _="on click toggle .selected on me.closest('li') then set i to the first <input/> in me then set i.checked to not i.checked">
-                                Uploaded: {{date}}<br/>
-                                Series: {{series}} [{{n}} images] <br/>
-                                {{tags}}
+                        <li class="series-item">
+                            <div _="on click toggle .selected on me.closest('li') then set i to the first <input/> in me then set i.checked to not i.checked" class="series-left">
                                 <input class="hidden" type="checkbox" name="selection" value="{{ series }}">
-                            </span>
-                            <span class="series-block-popup-link">
-                                <a href="#" onclick="return window.create_popup_window('/atlas/uploads/series_id/{{series}}', 'Series')">Popup</a>
-                            </span>
+                                <h5 class="series-title">{{ tags.SeriesDescription|default:series }}</h5>
+                                <div class="series-meta small text-muted">
+                                    <div>UID: <code class="series-uid">{{ series }}</code></div>
+                                    <div>Images: <span class="series-images">{{ n }}</span></div>
+                                    <div>Uploaded: <span class="series-date">{{ date }}</span></div>
+                                </div>
+                            </div>
+                            <div class="series-right">
+                                <span class="series-block-popup-link">
+                                    <a href="#" onclick="return window.create_popup_window('/atlas/uploads/series_id/{{series}}', 'Series')">Popup</a>
+                                </span>
+                            </div>
                         </li>
                     {% endfor %}
                 </ul>
@@ -354,6 +367,12 @@
 
         .series-block-popup-link a { color: var(--muted); text-decoration: underline; }
 
+        .series-item { display: flex; gap: 12px; align-items: flex-start; }
+        .series-left { flex: 1; }
+        .series-right { margin-left: auto; text-align: right; }
+        .series-title { margin: 0 0 4px 0; font-size: 1rem; font-weight: 700; }
+        .series-meta div { line-height: 1.1; }
+
         /* Selected state */
         #series-list .selected {
             color: #fff;