From 941d2efeb1b97a3cdf96c680ea3f5316bc881b8b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 16 Sep 2023 14:48:31 +0800
Subject: [PATCH] Convert posting stats box into a link to account page
---
src/components/account-info.css | 6 +++
src/components/account-info.jsx | 89 +++++++++++++++++----------------
2 files changed, 53 insertions(+), 42 deletions(-)
diff --git a/src/components/account-info.css b/src/components/account-info.css
index 0722deca..f28f507b 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -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);
diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index df708925..7b77a2f7 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -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>