mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-14 12:18:30 +03:00
Code Issues Projects Releases Packages 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 {
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-bottom: 1px solid var(--outline-color);
padding: 8px 0;
font-size: 90%;
line-height: 1.5;
color: var(--text-insignificant-color);
margin: 0;
}
.timeline-start .account-container {

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

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