mirrors
/
mastodon-glitch
mirror of https://github.com/glitch-soc/mastodon
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Fix domain blocks on about page not working well on small screens in web UI 

Port 6774c339b2 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/1920/head
Eugen Rochko 2022-11-11 08:26:58 +01:00 committed by Claire
parent d525ae4bdd
commit 400d168310
2 changed files with 45 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/javascript/flavours/glitch/features/about/index.js
View File

@ -183,25 +183,18 @@ class About extends React.PureComponent {
<> <>
<p><FormattedMessage id='about.domain_blocks.preamble' defaultMessage='Mastodon generally allows you to view content from and interact with users from any other server in the fediverse. These are the exceptions that have been made on this particular server.' /></p> <p><FormattedMessage id='about.domain_blocks.preamble' defaultMessage='Mastodon generally allows you to view content from and interact with users from any other server in the fediverse. These are the exceptions that have been made on this particular server.' /></p>
<table className='about__domain-blocks'> <div className='about__domain-blocks'>
<thead>
<tr>
<th><FormattedMessage id='about.domain_blocks.domain' defaultMessage='Domain' /></th>
<th><FormattedMessage id='about.domain_blocks.severity' defaultMessage='Severity' /></th>
<th><FormattedMessage id='about.domain_blocks.comment' defaultMessage='Reason' /></th>
</tr>
</thead>
<tbody>
{domainBlocks.get('items').map(block => ( {domainBlocks.get('items').map(block => (
<tr key={block.get('domain')}> <div className='about__domain-blocks__domain' key={block.get('domain')}>
<td><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></td> <div className='about__domain-blocks__domain__header'>
<td><span title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span></td> <h6><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></h6>
<td>{block.get('comment')}</td> <span className='about__domain-blocks__domain__type' title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span>
</tr> </div>
<p>{block.get('comment').length > 0 ? block.get('comment') : <FormattedMessage id='about.domain_blocks.no_reason_available' defaultMessage='Reason not available' />}</p>
</div>
))} ))}
</tbody> </div>
</table>
</> </>
) : ( ) : (
<p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p> <p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p>

47
app/javascript/flavours/glitch/styles/components/about.scss
View File

@ -247,28 +247,45 @@
&__domain-blocks { &__domain-blocks {
margin-top: 30px; margin-top: 30px;
width: 100%; background: darken($ui-base-color, 4%);
border-collapse: collapse; border: 1px solid lighten($ui-base-color, 4%);
break-inside: auto; border-radius: 4px;
th { &__domain {
text-align: left; border-bottom: 1px solid lighten($ui-base-color, 4%);
font-weight: 500; padding: 10px;
font-size: 15px;
color: $darker-text-color; color: $darker-text-color;
&:nth-child(2n) {
background: darken($ui-base-color, 2%);
} }
thead tr, &:last-child {
tbody tr {
border-bottom: 1px solid lighten($ui-base-color, 8%);
}
tbody tr:last-child {
border-bottom: 0; border-bottom: 0;
} }
th, &__header {
td { display: flex;
padding: 8px; gap: 10px;
justify-content: space-between;
font-weight: 500;
margin-bottom: 4px;
}
h6 {
color: $secondary-text-color;
font-size: inherit;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
} }
} }