At this point, might as well support level 4

Also still need to show the comment icon IF THERE'S LEVEL 5++
This commit is contained in:
Lim Chee Aun 2023-01-29 01:29:26 +08:00
parent a088b48eb7
commit 66216e911e
2 changed files with 77 additions and 8 deletions

View file

@ -208,6 +208,18 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
var(--line-margin-end)
);
}
.timeline.contextual
> li.descendant.thread
> .status-link
+ .replies
.replies
.replies
> summary {
margin-left: calc(
var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
(var(--line-margin-end) * 2)
);
}
.timeline.contextual
> li.descendant.thread
> .status-link
@ -228,6 +240,18 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
var(--line-margin-end)
);
}
.timeline.contextual
> li.descendant.thread
> .status-link
+ .replies
.replies
.replies
.status-link {
padding-left: calc(
var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
(var(--line-margin-end) * 2)
);
}
.timeline.contextual
> li.descendant:not(.thread)
> .status-link
@ -245,6 +269,17 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
var(--thread-start) + var(--line-margin-end) + var(--line-margin-end)
);
}
.timeline.contextual
> li.descendant:not(.thread)
> .status-link
+ .replies
.replies
.replies
> summary {
margin-left: calc(
var(--thread-start) + var(--line-margin-end) + (var(--line-margin-end) * 2)
);
}
.timeline.contextual
> li.descendant:not(.thread)
> .status-link
@ -258,7 +293,16 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
+ .replies
.replies
.status-link {
--line-margin-end: 32px;
padding-left: calc(var(--thread-start) + (var(--line-margin-end) * 2));
}
.timeline.contextual
> li.descendant:not(.thread)
> .status-link
+ .replies
.replies
.replies
.status-link {
padding-left: calc(var(--thread-start) + (var(--line-margin-end) * 3));
}
.timeline.contextual > li.descendant:not(.thread):before {
content: '';
@ -351,9 +395,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
background-repeat: no-repeat;
}
.timeline.contextual > li .replies .replies li {
--line-start: calc(
var(--thread-start) + var(--line-margin-end) + var(--line-margin-end)
);
--line-start: calc(var(--thread-start) + (var(--line-margin-end) * 2));
}
.timeline.contextual > li .replies .replies .replies li {
--line-start: calc(var(--thread-start) + (var(--line-margin-end) * 3));
}
.timeline.contextual > li.thread .replies li {
--line-start: calc(
@ -366,6 +411,12 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
var(--line-margin-end)
);
}
.timeline.contextual > li.thread .replies .replies .replies li {
--line-start: calc(
var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
(var(--line-margin-end) * 2)
);
}
.timeline.contextual > li .replies li:last-child {
background-size: 100% 20px;
}
@ -387,6 +438,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
var(--thread-start) + var(--line-margin-end) + var(--line-margin-end)
);
}
.timeline.contextual > li .replies .replies .replies li:before {
--line-start: calc(
var(--thread-start) + var(--line-margin-end) + (var(--line-margin-end) * 2)
);
}
.timeline.contextual > li.thread .replies li:before {
--line-start: calc(
var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
@ -398,6 +454,12 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
var(--line-margin-end)
);
}
.timeline.contextual > li.thread .replies .replies .replies li:before {
--line-start: calc(
var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
(var(--line-margin-end) * 2)
);
}
.timeline.contextual.loading > li:not(.hero) {
/* opacity: 0.5; */
pointer-events: none;

View file

@ -144,8 +144,8 @@ function StatusPage() {
}
parent.__replies.push(status);
} else {
// If no parent, it's probably a reply to a reply to a reply, level 3
console.warn('[LEVEL 3] No parent found for', status);
// If no parent, something is wrong
console.warn('No parent found for', status);
}
}
});
@ -175,6 +175,13 @@ function StatusPage() {
account: r2.account,
repliesCount: r2.repliesCount,
content: r2.content,
replies: r2.__replies?.map((r3) => ({
// Level 4
id: r3.id,
account: r3.account,
repliesCount: r3.repliesCount,
content: r3.content,
})),
})),
})),
})),
@ -703,14 +710,14 @@ function SubComments({ hasManyStatuses, replies }) {
}}
>
<Status statusID={r.id} withinContext size="s" />
{/* {r.repliesCount > 0 && (
{!r.replies?.length && r.repliesCount > 0 && (
<div class="replies-link">
<Icon icon="comment" />{' '}
<span title={r.repliesCount}>
{shortenNumber(r.repliesCount)}
</span>
</div>
)} */}
)}
</Link>
{r.replies?.length && (
<SubComments