mirror of
https://git.kescher.at/CatCatNya/catstodon.git
synced 2024-11-22 11:48:06 +01:00
[Glitch] Fix a few visual issues with annual reports in web UI
Port 32e5e1d3f1
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
parent
e98891f4e5
commit
e86c1c814b
4 changed files with 24 additions and 11 deletions
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
),
|
),
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -598,3 +598,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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue