mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-29 04:38:55 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fixes & adjustments to statuses in Status page

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/app.css
View file

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

22
src/pages/status.jsx
View file

@ -129,7 +129,11 @@ function StatusPage({ id }) {
accountID: s.account.id, accountID: s.account.id,
descendant: true, descendant: true,
thread: s.account.id === heroStatus.account.id, 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'} {replies.length === 1 ? 'y' : 'ies'}
</summary> </summary>
<ul> <ul>
{replies.map((replyID) => ( {replies.map((r) => (
<li key={replyID}> <li key={r.id}>
<Link <Link
class="status-link" class="status-link"
href={`#/s/${replyID}`} href={`#/s/${r.id}`}
onClick={onStatusLinkClick} 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> </Link>
</li> </li>
))} ))}