andrew
76e5b32687
.field's margin-bottom (meant for vertically-stacked fields) pushed each field's box lower than the bare Filter button under align-items: flex-end, making the button look higher than the search/playlist/format boxes next to it. New .filter-bar class zeroes that margin instead of the previous ad-hoc inline flex styling.
87 lines
3.2 KiB
HTML
87 lines
3.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Library — alembic{% endblock %}
|
|
{% block content %}
|
|
<div class="page-header">
|
|
<div>
|
|
<h1>Library</h1>
|
|
<p class="subtitle muted">{{ total }} track{{ "s" if total != 1 else "" }}{% if grouping or format or q %} matching the filters below{% endif %}.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{% if request.query_params.get('deleted') %}
|
|
<div class="notice success">Track deleted.</div>
|
|
{% endif %}
|
|
|
|
<form method="get" action="/library" class="panel filter-bar">
|
|
<div class="field">
|
|
<label for="q">Search</label>
|
|
<input type="text" id="q" name="q" value="{{ q }}" placeholder="artist, title, album...">
|
|
</div>
|
|
<div class="field">
|
|
<label for="grouping">Playlist</label>
|
|
<select id="grouping" name="grouping">
|
|
<option value="">(any)</option>
|
|
{% for g in all_groupings %}
|
|
<option value="{{ g }}" {{ "selected" if g == grouping }}>{{ g }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="format">Format</label>
|
|
<select id="format" name="format">
|
|
<option value="">(any)</option>
|
|
{% for f in all_formats %}
|
|
<option value="{{ f }}" {{ "selected" if f == format }}>{{ f }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Filter</button>
|
|
{% if grouping or format or q %}<a class="btn btn-ghost" href="/library">Clear</a>{% endif %}
|
|
</form>
|
|
|
|
<div class="table-wrap scroll">
|
|
<table>
|
|
<thead>
|
|
<tr><th>Artist</th><th>Title</th><th>Album</th><th>Format</th><th></th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in items %}
|
|
<tr>
|
|
<td>{{ item.artist }}</td>
|
|
<td>{{ item.title }}</td>
|
|
<td class="muted">{{ item.albumartist }}</td>
|
|
<td><span class="badge badge-muted">{{ item.format }}</span></td>
|
|
<td class="actions-cell">
|
|
<a href="/library/track/{{ item.id }}" class="btn btn-sm btn-ghost">Edit</a>
|
|
<form method="post" action="/library/track/{{ item.id }}/delete" class="inline"
|
|
onsubmit="return confirm('Delete {{ item.artist }} — {{ item.title }}? This removes the file from disk permanently.')">
|
|
<button type="submit" class="btn btn-sm btn-danger">Delete</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr class="empty-row"><td colspan="5">
|
|
<div class="empty-state">
|
|
<span class="sparkle" style="position:relative; display:inline-block; margin-bottom:0.5rem;"></span>
|
|
<p class="muted" style="margin:0;">No tracks match{% if grouping or format or q %} these filters{% endif %}.</p>
|
|
</div>
|
|
</td></tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% if total_pages > 1 %}
|
|
{% set qs = "&grouping=" + grouping + "&format=" + format + "&q=" + q %}
|
|
<div class="pagination" style="display:flex; gap:0.5rem; align-items:center; margin-top:1rem;">
|
|
{% if page > 1 %}
|
|
<a class="btn btn-sm" href="/library?page={{ page - 1 }}{{ qs }}">← Prev</a>
|
|
{% endif %}
|
|
<span class="muted">Page {{ page }} of {{ total_pages }}</span>
|
|
{% if page < total_pages %}
|
|
<a class="btn btn-sm" href="/library?page={{ page + 1 }}{{ qs }}">Next →</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|