From a5a40849945ca8916152d76eb9e872ac458ed4e3 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 2 Mar 2026 11:20:52 +0000
Subject: [PATCH] Add modality badge to series display for improved information
 visibility

---
 atlas/templates/atlas/user_uploads.html | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/atlas/templates/atlas/user_uploads.html b/atlas/templates/atlas/user_uploads.html
index 4f842c7d..d94a6cb9 100644
--- a/atlas/templates/atlas/user_uploads.html
+++ b/atlas/templates/atlas/user_uploads.html
@@ -34,11 +34,15 @@
                                         <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>Modality: <span class="series-modality">{{ tags.Modality }}</span></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">
+                                        {% if tags.Modality %}
+                                            <span class="modality-badge">{{ tags.Modality }}</span>
+                                        {% endif %}
                                         <span class="series-block-popup-link">
                                             <a href="#" onclick="return window.create_popup_window('/atlas/uploads/series_id/{{series}}', 'Series')">Popup</a>
                                             &nbsp;|&nbsp;
@@ -66,11 +70,15 @@
                                 <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>Modality: <span class="series-modality">{{ tags.Modality }}</span></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">
+                                {% if tags.Modality %}
+                                    <span class="modality-badge">{{ tags.Modality }}</span>
+                                {% endif %}
                                 <span class="series-block-popup-link">
                                     <a href="#" onclick="return window.create_popup_window('/atlas/uploads/series_id/{{series}}', 'Series')">Popup</a>
                                 </span>
@@ -383,6 +391,7 @@
             border-radius: 8px;
             background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
             transition: box-shadow 120ms ease, transform 120ms ease;
+            position: relative;
         }
 
         .series-item:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.4); transform: translateY(-2px); }
@@ -401,6 +410,22 @@
             .series-right { text-align: left; }
         }
 
+        /* Modality badge styling (top-right of card) */
+        .modality-badge {
+            position: absolute;
+            top: 10px;
+            right: 12px;
+            display: inline-block;
+            background: rgba(255,255,255,0.06);
+            color: #e6eef6;
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.375rem;
+            font-size: 0.75rem;
+            font-weight: 700;
+            border: 1px solid rgba(255,255,255,0.03);
+            backdrop-filter: blur(2px);
+        }
+
         /* Selected state */
         #series-list .selected {
             color: #fff;