ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor series list display for improved layout and styling

Browse Source
This commit is contained in:
Ross
2026-03-02 11:18:00 +00:00
parent e2e0e374e6
commit 904c023bf1
1 changed files with 43 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/user_uploads.html
+31 -12
View File
@@ -28,12 +28,17 @@
</summary> </summary>
<ul class="study-series-list"> <ul class="study-series-list">
{% for series, n, tags, date in study.series %} {% for series, n, tags, date in study.series %}
<li> <li class="series-item">
<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 _="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">
<div class="series-meta">Uploaded: {{ date }} — Series: {{ series }} [{{ n }} images]</div>
<div class="series-tags">{{ tags }}</div>
<input class="hidden" type="checkbox" name="selection" value="{{ series }}"> <input class="hidden" type="checkbox" name="selection" value="{{ series }}">
</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"> <span class="series-block-popup-link">
<a href="#" onclick="return window.create_popup_window('/atlas/uploads/series_id/{{series}}', 'Series')">Popup</a> <a href="#" onclick="return window.create_popup_window('/atlas/uploads/series_id/{{series}}', 'Series')">Popup</a>
&nbsp;|&nbsp; &nbsp;|&nbsp;
@@ -43,7 +48,10 @@
hx-swap="innerHTML" hx-swap="innerHTML"
>View tags</a> >View tags</a>
</span> </span>
<div id="series-tags-{{ series }}" class="series-tags-placeholder mt-2"></div> </div>
<div class="w-100 mt-2">
<div id="series-tags-{{ series }}" class="series-tags-placeholder"></div>
</div>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
@@ -52,16 +60,21 @@
{% else %} {% else %}
<ul> <ul>
{% for series, n, tags, date in series_list %} {% for series, n, tags, date in series_list %}
<li> <li class="series-item">
<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 _="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">
Uploaded: {{date}}<br/>
Series: {{series}} [{{n}} images] <br/>
{{tags}}
<input class="hidden" type="checkbox" name="selection" value="{{ series }}"> <input class="hidden" type="checkbox" name="selection" value="{{ series }}">
</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"> <span class="series-block-popup-link">
<a href="#" onclick="return window.create_popup_window('/atlas/uploads/series_id/{{series}}', 'Series')">Popup</a> <a href="#" onclick="return window.create_popup_window('/atlas/uploads/series_id/{{series}}', 'Series')">Popup</a>
</span> </span>
</div>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
@@ -354,6 +367,12 @@
.series-block-popup-link a { color: var(--muted); text-decoration: underline; } .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 */ /* Selected state */
#series-list .selected { #series-list .selected {
color: #fff; color: #fff;