mirror of
https://github.com/glitch-soc/mastodon.git
synced 2024-11-23 08:34:13 -05:00
Fix a few visual issues with annual reports in web UI (#32807)
This commit is contained in:
parent
f8e96e761b
commit
32e5e1d3f1
@ -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
|
||||
|
@ -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>
|
||||
),
|
||||
|
@ -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.",
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user