Add modality badge to series display for improved information visibility

This commit is contained in:
Ross
2026-03-02 11:20:52 +00:00
parent 7caaa425ed
commit a5a4084994
+25
View File
@@ -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;