From 2b8ec1f8cf95e4258a051afc6a9c1e57e980919a Mon Sep 17 00:00:00 2001
From: simon <simobilleter@gmail.com>
Date: Tue, 13 Sep 2022 16:47:31 +0700
Subject: [PATCH] use grid_items for videos on download page

---
 .../home/templates/home/downloads.html        | 62 +++++++-----
 tubearchivist/static/css/style.css            | 97 +++----------------
 2 files changed, 55 insertions(+), 104 deletions(-)

diff --git a/tubearchivist/home/templates/home/downloads.html b/tubearchivist/home/templates/home/downloads.html
index 3ca469ee..b3a3a706 100644
--- a/tubearchivist/home/templates/home/downloads.html
+++ b/tubearchivist/home/templates/home/downloads.html
@@ -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 %}
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index cb54d71e..e4f90472 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -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;