From 840907a58601c105bb05cdfc23685f1818ac3b6d Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Mon, 14 Oct 2024 22:33:02 +0800
Subject: [PATCH 1/5] collapse comment by clicking on indent line
---
static/style.css | 13 +++++++++++++
templates/comment.html | 1 +
2 files changed, 14 insertions(+)
diff --git a/static/style.css b/static/style.css
index a9d893a..6565272 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1368,6 +1368,7 @@ a.search_subreddit:hover {
margin: 10px 0;
border-radius: 5px;
display: flex;
+ position: relative;
}
.comment img {
@@ -1459,6 +1460,18 @@ a.search_subreddit:hover {
flex: 0 1 auto;
}
+.comment_indent {
+ position: absolute; /* relative to .comment */
+ left: 15px;
+ width: 20px;
+ top: 45px;
+ height: calc(100% - 45px);
+}
+
+.comment:has(> .comment_right > .comment_data > .comment_indent:hover) > .comment_left * {
+ background: var(--highlighted);
+}
+
.comment_image {
max-width: 500px;
align-self: center;
diff --git a/templates/comment.html b/templates/comment.html
index 36c9b60..b46366c 100644
--- a/templates/comment.html
+++ b/templates/comment.html
@@ -34,6 +34,7 @@
{% endfor %}
{% endif %}
+
{% if is_filtered %}
(Filtered content)
From 0fdf57db4d699f7a67d2adc33f36a6493eb81843 Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Tue, 15 Oct 2024 02:49:35 +0800
Subject: [PATCH 2/5] only set size when comment is open
---
static/style.css | 24 ++++++++++++------------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/static/style.css b/static/style.css
index 6565272..9e89f52 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1438,6 +1438,18 @@ a.search_subreddit:hover {
min-width: 0;
}
+.comment_right[open] .comment_indent {
+ position: absolute; /* relative to .comment */
+ left: 15px;
+ width: 20px;
+ top: 45px;
+ height: calc(100% - 45px);
+}
+
+.comment:has(> .comment_right[open] > .comment_data > .comment_indent:hover) > .comment_left * {
+ background: var(--highlighted);
+}
+
.comment:has([id]) .comment_data > * {
margin-right: 5px;
}
@@ -1460,18 +1472,6 @@ a.search_subreddit:hover {
flex: 0 1 auto;
}
-.comment_indent {
- position: absolute; /* relative to .comment */
- left: 15px;
- width: 20px;
- top: 45px;
- height: calc(100% - 45px);
-}
-
-.comment:has(> .comment_right > .comment_data > .comment_indent:hover) > .comment_left * {
- background: var(--highlighted);
-}
-
.comment_image {
max-width: 500px;
align-self: center;
From e4e514875db1cc4ef602a92179822bb5cb578e56 Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Tue, 15 Oct 2024 19:27:15 +0800
Subject: [PATCH 3/5] position indent on mobile + fix offset for desktop
replies
---
static/style.css | 17 +++++++++++++++--
1 file changed, 15 insertions(+), 2 deletions(-)
diff --git a/static/style.css b/static/style.css
index 9e89f52..590c596 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1438,14 +1438,20 @@ a.search_subreddit:hover {
min-width: 0;
}
-.comment_right[open] .comment_indent {
+.comment_right[open] > .comment_data > .comment_indent {
position: absolute; /* relative to .comment */
- left: 15px;
width: 20px;
+ left: 15px;
top: 45px;
height: calc(100% - 45px);
}
+.replies > .comment > .comment_right[open] > .comment_data > .comment_indent {
+ left: 20px;
+ top: 50px;
+ height: calc(100% - 50px);
+}
+
.comment:has(> .comment_right[open] > .comment_data > .comment_indent:hover) > .comment_left * {
background: var(--highlighted);
}
@@ -2053,6 +2059,13 @@ th {
margin-top: -5px;
}
+ .comment_right[open] > .comment_data > .comment_indent {
+ width: 12px;
+ left: 0 !important;
+ top: 40px !important;
+ height: calc(100% - 40px) !important;
+ }
+
.line {
margin-left: 5px;
}
From 30e854b6635a2a60c6ca09a21f7dd2878d3813dc Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Tue, 15 Oct 2024 19:54:18 +0800
Subject: [PATCH 4/5] position relative to .comment_right
---
static/style.css | 21 ++++++++-------------
1 file changed, 8 insertions(+), 13 deletions(-)
diff --git a/static/style.css b/static/style.css
index 590c596..4dcfa5e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1368,7 +1368,6 @@ a.search_subreddit:hover {
margin: 10px 0;
border-radius: 5px;
display: flex;
- position: relative;
}
.comment img {
@@ -1436,22 +1435,17 @@ a.search_subreddit:hover {
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
+ position: relative;
}
.comment_right[open] > .comment_data > .comment_indent {
- position: absolute; /* relative to .comment */
+ position: absolute; /* relative to .comment_right */
width: 20px;
- left: 15px;
+ left: -35px;
top: 45px;
height: calc(100% - 45px);
}
-.replies > .comment > .comment_right[open] > .comment_data > .comment_indent {
- left: 20px;
- top: 50px;
- height: calc(100% - 50px);
-}
-
.comment:has(> .comment_right[open] > .comment_data > .comment_indent:hover) > .comment_left * {
background: var(--highlighted);
}
@@ -2060,10 +2054,11 @@ th {
}
.comment_right[open] > .comment_data > .comment_indent {
- width: 12px;
- left: 0 !important;
- top: 40px !important;
- height: calc(100% - 40px) !important;
+ /* relative to .comment_right */
+ width: 15px;
+ left: -29px;
+ top: 35px;
+ height: calc(100% - 35px);
}
.line {
From 3efda67731e9e9304220f4517ed68baafeaff2cf Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Wed, 16 Oct 2024 10:52:16 +0800
Subject: [PATCH 5/5] rename `.comment_indent` -> `.comment_collapse`
---
static/style.css | 6 +++---
templates/comment.html | 2 +-
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/static/style.css b/static/style.css
index 4dcfa5e..0266996 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1438,7 +1438,7 @@ a.search_subreddit:hover {
position: relative;
}
-.comment_right[open] > .comment_data > .comment_indent {
+.comment_right[open] > .comment_data > .comment_collapse {
position: absolute; /* relative to .comment_right */
width: 20px;
left: -35px;
@@ -1446,7 +1446,7 @@ a.search_subreddit:hover {
height: calc(100% - 45px);
}
-.comment:has(> .comment_right[open] > .comment_data > .comment_indent:hover) > .comment_left * {
+.comment:has(> .comment_right[open] > .comment_data > .comment_collapse:hover) > .comment_left * {
background: var(--highlighted);
}
@@ -2053,7 +2053,7 @@ th {
margin-top: -5px;
}
- .comment_right[open] > .comment_data > .comment_indent {
+ .comment_right[open] > .comment_data > .comment_collapse {
/* relative to .comment_right */
width: 15px;
left: -29px;
diff --git a/templates/comment.html b/templates/comment.html
index b46366c..ee86da8 100644
--- a/templates/comment.html
+++ b/templates/comment.html
@@ -34,7 +34,7 @@
{% endfor %}
{% endif %}
-
+
{% if is_filtered %}
(Filtered content)