Fixes & adjustments to statuses in Status page

This commit is contained in:
Lim Chee Aun 2022-12-24 01:11:11 +08:00
parent dd99d186bf
commit f8fac1294b
2 changed files with 29 additions and 11 deletions

View file

@ -164,14 +164,14 @@ a.mention span {
> .status-link
+ .replies
> summary {
margin-left: calc(50px + 16px + 16px);
margin-left: calc(50px + 16px + 12px);
}
.timeline.contextual
> li.descendant.thread
> .status-link
+ .replies
.status-link {
padding-left: calc(50px + 16px + 16px);
padding-left: calc(50px + 16px + 12px);
}
.timeline.contextual
> li.descendant:not(.thread)
@ -209,6 +209,9 @@ a.mention span {
padding-bottom: 12px;
font-size: 90%;
}
.timeline.contextual > li.thread > .status-link .replies-link {
margin-left: calc(50px + 16px + 12px);
}
.timeline.contextual > li .replies-link * {
vertical-align: middle;
}
@ -253,9 +256,9 @@ a.mention span {
.timeline.contextual > li .replies li {
position: relative;
}
.timeline.contextual > li .replies li .status {
.timeline.contextual > li .replies li {
--width: 3px;
--left: 0px;
--left: calc(40px + 16px);
--right: calc(var(--left) + var(--width));
background-image: linear-gradient(
to right,
@ -268,7 +271,10 @@ a.mention span {
);
background-repeat: no-repeat;
}
.timeline.contextual > li .replies li:last-child .status {
.timeline.contextual > li.thread .replies li {
--left: calc(50px + 16px + 12px);
}
.timeline.contextual > li .replies li:last-child {
background-size: 100% 20px;
}
.timeline.contextual > li .replies li:before {
@ -287,7 +293,7 @@ a.mention span {
transform: rotate(45deg);
}
.timeline.contextual > li.thread .replies li:before {
left: calc(50px + 16px + 16px);
left: calc(50px + 16px + 12px);
}
.timeline.contextual.loading > li:not(.hero) {
opacity: 0.5;

View file

@ -129,7 +129,11 @@ function StatusPage({ id }) {
accountID: s.account.id,
descendant: true,
thread: s.account.id === heroStatus.account.id,
replies: s.__replies?.map((r) => r.id),
replies: s.__replies?.map((r) => ({
id: r.id,
repliesCount: r.repliesCount,
content: r.content,
})),
})),
];
@ -380,14 +384,22 @@ function SubComments({
{replies.length === 1 ? 'y' : 'ies'}
</summary>
<ul>
{replies.map((replyID) => (
<li key={replyID}>
{replies.map((r) => (
<li key={r.id}>
<Link
class="status-link"
href={`#/s/${replyID}`}
href={`#/s/${r.id}`}
onClick={onStatusLinkClick}
>
<Status statusID={replyID} withinContext size="s" />
<Status statusID={r.id} withinContext size="s" />
{r.repliesCount > 0 && (
<div class="replies-link">
<Icon icon="comment" />{' '}
<span title={r.repliesCount}>
{shortenNumber(r.repliesCount)}
</span>
</div>
)}
</Link>
</li>
))}