diff --git a/tubearchivist/home/config.json b/tubearchivist/home/config.json
index 3aef457e..6585c20c 100644
--- a/tubearchivist/home/config.json
+++ b/tubearchivist/home/config.json
@@ -8,7 +8,7 @@
},
"default_view": {
"home": "grid",
- "channel": "grid",
+ "channel": "list",
"downloads": "list"
},
"subscriptions": {
diff --git a/tubearchivist/home/templates/home/channel.html b/tubearchivist/home/templates/home/channel.html
index 4ba6f7a3..366b113f 100644
--- a/tubearchivist/home/templates/home/channel.html
+++ b/tubearchivist/home/templates/home/channel.html
@@ -30,6 +30,10 @@
+
+
+
+
Total matching channels: {{ max_hits }}
Change show / hide subscribed only {{ show_subed_only }}
@@ -39,18 +43,18 @@
-
+
{% if channels %}
{% for channel in channels %}
-
+
{% if channel.source.channel_banner_url %}
-
+
{% endif %}
-
+
diff --git a/tubearchivist/home/views.py b/tubearchivist/home/views.py
index e03461d3..fc0cc653 100644
--- a/tubearchivist/home/views.py
+++ b/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"""
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index ab4c68a8..084a571d 100644
--- a/tubearchivist/static/css/style.css
+++ b/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;
}