Refactor series list display for improved layout and styling

This commit is contained in:
Ross
2026-03-02 11:18:00 +00:00
parent e2e0e374e6
commit 904c023bf1
+43 -24
View File
@@ -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;