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

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 { .account-container .account-metadata-box {
overflow: hidden; overflow: hidden;
border-radius: 16px; border-radius: 16px;
display: block;
text-decoration: none;
& > * { & > * {
margin-bottom: 2px; margin-bottom: 2px;
@ -308,6 +310,10 @@
--size: 8px; --size: 8px;
--original-color: var(--link-color); --original-color: var(--link-color);
&:is(:hover, :focus-within) {
background-color: var(--link-bg-hover-color);
}
.posting-stats-bar { .posting-stats-bar {
height: var(--size); height: var(--size);
border-radius: 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 [showAddRemoveLists, setShowAddRemoveLists] = useState(false);
const hasPostingStats = postingStats?.total >= 3; const hasPostingStats = postingStats?.total >= 3;
const accountLink = instance ? `/${instance}/a/${id}` : `/a/${id}`;
return ( return (
<> <>
{hasPostingStats && ( {hasPostingStats && (
<div class="account-metadata-box"> <Link
{hasPostingStats && ( to={accountLink}
<div class="shazam-container"> class="account-metadata-box"
<div class="shazam-container-inner"> onClick={() => {
<div class="posting-stats"> states.showAccount = false;
<div> }}
{postingStats.daysSinceLastPost < 365 >
? `Last ${postingStats.total} posts in the past <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} day${
postingStats.daysSinceLastPost > 1 ? 's' : '' postingStats.daysSinceLastPost > 1 ? 's' : ''
}` }`
: ` : `
Last ${postingStats.total} posts in the past year(s) Last ${postingStats.total} posts in the past year(s)
`} `}
</div> </div>
<div <div
class="posting-stats-bar" class="posting-stats-bar"
style={{ style={{
// [originals | replies | boosts] // [originals | replies | boosts]
'--originals-percentage': `${ '--originals-percentage': `${
(postingStats.originals / postingStats.total) * 100 (postingStats.originals / postingStats.total) * 100
}%`, }%`,
'--replies-percentage': `${ '--replies-percentage': `${
((postingStats.originals + postingStats.replies) / ((postingStats.originals + postingStats.replies) /
postingStats.total) * postingStats.total) *
100 100
}%`, }%`,
}} }}
/> />
<div class="posting-stats-legends"> <div class="posting-stats-legends">
<span class="ib"> <span class="ib">
<span class="posting-stats-legend-item posting-stats-legend-item-originals" />{' '} <span class="posting-stats-legend-item posting-stats-legend-item-originals" />{' '}
Original Original
</span>{' '} </span>{' '}
<span class="ib"> <span class="ib">
<span class="posting-stats-legend-item posting-stats-legend-item-replies" />{' '} <span class="posting-stats-legend-item posting-stats-legend-item-replies" />{' '}
Replies Replies
</span>{' '} </span>{' '}
<span class="ib"> <span class="ib">
<span class="posting-stats-legend-item posting-stats-legend-item-boosts" />{' '} <span class="posting-stats-legend-item posting-stats-legend-item-boosts" />{' '}
Boosts Boosts
</span> </span>
</div>
</div> </div>
</div> </div>
</div> </div>
)} </div>
</div> </Link>
)} )}
<p class="actions"> <p class="actions">
<span> <span>