bida/bastodon
6
0
Fork 0
Código Issues 7 Pull requests Versões Wiki Atividade

Fix domain blocks on about page not working well on small screens in web UI (#20391)

Ver código fonte
Esse commit está contido em:
Eugen Rochko 2022-11-11 08:26:58 +01:00 commit de GitHub
commit 6774c339b2
Nenhuma chave conhecida encontrada para esta assinatura no banco de dados
ID da chave GPG: 4AEE18F83AFDEB23
2 arquivos alterados com 45 adições e 35 exclusões
Mostrar estatísticas Baixar arquivo patch Baixar arquivo diff Expandir todos os arquivos Colapsar todos os arquivos

29
app/javascript/mastodon/features/about/index.js
Ver arquivo

@ -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>
<table 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>
<div className='about__domain-blocks'>
{domainBlocks.get('items').map(block => (
<div className='about__domain-blocks__domain' key={block.get('domain')}>
<div className='about__domain-blocks__domain__header'>
<h6><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></h6>
<span className='about__domain-blocks__domain__type' title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span>
</div>
<tbody>
{domainBlocks.get('items').map(block => (
<tr key={block.get('domain')}>
<td><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></td>
<td><span title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span></td>
<td>{block.get('comment')}</td>
</tr>
))}
</tbody>
</table>
<p>{block.get('comment').length > 0 ? block.get('comment') : <FormattedMessage id='about.domain_blocks.no_reason_available' defaultMessage='Reason not available' />}</p>
</div>
))}
</div>
</>
) : (
<p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p>

51
app/javascript/styles/mastodon/components.scss
Ver arquivo

@ -8557,28 +8557,45 @@ noscript {
&__domain-blocks {
margin-top: 30px;
width: 100%;
border-collapse: collapse;
break-inside: auto;
background: darken($ui-base-color, 4%);
border: 1px solid lighten($ui-base-color, 4%);
border-radius: 4px;
th {
text-align: left;
font-weight: 500;
&__domain {
border-bottom: 1px solid lighten($ui-base-color, 4%);
padding: 10px;
font-size: 15px;
color: $darker-text-color;
}
thead tr,
tbody tr {
border-bottom: 1px solid lighten($ui-base-color, 8%);
}
&:nth-child(2n) {
background: darken($ui-base-color, 2%);
}
tbody tr:last-child {
border-bottom: 0;
}
&:last-child {
border-bottom: 0;
}
th,
td {
padding: 8px;
&__header {
display: flex;
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;
}
}
}
}