grid and list view for channels overview page

tubearchivist/home/config.json

@@ -8,7 +8,7 @@
     },
     "default_view": {
         "home": "grid",
-        "channel": "grid",
+        "channel": "list",
         "downloads": "list"
     },
     "subscriptions": {

tubearchivist/home/templates/home/channel.html

@@ -30,6 +30,10 @@
         </form>
     </div>
 </div>
+<div class="view-icons">
+    <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="grid" alt="grid view">
+    <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="list" alt="list view">
+</div>
 <div class="padding-box">
     <h2>Total matching channels: {{ max_hits }}</h2>
     <span>Change show / hide subscribed only </span><span class="settings-current">{{ show_subed_only }}</span>
@@ -39,18 +43,18 @@
         <option value="1">show subscribed channels only</option>
     </select>
 </div>
-<div>
+<div class="channel-list {{ view_style }}">
     {% if channels %}
         {% for channel in channels %}
-        <div class="channel-item">
+        <div class="channel-item {{ view_style }}">
             {% if channel.source.channel_banner_url %}
-                <div class="channel-banner">
+                <div class="channel-banner {{ view_style }}">
                     <a href="{% url 'channel_id' channel.source.channel_id %}">
                         <img src="/cache/channels/{{ channel.source.channel_id }}_banner.jpg" alt="{{ channel.source.channel_id }}-banner">
                     </a>
                 </div>
             {% endif %}
-            <div class="info-box info-box-2">
+            <div class="info-box info-box-2 {{ view_style }}">
                 <div class="info-box-item">
                     <div class="round-img">
                         <a href="{% url 'channel_id' channel.source.channel_id %}">

tubearchivist/home/views.py

@@ -310,7 +310,7 @@ class ChannelView(View):
 
     def get(self, request):
         """handle http get requests"""
-        es_url, colors = self.read_config()
+        es_url, colors, view_style = self.read_config()
         page_get = int(request.GET.get("page", 0))
         pagination_handler = Pagination(page_get)
         page_size = pagination_handler.pagination["page_size"]
@@ -337,6 +337,7 @@ class ChannelView(View):
             "show_subed_only": show_subed_only,
             "title": "Channels",
             "colors": colors,
+            "view_style": view_style,
         }
         return render(request, "home/channel.html", context)
 
@@ -346,7 +347,8 @@ class ChannelView(View):
         config = AppConfig().config
         es_url = config["application"]["es_url"]
         colors = config["application"]["colors"]
-        return es_url, colors
+        view_style = config["default_view"]["channel"]
+        return es_url, colors, view_style
 
     def post(self, request):
         """handle http post requests"""

tubearchivist/static/css/style.css

@@ -454,14 +454,37 @@ button:hover {
 }
 
 /* channel overview page */
-.channel-item {
+.channel-list.list {
+    display: block;
+}
+
+.channel-list.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 1rem;
+}
+
+.channel-item.list {
     padding: 20px 0;
 }
 
-.channel-banner img {
+.channel-item.grid > .info-box {
+    display: block;
+}
+
+.channel-banner.grid {
+    overflow: hidden;
+}
+
+.channel-banner.list img {
     width: 100%;
 }
 
+.channel-banner.grid img {
+    width: 250%;
+    transform: translateX(-30%);
+}
+
 
 /* download page */
 .icon-text {
@@ -649,7 +672,8 @@ button:hover {
         width: 90%;
     }
     .video-list.grid,
-    .dl-list.grid {
+    .dl-list.grid,
+    .channel-list.grid {
         grid-template-columns: 1fr 1fr;
     }
     .dl-thumb.list {
@@ -674,6 +698,7 @@ button:hover {
     }
     .video-list.grid,
     .dl-list.grid,
+    .channel-list.grid,
     .video-item.list {
         grid-template-columns: 1fr;
     }