From 0b0502e2467b82e0eccd66d85a267da1fbd0207e Mon Sep 17 00:00:00 2001
From: simon <simobilleter@gmail.com>
Date: Sat, 2 Oct 2021 18:37:22 +0700
Subject: [PATCH] grid and list view for downloads template

---
 .../home/templates/home/downloads.html        | 16 ++++----
 tubearchivist/home/views.py                   |  2 +
 tubearchivist/static/css/style.css            | 38 +++++++++++++++++--
 3 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/tubearchivist/home/templates/home/downloads.html b/tubearchivist/home/templates/home/downloads.html
index e05fe3ae..18d77eab 100644
--- a/tubearchivist/home/templates/home/downloads.html
+++ b/tubearchivist/home/templates/home/downloads.html
@@ -35,20 +35,24 @@
         <option value="pending">show download queue</option>
     </select>
 </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" %}
     <h2>Ignored from download</h2>
 {% else %}
     <h2>Download queue</h2>
 {% endif %}
-<div>
+<h3>Total videos: {{ max_hits }}</h3>
+<div class="dl-list {{ view_style }}">
     {% if all_video_hits %}
-        <h3>Total videos found: {{ max_hits }}</h3>
         {% for video in all_video_hits %}
-            <div class="dl-item" id="dl-{{ video.youtube_id }}">
-                <div class="dl-thumb">
+            <div class="dl-item {{ view_style }}" id="dl-{{ video.youtube_id }}">
+                <div class="dl-thumb {{ view_style }}">
                     <img src="{{ video.vid_thumb_url }}" alt="video_thumb">
                 </div>
-                <div class="dl-desc">
+                <div class="dl-desc {{ view_style }}">
                     {% if filter_view == "ignore" %}
                         <h3>Ignore: {{ video.title }}</h3>
                     {% else %}
@@ -70,8 +74,6 @@
                 </div>
             </div>
         {% endfor %}
-    {% else %}
-        <h3>No videos found</h3>
     {% endif %}
 </div>
 <script type="text/javascript" src="{% static 'progress.js' %}"></script>
diff --git a/tubearchivist/home/views.py b/tubearchivist/home/views.py
index 2c1194e9..e03461d3 100644
--- a/tubearchivist/home/views.py
+++ b/tubearchivist/home/views.py
@@ -146,6 +146,7 @@ class DownloadView(View):
         """handle get requests"""
         config = AppConfig().config
         colors = config["application"]["colors"]
+        view_style = config["default_view"]["downloads"]
         filter_view = RedisArchivist().get_message("filter_view")
 
         page_get = int(request.GET.get("page", 0))
@@ -173,6 +174,7 @@ class DownloadView(View):
             "title": "Downloads",
             "colors": colors,
             "filter_view": filter_view,
+            "view_style": view_style,
         }
         return render(request, "home/downloads.html", context)
 
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index 701878b8..ab4c68a8 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -475,30 +475,55 @@ button:hover {
     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;
     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-thumb {
+.dl-thumb.list {
     width: 25%;
 }
 
+.dl-thumb.grid {
+    width: 100%;
+}
+
 .dl-item img {
     width: 100%;
 }
 
-.dl-desc {
+.dl-desc.list {
     padding: 0 15px;
     width: 75%;
 }
 
+.dl-desc.grid {
+    padding: 15px;
+    width: 100%;
+}
+
 .dl-control-icons {
     display: flex;
     justify-content: center;
@@ -623,9 +648,13 @@ button:hover {
     .boxed-content {
         width: 90%;
     }
-    .video-list.grid {
+    .video-list.grid,
+    .dl-list.grid {
         grid-template-columns: 1fr 1fr;
     }
+    .dl-thumb.list {
+        width: 35%;
+    }
     .video-item.list {
         display: grid;
         grid-template-columns: 35% auto;
@@ -644,6 +673,7 @@ button:hover {
         word-wrap: anywhere;
     }
     .video-list.grid,
+    .dl-list.grid,
     .video-item.list {
         grid-template-columns: 1fr;
     }