mirror of
https://github.com/tubearchivist/tubearchivist-frontend.git
synced 2024-11-04 19:30:13 +00:00
add basic playlists to template
This commit is contained in:
parent
bb73d531a4
commit
824ba35c14
@ -52,4 +52,21 @@
|
|||||||
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="playlist" data-value="list" alt="list view">
|
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="playlist" data-value="list" alt="list view">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="playlist-list {{ view_style }}">
|
||||||
|
{% if playlists %}
|
||||||
|
{% for playlist in playlists %}
|
||||||
|
<div class="playlist-item {{ view_style }}">
|
||||||
|
<div class="playlist-thumbnail">
|
||||||
|
<img src="/cache/playlists/{{ playlist.source.playlist_id }}.jpg" alt="{{ playlist.source.playlist_id }}-thumbnail">
|
||||||
|
</div>
|
||||||
|
<div class="playlist-desc {{ view_style }}">
|
||||||
|
<h3>{{ playlist.source.playlist_channel }}</h3>
|
||||||
|
<h2>{{ playlist.source.playlist_name }}</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
{% else %}
|
||||||
|
<h2>No playlists found...</h2>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
{% endblock content %}
|
{% endblock content %}
|
@ -646,6 +646,50 @@ button:hover {
|
|||||||
transform: translateX(-30%);
|
transform: translateX(-30%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* playlist overview page */
|
||||||
|
.playlist-list.list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: unset;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-list.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-item {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-item.list {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-thumbnail img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-desc.grid {
|
||||||
|
padding: 10px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--highlight-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-desc.list {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
height: unset;
|
||||||
|
background-color: var(--highlight-bg);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap-reverse;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-desc.list > * {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
/* download page */
|
/* download page */
|
||||||
.icon-text {
|
.icon-text {
|
||||||
@ -751,6 +795,7 @@ button:hover {
|
|||||||
background-color: var(--highlight-bg);
|
background-color: var(--highlight-bg);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 30px 0 15px 0;
|
padding: 30px 0 15px 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-progress.info {
|
.download-progress.info {
|
||||||
|
Loading…
Reference in New Issue
Block a user