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

Convert posting stats box into a link to account page

Browse source
This commit is contained in:
Lim Chee Aun 2023-09-16 14:48:31 +08:00
parent 908efb17ff
commit 941d2efeb1
2 changed files with 53 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -196,6 +196,8 @@
.account-container .account-metadata-box {
overflow: hidden;
border-radius: 16px;
display: block;
text-decoration: none;
& > * {
margin-bottom: 2px;
@ -308,6 +310,10 @@
--size: 8px;
--original-color: var(--link-color);
&:is(:hover, :focus-within) {
background-color: var(--link-bg-hover-color);
}
.posting-stats-bar {
height: var(--size);
border-radius: var(--size);

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

@ -648,58 +648,63 @@ function RelatedActions({ info, instance, authenticated, standalone }) {
const [showAddRemoveLists, setShowAddRemoveLists] = useState(false);
const hasPostingStats = postingStats?.total >= 3;
const accountLink = instance ? `/${instance}/a/${id}` : `/a/${id}`;
return (
<>
{hasPostingStats && (
<div class="account-metadata-box">
{hasPostingStats && (
<div class="shazam-container">
<div class="shazam-container-inner">
<div class="posting-stats">
<div>
{postingStats.daysSinceLastPost < 365
? `Last ${postingStats.total} posts in the past
<Link
to={accountLink}
class="account-metadata-box"
onClick={() => {
states.showAccount = false;
}}
>
<div class="shazam-container">
<div class="shazam-container-inner">
<div class="posting-stats">
<div>
{postingStats.daysSinceLastPost < 365
? `Last ${postingStats.total} posts in the past
${postingStats.daysSinceLastPost} day${
postingStats.daysSinceLastPost > 1 ? 's' : ''
}`
: `
postingStats.daysSinceLastPost > 1 ? 's' : ''
}`
: `
Last ${postingStats.total} posts in the past year(s)
`}
</div>
<div
class="posting-stats-bar"
style={{
// [originals | replies | boosts]
'--originals-percentage': `${
(postingStats.originals / postingStats.total) * 100
}%`,
'--replies-percentage': `${
((postingStats.originals + postingStats.replies) /
postingStats.total) *
100
}%`,
}}
/>
<div class="posting-stats-legends">
<span class="ib">
<span class="posting-stats-legend-item posting-stats-legend-item-originals" />{' '}
Original
</span>{' '}
<span class="ib">
<span class="posting-stats-legend-item posting-stats-legend-item-replies" />{' '}
Replies
</span>{' '}
<span class="ib">
<span class="posting-stats-legend-item posting-stats-legend-item-boosts" />{' '}
Boosts
</span>
</div>
</div>
<div
class="posting-stats-bar"
style={{
// [originals | replies | boosts]
'--originals-percentage': `${
(postingStats.originals / postingStats.total) * 100
}%`,
'--replies-percentage': `${
((postingStats.originals + postingStats.replies) /
postingStats.total) *
100
}%`,
}}
/>
<div class="posting-stats-legends">
<span class="ib">
<span class="posting-stats-legend-item posting-stats-legend-item-originals" />{' '}
Original
</span>{' '}
<span class="ib">
<span class="posting-stats-legend-item posting-stats-legend-item-replies" />{' '}
Replies
</span>{' '}
<span class="ib">
<span class="posting-stats-legend-item posting-stats-legend-item-boosts" />{' '}
Boosts
</span>
</div>
</div>
</div>
)}
</div>
</div>
</Link>
)}
<p class="actions">
<span>