fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-12-23 17:44:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix a few visual issues with annual reports in web UI (#32807)

Browse source
This commit is contained in:
Eugen Rochko 2024-11-12 13:35:35 +01:00 committed by GitHub
parent f8e96e761b
commit 32e5e1d3f1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx
View file

@ -7,16 +7,17 @@ export const MostUsedHashtag: React.FC<{
}> = ({ data }) => { }> = ({ data }) => {
const hashtag = data[0]; const hashtag = data[0];
if (!hashtag) {
return (
<div className='annual-report__bento__box annual-report__summary__most-used-hashtag' />
);
}
return ( return (
<div className='annual-report__bento__box annual-report__summary__most-used-hashtag'> <div className='annual-report__bento__box annual-report__summary__most-used-hashtag'>
<div className='annual-report__summary__most-used-hashtag__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>
<div className='annual-report__summary__most-used-hashtag__label'> <div className='annual-report__summary__most-used-hashtag__label'>
<FormattedMessage <FormattedMessage

4
app/javascript/mastodon/features/annual_report/percentile.tsx
View file

@ -22,9 +22,9 @@ export const Percentile: React.FC<{
percentage: () => ( percentage: () => (
<div className='annual-report__summary__percentile__number'> <div className='annual-report__summary__percentile__number'>
<FormattedNumber <FormattedNumber
value={percentile / 100} value={Math.min(percentile, 99) / 100}
style='percent' style='percent'
maximumFractionDigits={1} maximumFractionDigits={percentile < 1 ? 1 : 0}
/> />
</div> </div>
), ),

1
app/javascript/mastodon/locales/en.json
View file

@ -101,6 +101,7 @@
"annual_report.summary.highlighted_post.possessive": "{name}'s", "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_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.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.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.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.", "annual_report.summary.percentile.we_wont_tell_bernie": "We won't tell Bernie.",

7
app/javascript/styles/mastodon-light/diff.scss
View file

@ -535,3 +535,10 @@ a.sparkline {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
opacity: 0.25; opacity: 0.25;
} }
.notification-group--annual-report {
.notification-group__icon,
.notification-group__main .link-button {
color: var(--indigo-3);
}
}

9
app/javascript/styles/mastodon/annual_reports.scss
View file

@ -103,6 +103,11 @@
background-color: var(--goldenrod-2); background-color: var(--goldenrod-2);
} }
} }
.status-card,
.hashtag-bar {
display: none;
}
} }
&__followers { &__followers {
@ -237,7 +242,7 @@
} }
&__number { &__number {
font-size: 61px; font-size: 54px;
font-weight: 600; font-weight: 600;
line-height: 73px; line-height: 73px;
color: var(--goldenrod-2); color: var(--goldenrod-2);
@ -306,7 +311,7 @@
} }
.annual-report-modal { .annual-report-modal {
max-width: 480px; max-width: 600px;
background: var(--indigo-1); background: var(--indigo-1);
border-radius: 16px; border-radius: 16px;
display: flex; display: flex;