sforkowany z mirror/soapbox
Federation restrictions page styles
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>timeline-nomemo
rodzic
f42973b00e
commit
604ad37c11
|
@ -50,8 +50,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
|
|||
|
||||
if (followers_only) {
|
||||
items.push((
|
||||
<Text key='followers_only'>
|
||||
<Icon className='mr-2' src={require('@tabler/icons/lock.svg')} />
|
||||
<Text key='followers_only' className='flex items-center gap-2' theme='muted'>
|
||||
<Icon src={require('@tabler/icons/lock.svg')} />
|
||||
<FormattedMessage
|
||||
id='federation_restriction.followers_only'
|
||||
defaultMessage='Hidden except to followers'
|
||||
|
@ -60,8 +60,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
|
|||
));
|
||||
} else if (federated_timeline_removal) {
|
||||
items.push((
|
||||
<Text key='federated_timeline_removal'>
|
||||
<Icon className='mr-2' src={require('@tabler/icons/lock-open.svg')} />
|
||||
<Text key='federated_timeline_removal' className='flex items-center gap-2' theme='muted'>
|
||||
<Icon src={require('@tabler/icons/lock-open.svg')} />
|
||||
<FormattedMessage
|
||||
id='federation_restriction.federated_timeline_removal'
|
||||
defaultMessage='Fediverse timeline removal'
|
||||
|
@ -72,8 +72,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
|
|||
|
||||
if (fullMediaRemoval) {
|
||||
items.push((
|
||||
<Text key='full_media_removal'>
|
||||
<Icon className='mr-2' src={require('@tabler/icons/photo-off.svg')} />
|
||||
<Text key='full_media_removal' className='flex items-center gap-2' theme='muted'>
|
||||
<Icon src={require('@tabler/icons/photo-off.svg')} />
|
||||
<FormattedMessage
|
||||
id='federation_restriction.full_media_removal'
|
||||
defaultMessage='Full media removal'
|
||||
|
@ -82,8 +82,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
|
|||
));
|
||||
} else if (partialMediaRemoval) {
|
||||
items.push((
|
||||
<Text key='partial_media_removal'>
|
||||
<Icon className='mr-2' src={require('@tabler/icons/photo-off.svg')} />
|
||||
<Text key='partial_media_removal' className='flex items-center gap-2' theme='muted'>
|
||||
<Icon src={require('@tabler/icons/photo-off.svg')} />
|
||||
<FormattedMessage
|
||||
id='federation_restriction.partial_media_removal'
|
||||
defaultMessage='Partial media removal'
|
||||
|
@ -94,8 +94,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
|
|||
|
||||
if (!fullMediaRemoval && media_nsfw) {
|
||||
items.push((
|
||||
<Text key='media_nsfw'>
|
||||
<Icon className='mr-2' id='eye-slash' />
|
||||
<Text key='media_nsfw' className='flex items-center gap-2' theme='muted'>
|
||||
<Icon id='eye-slash' />
|
||||
<FormattedMessage
|
||||
id='federation_restriction.media_nsfw'
|
||||
defaultMessage='Attachments marked NSFW'
|
||||
|
@ -116,8 +116,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
|
|||
|
||||
if (remoteInstance.getIn(['federation', 'reject']) === true) {
|
||||
return (
|
||||
<Text>
|
||||
<Icon className='mr-2' id='times' />
|
||||
<Text className='flex items-center gap-2' theme='muted'>
|
||||
<Icon id='times' />
|
||||
<FormattedMessage
|
||||
id='remote_instance.federation_panel.restricted_message'
|
||||
defaultMessage='{siteTitle} blocks all activities from {host}.'
|
||||
|
@ -128,7 +128,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
|
|||
} else if (hasRestrictions(remoteInstance)) {
|
||||
return [
|
||||
(
|
||||
<Text>
|
||||
<Text theme='muted'>
|
||||
<FormattedMessage
|
||||
id='remote_instance.federation_panel.some_restrictions_message'
|
||||
defaultMessage='{siteTitle} has placed some restrictions on {host}.'
|
||||
|
@ -140,8 +140,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
|
|||
];
|
||||
} else {
|
||||
return (
|
||||
<Text>
|
||||
<Icon className='mr-2' id='check' />
|
||||
<Text className='flex items-center gap-2' theme='muted'>
|
||||
<Icon id='check' />
|
||||
<FormattedMessage
|
||||
id='remote_instance.federation_panel.no_restrictions_message'
|
||||
defaultMessage='{siteTitle} has placed no restrictions on {host}.'
|
||||
|
@ -153,7 +153,11 @@ class InstanceRestrictions extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
return <div className='instance-restrictions'>{this.renderContent()}</div>;
|
||||
return (
|
||||
<div className='py-1 pl-4 mb-4 border-solid border-l-[3px] border-gray-300 dark:border-gray-500'>
|
||||
{this.renderContent()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -24,20 +24,19 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className={classNames('restricted-instance', {
|
||||
'restricted-instance--reject': remoteInstance.getIn(['federation', 'reject']),
|
||||
'restricted-instance--expanded': expanded,
|
||||
})}
|
||||
>
|
||||
<a href='#' className='restricted-instance__header' onClick={toggleExpanded}>
|
||||
<div className='restricted-instance__icon'>
|
||||
<Icon src={expanded ? require('@tabler/icons/caret-down.svg') : require('@tabler/icons/caret-right.svg')} />
|
||||
</div>
|
||||
<div className='restricted-instance__host'>
|
||||
<div>
|
||||
<a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
|
||||
<Icon src={expanded ? require('@tabler/icons/caret-down.svg') : require('@tabler/icons/caret-right.svg')} />
|
||||
<div className={classNames({ 'line-through': remoteInstance.getIn(['federation', 'reject']) })}>
|
||||
{remoteInstance.get('host')}
|
||||
</div>
|
||||
</a>
|
||||
<div className='restricted-instance__restrictions'>
|
||||
<div
|
||||
className={classNames({
|
||||
'h-0 overflow-hidden': !expanded,
|
||||
'h-auto': expanded,
|
||||
})}
|
||||
>
|
||||
<InstanceRestrictions remoteInstance={remoteInstance} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -40,17 +40,15 @@ const FederationRestrictions = () => {
|
|||
|
||||
return (
|
||||
<Column icon='gavel' label={intl.formatMessage(messages.heading)}>
|
||||
<div className='explanation-box'>
|
||||
<Accordion
|
||||
headline={intl.formatMessage(messages.boxTitle)}
|
||||
expanded={explanationBoxExpanded}
|
||||
onToggle={toggleExplanationBox}
|
||||
>
|
||||
{intl.formatMessage(messages.boxMessage, { siteTitle })}
|
||||
</Accordion>
|
||||
</div>
|
||||
<Accordion
|
||||
headline={intl.formatMessage(messages.boxTitle)}
|
||||
expanded={explanationBoxExpanded}
|
||||
onToggle={toggleExplanationBox}
|
||||
>
|
||||
{intl.formatMessage(messages.boxMessage, { siteTitle })}
|
||||
</Accordion>
|
||||
|
||||
<div className='federation-restrictions'>
|
||||
<div className='pt-4'>
|
||||
<ScrollableList emptyMessage={intl.formatMessage(emptyMessage, { siteTitle })}>
|
||||
{hosts.map((host) => <RestrictedInstance key={host} host={host} />)}
|
||||
</ScrollableList>
|
||||
|
|
|
@ -67,7 +67,6 @@
|
|||
@import 'components/backups';
|
||||
@import 'components/crypto-donate';
|
||||
@import 'components/remote-timeline';
|
||||
@import 'components/federation-restrictions';
|
||||
@import 'components/aliases';
|
||||
@import 'components/icon';
|
||||
@import 'components/radio-button';
|
||||
|
|
|
@ -1,69 +0,0 @@
|
|||
.federation-restrictions {
|
||||
padding-top: 15px;
|
||||
|
||||
.slist .item-list > article {
|
||||
padding: 0 20px;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.restricted-instance {
|
||||
&__header {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 16px;
|
||||
|
||||
.svg-icon svg {
|
||||
stroke-width: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
&--expanded &__icon i.fa {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
|
||||
&--reject &__host {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
&__restrictions {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&--expanded &__restrictions {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.instance-restrictions {
|
||||
padding: 5px 0 5px 15px;
|
||||
border-left: 3px solid hsla(var(--primary-text-color_hsl), 0.4);
|
||||
color: var(--primary-text-color--faint);
|
||||
margin-bottom: 15px;
|
||||
|
||||
.federation-restriction {
|
||||
padding: 7px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__message {
|
||||
margin-bottom: 10px;
|
||||
|
||||
i.fa {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Ładowanie…
Reference in New Issue