diff --git a/tubearchivist/home/config.json b/tubearchivist/home/config.json index 3aef457..6585c20 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 4ba6f7a..366b113 100644 --- a/tubearchivist/home/templates/home/channel.html +++ b/tubearchivist/home/templates/home/channel.html @@ -30,6 +30,10 @@ +
+ grid view + list view +

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 e03461d..fc0cc65 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 ab4c68a..084a571 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; }