grid and list view for downloads template

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-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">
                 </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>

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)
 

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;
     }