tubearchivist
/
tubearchivist
mirror of https://github.com/tubearchivist/tubearchivist.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

use grid_items for videos on download page

This commit is contained in:
simon 2022-09-13 16:47:31 +07:00
parent 265a53ace3
commit 2b8ec1f8cf
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
2 changed files with 55 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,38 +41,56 @@
</div>
</div>
<div class="view-icons">
{% if view_style == "grid" %}
<div class="grid-count">
{% if grid_items < 7 %}
<img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
{% endif %}
{% if grid_items > 3 %}
<img src="{% static 'img/icon-substract.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"-1"}}" alt="grid minus row">
{% endif %}
</div>
{% endif %}
<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>
</div>
<h3>Total videos: {{ max_hits }}{% if max_hits == 10000 %}+{% endif %}</h3>
<div class="dl-list {{ view_style }}">
</div>
<div class="boxed-content {% if view_style == "grid" %}boxed-{{ grid_items }}{% endif %}">
<div class="video-list {{ view_style }} {% if view_style == "grid" %}grid-{{ grid_items }}{% endif %}">
{% if results %}
{% for video in results %}
<div class="dl-item {{ view_style }}" id="dl-{{ video.source.youtube_id }}">
<div class="dl-thumb {{ view_style }}">
<img src="/cache/{{ video.source.vid_thumb_url }}" alt="video_thumb">
{% if show_ignored_only %}
<span>ignored</span>
{% else %}
<span>queued</span>
{% endif %}
<div class="video-item {{ view_style }}" id="dl-{{ video.source.youtube_id }}">
<div class="video-thumb-wrap {{ view_style }}">
<div class="video-thumb">
<img src="/cache/{{ video.source.vid_thumb_url }}" alt="video_thumb">
{% if show_ignored_only %}
<span>ignored</span>
{% else %}
<span>queued</span>
{% endif %}
</div>
</div>
<div class="dl-desc {{ view_style }}">
<h3>{{ video.source.title }}</h3>
{% if video.source.channel_indexed %}
<div class="video-desc {{ view_style }}">
<div>
{% if video.source.channel_indexed %}
<a href="{% url 'channel_id' video.source.channel_id %}">{{ video.source.channel_name }}</a>
{% else %}
<span>{{ video.source.channel_name }}</span>
{% endif %}
{% else %}
<span>{{ video.source.channel_name }}</span>
{% endif %}
<h3>{{ video.source.title }}</h3>
</div>
<p>Published: {{ video.source.published }} | Duration: {{ video.source.duration }} | {{ video.source.youtube_id }}</p>
{% if show_ignored_only %}
<button data-id="{{ video.source.youtube_id }}" onclick="forgetIgnore(this)">Forget</button>
<button data-id="{{ video.source.youtube_id }}" onclick="addSingle(this)">Add to queue</button>
{% else %}
<button data-id="{{ video.source.youtube_id }}" onclick="toIgnore(this)">Ignore</button>
<button id="{{ video.source.youtube_id }}" data-id="{{ video.source.youtube_id }}" onclick="downloadNow(this)">Download now</button>
{% endif %}
<div>
{% if show_ignored_only %}
<button data-id="{{ video.source.youtube_id }}" onclick="forgetIgnore(this)">Forget</button>
<button data-id="{{ video.source.youtube_id }}" onclick="addSingle(this)">Add to queue</button>
{% else %}
<button data-id="{{ video.source.youtube_id }}" onclick="toIgnore(this)">Ignore</button>
<button id="{{ video.source.youtube_id }}" data-id="{{ video.source.youtube_id }}" onclick="downloadNow(this)">Download now</button>
{% endif %}
</div>
</div>
</div>
{% endfor %}

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

@ -456,6 +456,10 @@ video:-webkit-full-screen {
overflow: hidden;
}
.video-item:hover .video-thumb span {
opacity: 1;
}
.video-item.list {
display: grid;
grid-template-columns: 26% auto;
@ -476,6 +480,16 @@ video:-webkit-full-screen {
position: relative;
}
.video-thumb span {
position: absolute;
top: 5px;
left: 5px;
background-color: var(--accent-font-light);
padding: 5px;
opacity: 0;
transition: 300ms ease-in-out;
}
.video-play img {
width: 40px;
filter: var(--img-filter);
@ -512,7 +526,7 @@ video:-webkit-full-screen {
padding: 10px;
height: 100%;
display: flex;
flex-wrap: wrap-reverse;
flex-wrap: wrap;
align-content: center;
}
@ -907,73 +921,6 @@ video:-webkit-full-screen {
cursor: pointer;
}
.dl-list.list {
display: block;
}
.dl-list.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
}
.dl-item.list {
display: flex;
margin: 15px 0;
align-items: center;
background-color: var(--highlight-bg);
}
.dl-item.grid {
display: flex;
flex-wrap: wrap;
background-color: var(--highlight-bg);
}
.dl-check {
width: 30px;
}
.dl-item:hover > .dl-thumb span {
opacity: 1;
}
.dl-thumb {
position: relative;
}
.dl-thumb span {
position: absolute;
top: 5px;
left: 5px;
background-color: var(--accent-font-light);
padding: 5px;
opacity: 0;
transition: 300ms ease-in-out;
}
.dl-thumb.list {
width: 25%;
}
.dl-thumb.grid {
width: 100%;
}
.dl-item img {
width: 100%;
}
.dl-desc.list {
padding: 0 15px;
width: 75%;
}
.dl-desc.grid {
padding: 15px;
width: 100%;
}
.dl-control-icons {
display: flex;
justify-content: center;
@ -1131,14 +1078,10 @@ video:-webkit-full-screen {
.video-list.grid.grid-5,
.video-list.grid.grid-6,
.video-list.grid.grid-7,
.dl-list.grid,
.channel-list.grid,
.playlist-list.grid {
grid-template-columns: 1fr 1fr;
}
.dl-thumb.list {
width: 35%;
}
.video-item.list,
.playlist-item.list {
display: grid;
@ -1182,7 +1125,6 @@ video:-webkit-full-screen {
.video-list.grid.grid-5,
.video-list.grid.grid-6,
.video-list.grid.grid-7,
.dl-list.grid,
.channel-list.grid,
.video-item.list,
.playlist-list.list,
@ -1231,15 +1173,6 @@ video:-webkit-full-screen {
.description-box {
display: block;
}
.dl-item {
display: block;
}
.dl-thumb {
width: 100%;
}
.dl-desc {
padding: 15px;
}
.backup-grid-row {
display: flex;
flex-wrap: wrap;