grid and list view for home and channel id templates

tubearchivist/home/templates/home/channel_id.html

@@ -61,14 +61,18 @@
         </div>
     </div>
 {% endif %}
+<div class="view-icons">
+    <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
+    <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
+</div>
 <div id="player" class="video-player"></div>
 <h2>Videos</h2>
-<div class="video-list">
+<div class="video-list {{ view_style }}">
     {% if videos %}
         {% for video in videos %}
-            <div class="video-item">
+            <div class="video-item {{ view_style }}">
                 <a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/videos/{{ video.source.youtube_id }}.jpg" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)">
-                    <div class="video-thumb-wrap">
+                    <div class="video-thumb-wrap {{ view_style }}">
                         <div class="video-thumb">
                             <img src="/cache/videos/{{ video.source.youtube_id }}.jpg" alt="video-thumb">
                         </div>
@@ -77,7 +81,7 @@
                         </div>
                     </div>
                 </a>
-                <div class="video-desc">
+                <div class="video-desc {{ view_style }}">
                     <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
                         {% if video.source.player.watched %}
                             <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" class="seen-icon">

tubearchivist/home/templates/home/home.html

@@ -36,12 +36,12 @@
     <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
 </div>
 <div id="player" class="video-player"></div>
-<div class="video-list">
+<div class="video-list {{ view_style }}">
     {% if videos %}
         {% for video in videos %}
-            <div class="video-item">
+            <div class="video-item {{ view_style }}">
                 <a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/videos/{{ video.source.youtube_id }}.jpg" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)">
-                    <div class="video-thumb-wrap">
+                    <div class="video-thumb-wrap {{ view_style }}">
                         <div class="video-thumb">
                             <img src="/cache/videos/{{ video.source.youtube_id }}.jpg" alt="video-thumb">
                         </div>
@@ -50,7 +50,7 @@
                         </div>
                     </div>
                 </a>
-                <div class="video-desc">
+                <div class="video-desc {{ view_style }}">
                     <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
                         {% if video.source.player.watched %}
                             <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" class="seen-icon">

tubearchivist/home/views.py

@@ -223,9 +223,9 @@ class ChannelIdView(View):
 
     def get(self, request, channel_id_detail):
         """get method"""
-        es_url, colors = self.read_config()
+        es_url, colors, view_style = self.read_config()
         context = self.get_channel_videos(request, channel_id_detail, es_url)
-        context.update({"colors": colors})
+        context.update({"colors": colors, "view_style": view_style})
         return render(request, "home/channel_id.html", context)
 
     @staticmethod
@@ -234,7 +234,8 @@ class ChannelIdView(View):
         config = AppConfig().config
         es_url = config["application"]["es_url"]
         colors = config["application"]["colors"]
-        return es_url, colors
+        view_style = config["default_view"]["home"]
+        return es_url, colors, view_style
 
     def get_channel_videos(self, request, channel_id_detail, es_url):
         """get channel from video index"""

tubearchivist/static/css/style.css

@@ -274,16 +274,27 @@ button:hover {
 
 
 /* video list */
-.video-list {
+.video-list.grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-gap: 1rem;
 }
 
+.video-list.list {
+    display: grid;
+    grid-template-columns: unset;
+    grid-gap: 1rem;
+}
+
 .video-item {
     overflow: hidden;
 }
 
+.video-item.list {
+    display: grid;
+    grid-template-columns: 25% auto;
+}
+
 .video-thumb img {
     width: 100%;
 }
@@ -314,12 +325,25 @@ button:hover {
     padding: 8px;
 }
 
-.video-desc {
+.video-desc.grid {
     padding: 10px;
     height: 100%;
     background-color: var(--highlight-bg);
 }
 
+.video-desc.list {
+    padding: 10px;
+    height: unset;
+    background-color: var(--highlight-bg);
+    display: flex;
+    flex-wrap: wrap-reverse;
+    align-content: center;
+}
+
+.video-desc > div {
+    width: 100%;
+}
+
 .video-desc img {
     width: 20px;
     margin-right: 10px;
@@ -599,9 +623,13 @@ button:hover {
     .boxed-content {
         width: 90%;
     }
-    .video-list {
+    .video-list.grid {
         grid-template-columns: 1fr 1fr;
     }
+    .video-item.list {
+        display: grid;
+        grid-template-columns: 35% auto;
+    }
     .two-col {
         display: block;
     }
@@ -615,9 +643,15 @@ button:hover {
     * {
         word-wrap: anywhere;
     }
-    .video-list {
+    .video-list.grid,
+    .video-item.list {
         grid-template-columns: 1fr;
     }
+    .video-desc.grid {
+        height: unset;
+        display: flex;
+        flex-wrap: wrap-reverse;
+    }
     .boxed-content {
         width: 95%;
     }

tubearchivist/static/script.js

@@ -47,7 +47,6 @@ function changeView(image) {
     var sourcePage = image.getAttribute("data-origin");
     var newView = image.getAttribute("data-value");
     var payload = JSON.stringify({'change_view': sourcePage + ":" + newView});
-    console.log(payload);
     sendPost(payload);
     setTimeout(function(){
         location.reload();