Refactor series list display for improved layout and styling
This commit is contained in:
@@ -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>
|
||||
|
|
||||
<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>
|
||||
|
|
||||
<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;
|
||||
|
||||
Reference in New Issue
Block a user