nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Make common followers appear elegantly

Browse source
This commit is contained in:
Lim Chee Aun 2023-04-20 19:54:01 +08:00
parent fbcc1f6e22
commit 236f5bc413
2 changed files with 43 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/account-info.css
View file

@ -200,12 +200,23 @@
} }
.account-container .common-followers { .account-container .common-followers {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.5s ease-in-out;
}
.account-container .common-followers[hidden] {
grid-template-rows: 0fr;
}
.account-container .common-followers > .common-followers-inner {
overflow: hidden;
}
.account-container .common-followers p {
font-size: 90%;
color: var(--text-insignificant-color);
border-top: 1px solid var(--outline-color); border-top: 1px solid var(--outline-color);
border-bottom: 1px solid var(--outline-color); border-bottom: 1px solid var(--outline-color);
padding: 8px 0; padding: 8px 0;
font-size: 90%; margin: 0;
line-height: 1.5;
color: var(--text-insignificant-color);
} }
.timeline-start .account-container { .timeline-start .account-container {

56
src/components/account-info.jsx
View file

@ -487,33 +487,35 @@ function RelatedActions({ info, instance, authenticated }) {
return ( return (
<> <>
{familiarFollowers?.length > 0 && ( <div class="common-followers" hidden={!familiarFollowers?.length}>
<p class="common-followers"> <div class="common-followers-inner">
Common followers{' '} <p>
<span class="ib"> Common followers{' '}
{familiarFollowers.map((follower) => ( <span class="ib">
<a {familiarFollowers.map((follower) => (
href={follower.url} <a
rel="noopener noreferrer" href={follower.url}
onClick={(e) => { rel="noopener noreferrer"
e.preventDefault(); onClick={(e) => {
states.showAccount = { e.preventDefault();
account: follower, states.showAccount = {
instance, account: follower,
}; instance,
}} };
> }}
<Avatar >
url={follower.avatarStatic} <Avatar
size="l" url={follower.avatarStatic}
alt={`${follower.displayName} @${follower.acct}`} size="l"
squircle={follower?.bot} alt={`${follower.displayName} @${follower.acct}`}
/> squircle={follower?.bot}
</a> />
))} </a>
</span> ))}
</p> </span>
)} </p>
</div>
</div>
<p class="actions"> <p class="actions">
{followedBy ? ( {followedBy ? (
<span class="tag">Following you</span> <span class="tag">Following you</span>