tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-23 04:10:13 +00:00
Code Issues Projects Releases Wiki Activity

add basic playlists to template

Browse Source
This commit is contained in:
simon 2021-11-10 18:53:38 +07:00
parent bb73d531a4
commit 824ba35c14
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
2 changed files with 62 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
tubearchivist/home/templates/home/playlist.html
View File

@ -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 %}

45
tubearchivist/static/css/style.css
View File

@ -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 {