Fix profile markup (#259)
This commit is contained in:
Ilya Y
GitHub
parent
b1db22aa23
commit
8e6b70eb7e
|
|
@ -5,8 +5,6 @@ import { MediaItem } from '../../../pages/types'
|
|||
import { createSignal, Show } from 'solid-js'
|
||||
import { Icon } from '../../_shared/Icon'
|
||||
import { Topic } from '../../../graphql/types.gen'
|
||||
import { getPagePath } from '@nanostores/router'
|
||||
import { router } from '../../../stores/router'
|
||||
import { CardTopic } from '../../Feed/CardTopic'
|
||||
|
||||
type Props = {
|
||||
|
|
|
|||
|
|
@ -625,7 +625,7 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.4rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-top: 1.5rem;
|
||||
gap: 1rem;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
|
@ -637,7 +637,6 @@
|
|||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
margin-top: 1rem;
|
||||
margin-right: 3rem;
|
||||
vertical-align: top;
|
||||
border-bottom: unset !important;
|
||||
|
|
@ -669,10 +668,6 @@
|
|||
.subscribersCounter {
|
||||
font-weight: 500;
|
||||
margin-left: -0.6rem;
|
||||
|
||||
&:hover {
|
||||
color: #696969;
|
||||
}
|
||||
}
|
||||
|
||||
.listWrapper {
|
||||
|
|
|
|||
|
|
@ -126,192 +126,168 @@ export const AuthorCard = (props: Props) => {
|
|||
setUserpicUrl(props.author.userpic.replace('100x', '500x500'))
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
class={clsx(styles.author, props.class)}
|
||||
classList={{
|
||||
['row']: props.isAuthorPage,
|
||||
[styles.authorPage]: props.isAuthorPage,
|
||||
[styles.authorComments]: props.isComments,
|
||||
[styles.authorsListItem]: props.isAuthorsList,
|
||||
[styles.feedMode]: props.isFeedMode,
|
||||
[styles.nowrapView]: props.isNowrap
|
||||
}}
|
||||
>
|
||||
<Show
|
||||
when={props.isAuthorPage}
|
||||
fallback={
|
||||
<Userpic
|
||||
name={props.author.name}
|
||||
userpic={props.author.userpic}
|
||||
hasLink={props.hasLink}
|
||||
isBig={props.isAuthorPage}
|
||||
isAuthorsList={props.isAuthorsList}
|
||||
isFeedMode={props.isFeedMode}
|
||||
slug={props.author.slug}
|
||||
class={styles.circlewrap}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div class="col-md-5">
|
||||
<Userpic
|
||||
name={props.author.name}
|
||||
userpic={userpicUrl()}
|
||||
hasLink={props.hasLink}
|
||||
isBig={props.isAuthorPage}
|
||||
isAuthorsList={props.isAuthorsList}
|
||||
isFeedMode={props.isFeedMode}
|
||||
slug={props.author.slug}
|
||||
class={styles.circlewrap}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div
|
||||
class={clsx(styles.author, props.class)}
|
||||
class={styles.authorDetails}
|
||||
classList={{
|
||||
['row']: props.isAuthorPage,
|
||||
[styles.authorPage]: props.isAuthorPage,
|
||||
[styles.authorComments]: props.isComments,
|
||||
[styles.authorsListItem]: props.isAuthorsList,
|
||||
[styles.feedMode]: props.isFeedMode,
|
||||
[styles.nowrapView]: props.isNowrap
|
||||
'col-md-15 col-xl-13': props.isAuthorPage,
|
||||
[styles.authorDetailsShrinked]: props.isAuthorPage
|
||||
}}
|
||||
>
|
||||
<Show
|
||||
when={props.isAuthorPage}
|
||||
fallback={
|
||||
<Userpic
|
||||
name={props.author.name}
|
||||
userpic={props.author.userpic}
|
||||
hasLink={props.hasLink}
|
||||
isBig={props.isAuthorPage}
|
||||
isAuthorsList={props.isAuthorsList}
|
||||
isFeedMode={props.isFeedMode}
|
||||
slug={props.author.slug}
|
||||
class={styles.circlewrap}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div class="col-md-5">
|
||||
<Userpic
|
||||
name={props.author.name}
|
||||
userpic={userpicUrl()}
|
||||
hasLink={props.hasLink}
|
||||
isBig={props.isAuthorPage}
|
||||
isAuthorsList={props.isAuthorsList}
|
||||
isFeedMode={props.isFeedMode}
|
||||
slug={props.author.slug}
|
||||
class={styles.circlewrap}
|
||||
/>
|
||||
<div class={styles.authorDetailsWrapper}>
|
||||
<div class={styles.authorNameContainer}>
|
||||
<ConditionalWrapper
|
||||
condition={props.hasLink}
|
||||
wrapper={(children) => (
|
||||
<a class={styles.authorName} href={`/author/${props.author.slug}`}>
|
||||
{children}
|
||||
</a>
|
||||
)}
|
||||
>
|
||||
<span class={clsx({ [styles.authorName]: !props.hasLink })}>{name()}</span>
|
||||
</ConditionalWrapper>
|
||||
</div>
|
||||
</Show>
|
||||
<Show
|
||||
when={props.author.bio && !props.hideBio}
|
||||
fallback={
|
||||
props.showPublicationsCounter ? (
|
||||
<div class={styles.authorAbout}>
|
||||
{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)
|
||||
}
|
||||
>
|
||||
<div
|
||||
class={styles.authorAbout}
|
||||
classList={{ 'text-truncate': props.truncateBio }}
|
||||
innerHTML={props.author.bio}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<div
|
||||
class={styles.authorDetails}
|
||||
classList={{
|
||||
'col-md-15 col-xl-13': props.isAuthorPage,
|
||||
[styles.authorDetailsShrinked]: props.isAuthorPage
|
||||
}}
|
||||
>
|
||||
<div class={styles.authorDetailsWrapper}>
|
||||
<div class={styles.authorNameContainer}>
|
||||
<ConditionalWrapper
|
||||
condition={props.hasLink}
|
||||
wrapper={(children) => (
|
||||
<a class={styles.authorName} href={`/author/${props.author.slug}`}>
|
||||
{children}
|
||||
<Show
|
||||
when={
|
||||
(props.followers && props.followers.length > 0) ||
|
||||
(props.following && props.following.length > 0)
|
||||
}
|
||||
>
|
||||
<div class={styles.subscribersContainer}>
|
||||
<Switch>
|
||||
<Match when={props.followers && props.followers.length > 0 && !props.isCurrentUser}>
|
||||
<a href="?modal=followers" class={styles.subscribers}>
|
||||
<For each={props.followers.slice(0, 3)}>
|
||||
{(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
|
||||
</For>
|
||||
<div class={styles.subscribersCounter}>
|
||||
{t('SubscriptionWithCount', { count: props.followers.length })}
|
||||
</div>
|
||||
</a>
|
||||
</Match>
|
||||
<Match when={props.followers && props.followers.length > 0 && props.isCurrentUser}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => redirectPage(router, 'profileSettings')}
|
||||
value={t('Edit profile')}
|
||||
/>
|
||||
</Match>
|
||||
</Switch>
|
||||
<Switch>
|
||||
<Match when={props.following && props.following.length > 0 && !props.isCurrentUser}>
|
||||
<a href="?modal=following" class={styles.subscribers}>
|
||||
<For each={props.following.slice(0, 3)}>
|
||||
{(f) => {
|
||||
if ('name' in f) {
|
||||
return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
|
||||
} else if ('title' in f) {
|
||||
return <Userpic name={f.title} userpic={f.pic} class={styles.userpic} />
|
||||
}
|
||||
return null
|
||||
}}
|
||||
</For>
|
||||
<div class={styles.subscribersCounter}>
|
||||
{t('SubscriberWithCount', { count: props?.following.length ?? 0 })}
|
||||
</div>
|
||||
</a>
|
||||
</Match>
|
||||
<Match when={props.following && props.following.length > 0 && props.isCurrentUser}>
|
||||
<SharePopup
|
||||
containerCssClass={stylesHeader.control}
|
||||
title={props.author.name}
|
||||
description={props.author.bio}
|
||||
imageUrl={props.author.userpic}
|
||||
shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
|
||||
trigger={<Button variant="secondary" value={t('Share')} />}
|
||||
/>
|
||||
</Match>
|
||||
</Switch>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<ShowOnlyOnClient>
|
||||
<Show when={isSessionLoaded()}>
|
||||
<div class={styles.authorSubscribeSocial}>
|
||||
<For each={props.author.links}>
|
||||
{(link) => (
|
||||
<a
|
||||
class={styles.socialLink}
|
||||
href={link.startsWith('http') ? link : `https://${link}`}
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
>
|
||||
<span class={styles.authorSubscribeSocialLabel}>
|
||||
{link.startsWith('http') ? link : `https://${link}`}
|
||||
</span>
|
||||
</a>
|
||||
)}
|
||||
>
|
||||
<span class={clsx({ [styles.authorName]: !props.hasLink })}>{name()}</span>
|
||||
</ConditionalWrapper>
|
||||
</For>
|
||||
</div>
|
||||
<Show
|
||||
when={props.author.bio && !props.hideBio}
|
||||
fallback={
|
||||
props.showPublicationsCounter ? (
|
||||
<div class={styles.authorAbout}>
|
||||
{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)
|
||||
}
|
||||
>
|
||||
<div
|
||||
class={styles.authorAbout}
|
||||
classList={{ 'text-truncate': props.truncateBio }}
|
||||
innerHTML={props.author.bio}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<Show
|
||||
when={
|
||||
(props.followers && props.followers.length > 0) ||
|
||||
(props.following && props.following.length > 0)
|
||||
}
|
||||
>
|
||||
<div class={styles.subscribersContainer}>
|
||||
<Switch>
|
||||
<Match when={props.followers && props.followers.length > 0 && !props.isCurrentUser}>
|
||||
<a href="?modal=followers" class={styles.subscribers}>
|
||||
<For each={props.followers.slice(0, 3)}>
|
||||
{(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
|
||||
</For>
|
||||
<div class={styles.subscribersCounter}>
|
||||
{t('SubscriptionWithCount', { count: props.followers.length })}
|
||||
</div>
|
||||
</a>
|
||||
</Match>
|
||||
<Match when={props.followers && props.followers.length > 0 && props.isCurrentUser}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => redirectPage(router, 'profileSettings')}
|
||||
value={t('Edit profile')}
|
||||
/>
|
||||
</Match>
|
||||
</Switch>
|
||||
<Switch>
|
||||
<Match when={props.following && props.following.length > 0 && !props.isCurrentUser}>
|
||||
<a href="?modal=following" class={styles.subscribers}>
|
||||
<For each={props.following.slice(0, 3)}>
|
||||
{(f) => {
|
||||
if ('name' in f) {
|
||||
return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
|
||||
} else if ('title' in f) {
|
||||
return <Userpic name={f.title} userpic={f.pic} class={styles.userpic} />
|
||||
}
|
||||
return null
|
||||
}}
|
||||
</For>
|
||||
<div class={styles.subscribersCounter}>
|
||||
{t('SubscriberWithCount', { count: props?.following.length ?? 0 })}
|
||||
</div>
|
||||
</a>
|
||||
</Match>
|
||||
<Match when={props.following && props.following.length > 0 && props.isCurrentUser}>
|
||||
<SharePopup
|
||||
containerCssClass={stylesHeader.control}
|
||||
title={props.author.name}
|
||||
description={props.author.bio}
|
||||
imageUrl={props.author.userpic}
|
||||
shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
|
||||
trigger={<Button variant="secondary" value={t('Share')} />}
|
||||
/>
|
||||
</Match>
|
||||
</Switch>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<ShowOnlyOnClient>
|
||||
<Show when={isSessionLoaded()}>
|
||||
<div class={styles.authorSubscribeSocial}>
|
||||
<For each={props.author.links}>
|
||||
{(link) => (
|
||||
<a
|
||||
class={styles.socialLink}
|
||||
href={link.startsWith('http') ? link : `https://${link}`}
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
>
|
||||
<span class={styles.authorSubscribeSocialLabel}>
|
||||
{link.startsWith('http') ? link : `https://${link}`}
|
||||
</span>
|
||||
</a>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
<Show when={canFollow()}>
|
||||
<div class={styles.authorSubscribe}>
|
||||
<Show
|
||||
when={subscribed()}
|
||||
fallback={
|
||||
<button
|
||||
onClick={handleSubscribe}
|
||||
class={clsx('button', styles.button)}
|
||||
classList={{
|
||||
[styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
|
||||
'button--subscribe': !props.isAuthorsList,
|
||||
'button--subscribe-topic': props.isAuthorsList || props.isTextButton,
|
||||
[styles.buttonWrite]: props.isAuthorsList || props.isTextButton,
|
||||
[styles.isSubscribing]: isSubscribing()
|
||||
}}
|
||||
disabled={isSubscribing()}
|
||||
>
|
||||
<Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
|
||||
<Icon name="author-subscribe" class={styles.icon} />
|
||||
</Show>
|
||||
<Show when={props.isTextButton || props.isAuthorPage}>
|
||||
<span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
|
||||
{t('Follow')}
|
||||
</span>
|
||||
</Show>
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<Show when={canFollow()}>
|
||||
<div class={styles.authorSubscribe}>
|
||||
<Show
|
||||
when={subscribed()}
|
||||
fallback={
|
||||
<button
|
||||
onClick={() => subscribe(false)}
|
||||
onClick={handleSubscribe}
|
||||
class={clsx('button', styles.button)}
|
||||
classList={{
|
||||
[styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
|
||||
|
|
@ -323,118 +299,139 @@ export const AuthorCard = (props: Props) => {
|
|||
disabled={isSubscribing()}
|
||||
>
|
||||
<Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
|
||||
<Icon name="author-unsubscribe" class={styles.icon} />
|
||||
<Icon name="author-subscribe" class={styles.icon} />
|
||||
</Show>
|
||||
<Show when={props.isTextButton || props.isAuthorPage}>
|
||||
<span
|
||||
class={clsx(
|
||||
styles.buttonLabel,
|
||||
styles.buttonLabelVisible,
|
||||
styles.buttonUnfollowLabel
|
||||
)}
|
||||
>
|
||||
{t('Unfollow')}
|
||||
</span>
|
||||
<span
|
||||
class={clsx(
|
||||
styles.buttonLabel,
|
||||
styles.buttonLabelVisible,
|
||||
styles.buttonSubscribedLabel
|
||||
)}
|
||||
>
|
||||
{t('You are subscribed')}
|
||||
<span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
|
||||
{t('Follow')}
|
||||
</span>
|
||||
</Show>
|
||||
</button>
|
||||
</Show>
|
||||
}
|
||||
>
|
||||
<button
|
||||
onClick={() => subscribe(false)}
|
||||
class={clsx('button', styles.button)}
|
||||
classList={{
|
||||
[styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
|
||||
'button--subscribe': !props.isAuthorsList,
|
||||
'button--subscribe-topic': props.isAuthorsList || props.isTextButton,
|
||||
[styles.buttonWrite]: props.isAuthorsList || props.isTextButton,
|
||||
[styles.isSubscribing]: isSubscribing()
|
||||
}}
|
||||
disabled={isSubscribing()}
|
||||
>
|
||||
<Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
|
||||
<Icon name="author-unsubscribe" class={styles.icon} />
|
||||
</Show>
|
||||
<Show when={props.isTextButton || props.isAuthorPage}>
|
||||
<span
|
||||
class={clsx(
|
||||
styles.buttonLabel,
|
||||
styles.buttonLabelVisible,
|
||||
styles.buttonUnfollowLabel
|
||||
)}
|
||||
>
|
||||
{t('Unfollow')}
|
||||
</span>
|
||||
<span
|
||||
class={clsx(
|
||||
styles.buttonLabel,
|
||||
styles.buttonLabelVisible,
|
||||
styles.buttonSubscribedLabel
|
||||
)}
|
||||
>
|
||||
{t('You are subscribed')}
|
||||
</span>
|
||||
</Show>
|
||||
</button>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.hideWriteButton}>
|
||||
<button
|
||||
class={clsx(styles.button, styles.buttonSubscribe)}
|
||||
classList={{
|
||||
'button--subscribe': !props.isAuthorsList,
|
||||
'button--subscribe-topic': props.isAuthorsList,
|
||||
[styles.buttonWrite]: props.liteButtons && props.isAuthorsList
|
||||
}}
|
||||
onClick={initChat}
|
||||
>
|
||||
<Show when={!props.isTextButton && !props.isAuthorPage}>
|
||||
<Icon name="comment" class={styles.icon} />
|
||||
</Show>
|
||||
<Show when={!props.liteButtons || props.isTextButton}>{t('Write')}</Show>
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={!props.hideWriteButton}>
|
||||
<button
|
||||
class={clsx(styles.button, styles.buttonSubscribe)}
|
||||
classList={{
|
||||
'button--subscribe': !props.isAuthorsList,
|
||||
'button--subscribe-topic': props.isAuthorsList,
|
||||
[styles.buttonWrite]: props.liteButtons && props.isAuthorsList
|
||||
}}
|
||||
onClick={initChat}
|
||||
>
|
||||
<Show when={!props.isTextButton && !props.isAuthorPage}>
|
||||
<Icon name="comment" class={styles.icon} />
|
||||
</Show>
|
||||
<Show when={!props.liteButtons || props.isTextButton}>{t('Write')}</Show>
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</ShowOnlyOnClient>
|
||||
</div>
|
||||
</Show>
|
||||
</ShowOnlyOnClient>
|
||||
<Show when={props.followers}>
|
||||
<Modal variant="medium" name="followers" onClose={handleCloseFollowModals} maxHeight>
|
||||
<>
|
||||
<h2>{t('Followers')}</h2>
|
||||
<div class={styles.listWrapper}>
|
||||
<div class="row">
|
||||
<div class="col-24">
|
||||
<For each={props.followers}>
|
||||
{(follower: Author) => <AuthorBadge author={follower} />}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</Modal>
|
||||
</Show>
|
||||
|
||||
<Show when={props.following}>
|
||||
<Modal variant="medium" name="following" onClose={handleCloseFollowModals} maxHeight>
|
||||
<>
|
||||
<h2>{t('Subscriptions')}</h2>
|
||||
<ul class="view-switcher">
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('all')}>
|
||||
{t('All')}
|
||||
</button>
|
||||
<span class="view-switcher__counter">{props.following.length}</span>
|
||||
</li>
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('users')}>
|
||||
{t('Users')}
|
||||
</button>
|
||||
<span class="view-switcher__counter">
|
||||
{props.following.filter((s) => 'name' in s).length}
|
||||
</span>
|
||||
</li>
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('topics')}>
|
||||
{t('Topics')}
|
||||
</button>
|
||||
<span class="view-switcher__counter">
|
||||
{props.following.filter((s) => 'title' in s).length}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<br />
|
||||
<div class={styles.listWrapper}>
|
||||
<div class="row">
|
||||
<div class="col-24">
|
||||
<For each={following()}>
|
||||
{(subscription) =>
|
||||
isAuthor(subscription) ? (
|
||||
<AuthorBadge author={subscription} />
|
||||
) : (
|
||||
<TopicBadge topic={subscription} />
|
||||
)
|
||||
}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</Modal>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<Show when={props.followers}>
|
||||
<Modal variant="medium" name="followers" onClose={handleCloseFollowModals} maxHeight>
|
||||
<>
|
||||
<h2>{t('Followers')}</h2>
|
||||
<div class={styles.listWrapper}>
|
||||
<div class="row">
|
||||
<div class="col-24">
|
||||
<For each={props.followers}>
|
||||
{(follower: Author) => <AuthorBadge author={follower} />}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</Modal>
|
||||
</Show>
|
||||
|
||||
<Show when={props.following}>
|
||||
<Modal variant="medium" name="following" onClose={handleCloseFollowModals} maxHeight>
|
||||
<>
|
||||
<h2>{t('Subscriptions')}</h2>
|
||||
<ul class="view-switcher">
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('all')}>
|
||||
{t('All')}
|
||||
</button>
|
||||
<span class="view-switcher__counter">{props.following.length}</span>
|
||||
</li>
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('users')}>
|
||||
{t('Users')}
|
||||
</button>
|
||||
<span class="view-switcher__counter">
|
||||
{props.following.filter((s) => 'name' in s).length}
|
||||
</span>
|
||||
</li>
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('topics')}>
|
||||
{t('Topics')}
|
||||
</button>
|
||||
<span class="view-switcher__counter">
|
||||
{props.following.filter((s) => 'title' in s).length}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<br />
|
||||
<div class={styles.listWrapper}>
|
||||
<div class="row">
|
||||
<div class="col-24">
|
||||
<For each={following()}>
|
||||
{(subscription) =>
|
||||
isAuthor(subscription) ? (
|
||||
<AuthorBadge author={subscription} />
|
||||
) : (
|
||||
<TopicBadge topic={subscription} />
|
||||
)
|
||||
}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</Modal>
|
||||
</Show>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,13 @@
|
|||
}
|
||||
|
||||
.authorHeader {
|
||||
border-bottom: 2px solid #000;
|
||||
border-bottom: 2px solid var(--default-color);
|
||||
margin-bottom: 2.4rem;
|
||||
margin-top: -3.2rem;
|
||||
padding-bottom: 4rem;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-top: -3.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ratingContainer {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user