From 32e5e1d3f166062e4939b3fbf25dff5657417893 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 12 Nov 2024 13:35:35 +0100
Subject: [PATCH] Fix a few visual issues with annual reports in web UI
(#32807)
---
.../features/annual_report/most_used_hashtag.tsx | 15 ++++++++-------
.../features/annual_report/percentile.tsx | 4 ++--
app/javascript/mastodon/locales/en.json | 1 +
app/javascript/styles/mastodon-light/diff.scss | 7 +++++++
.../styles/mastodon/annual_reports.scss | 9 +++++++--
5 files changed, 25 insertions(+), 11 deletions(-)
diff --git a/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx b/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx
index 0e4c78f639..4b59b89737 100644
--- a/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx
+++ b/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx
@@ -7,16 +7,17 @@ export const MostUsedHashtag: React.FC<{
}> = ({ data }) => {
const hashtag = data[0];
- if (!hashtag) {
- return (
- <div className='annual-report__bento__box annual-report__summary__most-used-hashtag' />
- );
- }
-
return (
<div className='annual-report__bento__box annual-report__summary__most-used-hashtag'>
<div className='annual-report__summary__most-used-hashtag__hashtag'>
- #{hashtag.name}
+ {hashtag ? (
+ <>#{hashtag.name}</>
+ ) : (
+ <FormattedMessage
+ id='annual_report.summary.most_used_hashtag.none'
+ defaultMessage='None'
+ />
+ )}
</div>
<div className='annual-report__summary__most-used-hashtag__label'>
<FormattedMessage
diff --git a/app/javascript/mastodon/features/annual_report/percentile.tsx b/app/javascript/mastodon/features/annual_report/percentile.tsx
index a758db72c1..22962019a1 100644
--- a/app/javascript/mastodon/features/annual_report/percentile.tsx
+++ b/app/javascript/mastodon/features/annual_report/percentile.tsx
@@ -22,9 +22,9 @@ export const Percentile: React.FC<{
percentage: () => (
<div className='annual-report__summary__percentile__number'>
<FormattedNumber
- value={percentile / 100}
+ value={Math.min(percentile, 99) / 100}
style='percent'
- maximumFractionDigits={1}
+ maximumFractionDigits={percentile < 1 ? 1 : 0}
/>
</div>
),
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 5bc8c4ad71..9728528f8e 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -101,6 +101,7 @@
"annual_report.summary.highlighted_post.possessive": "{name}'s",
"annual_report.summary.most_used_app.most_used_app": "most used app",
"annual_report.summary.most_used_hashtag.most_used_hashtag": "most used hashtag",
+ "annual_report.summary.most_used_hashtag.none": "None",
"annual_report.summary.new_posts.new_posts": "new posts",
"annual_report.summary.percentile.text": "<topLabel>That puts you in the top</topLabel><percentage></percentage><bottomLabel>of Mastodon users.</bottomLabel>",
"annual_report.summary.percentile.we_wont_tell_bernie": "We won't tell Bernie.",
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 45da56994c..3d4539bb9d 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -535,3 +535,10 @@ a.sparkline {
::-webkit-scrollbar-thumb {
opacity: 0.25;
}
+
+.notification-group--annual-report {
+ .notification-group__icon,
+ .notification-group__main .link-button {
+ color: var(--indigo-3);
+ }
+}
diff --git a/app/javascript/styles/mastodon/annual_reports.scss b/app/javascript/styles/mastodon/annual_reports.scss
index 39784e3b5e..dff1c76eca 100644
--- a/app/javascript/styles/mastodon/annual_reports.scss
+++ b/app/javascript/styles/mastodon/annual_reports.scss
@@ -103,6 +103,11 @@
background-color: var(--goldenrod-2);
}
}
+
+ .status-card,
+ .hashtag-bar {
+ display: none;
+ }
}
&__followers {
@@ -237,7 +242,7 @@
}
&__number {
- font-size: 61px;
+ font-size: 54px;
font-weight: 600;
line-height: 73px;
color: var(--goldenrod-2);
@@ -306,7 +311,7 @@
}
.annual-report-modal {
- max-width: 480px;
+ max-width: 600px;
background: var(--indigo-1);
border-radius: 16px;
display: flex;