mirror of
https://github.com/cheeaun/phanpy.git
synced 2025-01-23 09:06:23 +01:00
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:
parent
a088b48eb7
commit
66216e911e
2 changed files with 77 additions and 8 deletions
70
src/app.css
70
src/app.css
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue