+
+
-
+
{% if filter_view == "ignore" %}
Ignore: {{ video.title }}
{% else %}
@@ -70,8 +74,6 @@
{% endfor %}
- {% else %}
-
No videos found
{% endif %}
diff --git a/tubearchivist/home/views.py b/tubearchivist/home/views.py
index 2c1194e..e03461d 100644
--- a/tubearchivist/home/views.py
+++ b/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)
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index 701878b..ab4c68a 100644
--- a/tubearchivist/static/css/style.css
+++ b/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;
}