style: about page
This commit is contained in:
parent
f5413366f9
commit
ea5359e05c
5 changed files with 25 additions and 26 deletions
|
@ -122,24 +122,8 @@ class About extends PureComponent {
|
||||||
<div className='scrollable about'>
|
<div className='scrollable about'>
|
||||||
<div className='about__header'>
|
<div className='about__header'>
|
||||||
<ServerHeroImage blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} srcSet={server.getIn(['thumbnail', 'versions'])?.map((value, key) => `${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' />
|
<ServerHeroImage blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} srcSet={server.getIn(['thumbnail', 'versions'])?.map((value, key) => `${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' />
|
||||||
<h1>{isLoading ? <Skeleton width='10ch' /> : server.get('domain')}</h1>
|
<h1>{isLoading ? <Skeleton width='10ch' /> : server.get('title')}</h1>
|
||||||
<p><FormattedMessage id='about.powered_by' defaultMessage='Decentralized social media powered by {mastodon}' values={{ mastodon: <a href='https://joinmastodon.org' className='about__mail' target='_blank'>Mastodon</a> }} /></p>
|
<p><FormattedMessage id='about.powered_by' defaultMessage='A little school band powered by {mastodon}' values={{ mastodon: <a href='/@Springtime' className='about__mail' target='_blank'>Ablers Academy</a> }} /></p>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='about__meta'>
|
|
||||||
<div className='about__meta__column'>
|
|
||||||
<h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
|
|
||||||
|
|
||||||
<Account id={server.getIn(['contact', 'account', 'id'])} size={36} minimal />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr className='about__meta__divider' />
|
|
||||||
|
|
||||||
<div className='about__meta__column'>
|
|
||||||
<h4><FormattedMessage id='about.contact' defaultMessage='Contact:' /></h4>
|
|
||||||
|
|
||||||
{isLoading ? <Skeleton width='10ch' /> : <a className='about__mail' href={`mailto:${server.getIn(['contact', 'email'])}`}>{server.getIn(['contact', 'email'])}</a>}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Section open title={intl.formatMessage(messages.title)}>
|
<Section open title={intl.formatMessage(messages.title)}>
|
||||||
|
@ -156,16 +140,33 @@ class About extends PureComponent {
|
||||||
) : (extendedDescription.get('content')?.length > 0 ? (
|
) : (extendedDescription.get('content')?.length > 0 ? (
|
||||||
<div
|
<div
|
||||||
className='prose'
|
className='prose'
|
||||||
dangerouslySetInnerHTML={{ __html: extendedDescription.get('content') }}
|
dangerouslySetInnerHTML={{__html: extendedDescription.get('content')}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<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>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
<div className='about__meta'>
|
||||||
|
<div className='about__meta__column'>
|
||||||
|
<h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
|
||||||
|
|
||||||
|
<Account id={server.getIn(['contact', 'account', 'id'])} size={36} minimal />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr className='about__meta__divider' />
|
||||||
|
|
||||||
|
<div className='about__meta__column'>
|
||||||
|
<h4><FormattedMessage id='about.contact' defaultMessage='Contact: ' /></h4>
|
||||||
|
|
||||||
|
{isLoading ? <Skeleton width='10ch' /> : <a className='about__mail' href={`mailto:${server.getIn(['contact', 'email'])}`}>{server.getIn(['contact', 'email'])}</a>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</Section>
|
</Section>
|
||||||
|
|
||||||
<Section title={intl.formatMessage(messages.rules)}>
|
<Section title={intl.formatMessage(messages.rules)}>
|
||||||
{!isLoading && (server.get('rules', ImmutableList()).isEmpty() ? (
|
{!isLoading && (server.get('rules', ImmutableList()).isEmpty() ? (
|
||||||
<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>
|
||||||
) : (
|
) : (
|
||||||
<ol className='rules-list'>
|
<ol className='rules-list'>
|
||||||
{server.get('rules').map(rule => (
|
{server.get('rules').map(rule => (
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
"about.domain_blocks.suspended.explanation": "No data from this server will be processed, stored or exchanged, making any interaction or communication with users from this server impossible.",
|
"about.domain_blocks.suspended.explanation": "No data from this server will be processed, stored or exchanged, making any interaction or communication with users from this server impossible.",
|
||||||
"about.domain_blocks.suspended.title": "Suspended",
|
"about.domain_blocks.suspended.title": "Suspended",
|
||||||
"about.not_available": "This information has not been made available on this server.",
|
"about.not_available": "This information has not been made available on this server.",
|
||||||
"about.powered_by": "Decentralized social media powered by {mastodon}",
|
"about.powered_by": "A little school band powered by {mastodon}",
|
||||||
"about.rules": "Server rules",
|
"about.rules": "Server rules",
|
||||||
"account.account_note_header": "Personal note",
|
"account.account_note_header": "Personal note",
|
||||||
"account.add_or_remove_from_list": "Add or Remove from lists",
|
"account.add_or_remove_from_list": "Add or Remove from lists",
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
"about.domain_blocks.suspended.explanation": "이 서버의 어떤 데이터도 처리되거나, 저장 되거나 공유되지 않고, 이 서버의 어떤 유저와도 상호작용 하거나 대화할 수 없습니다.",
|
"about.domain_blocks.suspended.explanation": "이 서버의 어떤 데이터도 처리되거나, 저장 되거나 공유되지 않고, 이 서버의 어떤 유저와도 상호작용 하거나 대화할 수 없습니다.",
|
||||||
"about.domain_blocks.suspended.title": "정지됨",
|
"about.domain_blocks.suspended.title": "정지됨",
|
||||||
"about.not_available": "이 정보는 이 서버에서 사용할 수 없습니다.",
|
"about.not_available": "이 정보는 이 서버에서 사용할 수 없습니다.",
|
||||||
"about.powered_by": "{mastodon}으로 구동되는 분산 소셜 미디어",
|
"about.powered_by": "{mastodon}에 의해 운영되는 작은 밴드부 교실",
|
||||||
"about.rules": "서버 규칙",
|
"about.rules": "서버 규칙",
|
||||||
"account.account_note_header": "개인 메모",
|
"account.account_note_header": "개인 메모",
|
||||||
"account.add_or_remove_from_list": "리스트에 추가 혹은 삭제",
|
"account.add_or_remove_from_list": "리스트에 추가 혹은 삭제",
|
||||||
|
|
|
@ -7042,8 +7042,7 @@ a:is(.active,
|
||||||
color: var(--color-content-fg);
|
color: var(--color-content-fg);
|
||||||
margin: 30px 0 0 20px;
|
margin: 30px 0 0 20px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-variant: small-caps;
|
font-size: 24px;
|
||||||
font-size: 20px;
|
|
||||||
}
|
}
|
||||||
.app-body .about__header > h1 + p {
|
.app-body .about__header > h1 + p {
|
||||||
color: var(--color-content-fg);
|
color: var(--color-content-fg);
|
||||||
|
|
|
@ -7042,8 +7042,7 @@ a:is(.active,
|
||||||
color: var(--color-content-fg);
|
color: var(--color-content-fg);
|
||||||
margin: 30px 0 0 20px;
|
margin: 30px 0 0 20px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-variant: small-caps;
|
font-size: 24px;
|
||||||
font-size: 20px;
|
|
||||||
}
|
}
|
||||||
.app-body .about__header > h1 + p {
|
.app-body .about__header > h1 + p {
|
||||||
color: var(--color-content-fg);
|
color: var(--color-content-fg);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue