tubearchivist/tubearchivist
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist.git synced 2024-12-22 18:00:13 +00:00
Code Issues Projects Releases Wiki Activity

grid and list view for downloads template

Browse Source
This commit is contained in:
simon 2021-10-02 18:37:22 +07:00
parent 99781290db
commit 0b0502e246
3 changed files with 45 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
tubearchivist/home/templates/home/downloads.html
View File

@ -35,20 +35,24 @@
<option value="pending">show download queue</option> <option value="pending">show download queue</option>
</select> </select>
</div> </div>
<div class="view-icons">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view">
</div>
{% if filter_view == "ignore" %} {% if filter_view == "ignore" %}
<h2>Ignored from download</h2> <h2>Ignored from download</h2>
{% else %} {% else %}
<h2>Download queue</h2> <h2>Download queue</h2>
{% endif %} {% endif %}
<div> <h3>Total videos: {{ max_hits }}</h3>
<div class="dl-list {{ view_style }}">
{% if all_video_hits %} {% if all_video_hits %}
<h3>Total videos found: {{ max_hits }}</h3>
{% for video in all_video_hits %} {% for video in all_video_hits %}
<div class="dl-item" id="dl-{{ video.youtube_id }}"> <div class="dl-item {{ view_style }}" id="dl-{{ video.youtube_id }}">
<div class="dl-thumb"> <div class="dl-thumb {{ view_style }}">
<img src="{{ video.vid_thumb_url }}" alt="video_thumb"> <img src="{{ video.vid_thumb_url }}" alt="video_thumb">
</div> </div>
<div class="dl-desc"> <div class="dl-desc {{ view_style }}">
{% if filter_view == "ignore" %} {% if filter_view == "ignore" %}
<h3>Ignore: {{ video.title }}</h3> <h3>Ignore: {{ video.title }}</h3>
{% else %} {% else %}
@ -70,8 +74,6 @@
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
{% else %}
<h3>No videos found</h3>
{% endif %} {% endif %}
</div> </div>
<script type="text/javascript" src="{% static 'progress.js' %}"></script> <script type="text/javascript" src="{% static 'progress.js' %}"></script>

2
tubearchivist/home/views.py
View File

@ -146,6 +146,7 @@ class DownloadView(View):
"""handle get requests""" """handle get requests"""
config = AppConfig().config config = AppConfig().config
colors = config["application"]["colors"] colors = config["application"]["colors"]
view_style = config["default_view"]["downloads"]
filter_view = RedisArchivist().get_message("filter_view") filter_view = RedisArchivist().get_message("filter_view")
page_get = int(request.GET.get("page", 0)) page_get = int(request.GET.get("page", 0))
@ -173,6 +174,7 @@ class DownloadView(View):
"title": "Downloads", "title": "Downloads",
"colors": colors, "colors": colors,
"filter_view": filter_view, "filter_view": filter_view,
"view_style": view_style,
} }
return render(request, "home/downloads.html", context) return render(request, "home/downloads.html", context)

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

@ -475,30 +475,55 @@ button:hover {
cursor: pointer; cursor: pointer;
} }
.dl-item { .dl-list.list {
display: block;
}
.dl-list.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
}
.dl-item.list {
display: flex; display: flex;
margin: 15px 0; margin: 15px 0;
align-items: center; align-items: center;
background-color: var(--highlight-bg); background-color: var(--highlight-bg);
} }
.dl-item.grid {
display: flex;
flex-wrap: wrap;
background-color: var(--highlight-bg);
}
.dl-check { .dl-check {
width: 30px; width: 30px;
} }
.dl-thumb { .dl-thumb.list {
width: 25%; width: 25%;
} }
.dl-thumb.grid {
width: 100%;
}
.dl-item img { .dl-item img {
width: 100%; width: 100%;
} }
.dl-desc { .dl-desc.list {
padding: 0 15px; padding: 0 15px;
width: 75%; width: 75%;
} }
.dl-desc.grid {
padding: 15px;
width: 100%;
}
.dl-control-icons { .dl-control-icons {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -623,9 +648,13 @@ button:hover {
.boxed-content { .boxed-content {
width: 90%; width: 90%;
} }
.video-list.grid { .video-list.grid,
.dl-list.grid {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.dl-thumb.list {
width: 35%;
}
.video-item.list { .video-item.list {
display: grid; display: grid;
grid-template-columns: 35% auto; grid-template-columns: 35% auto;
@ -644,6 +673,7 @@ button:hover {
word-wrap: anywhere; word-wrap: anywhere;
} }
.video-list.grid, .video-list.grid,
.dl-list.grid,
.video-item.list { .video-item.list {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }