Author page fixes
This commit is contained in:
parent
50baf5b60f
commit
b71c6a7515
|
|
@ -14,10 +14,13 @@
|
|||
}
|
||||
|
||||
.authorDetails {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.authorDetailsShrinked {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
|
@ -62,7 +65,7 @@
|
|||
|
||||
.authorAbout {
|
||||
color: rgb(0 0 0 / 60%);
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.4;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
|
@ -442,11 +445,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
.subscribersContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.4rem;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.subscribers {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
margin-right: 3rem;
|
||||
vertical-align: top;
|
||||
align-items: center;
|
||||
|
||||
.userpic {
|
||||
background: var(--background-color);
|
||||
|
|
@ -459,7 +470,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.listWrapper {
|
||||
overflow: auto;
|
||||
max-height: 70vh;
|
||||
.subscribersCounter {
|
||||
margin-left: -0.6rem;
|
||||
}
|
||||
|
||||
.listWrapper {
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ type AuthorCardProps = {
|
|||
class?: string
|
||||
followers?: Author[]
|
||||
subscriptions?: Array<Author | Topic>
|
||||
showPublicationsCounter?: boolean
|
||||
}
|
||||
|
||||
function isAuthor(value: Author | Topic): value is Author {
|
||||
|
|
@ -115,128 +116,168 @@ export const AuthorCard = (props: AuthorCardProps) => {
|
|||
})
|
||||
|
||||
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}
|
||||
class={styles.circlewrap}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div class="col-md-5">
|
||||
<Userpic
|
||||
name={props.author.name}
|
||||
userpic={props.author.userpic}
|
||||
hasLink={props.hasLink}
|
||||
isBig={props.isAuthorPage}
|
||||
isAuthorsList={props.isAuthorsList}
|
||||
isFeedMode={props.isFeedMode}
|
||||
class={styles.circlewrap}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<>
|
||||
<div
|
||||
class={styles.authorDetails}
|
||||
class={clsx(styles.author, props.class)}
|
||||
classList={{
|
||||
'col-md-15 col-xl-13': props.isAuthorPage,
|
||||
[styles.authorDetailsShrinked]: props.isAuthorPage
|
||||
['row']: props.isAuthorPage,
|
||||
[styles.authorPage]: props.isAuthorPage,
|
||||
[styles.authorComments]: props.isComments,
|
||||
[styles.authorsListItem]: props.isAuthorsList,
|
||||
[styles.feedMode]: props.isFeedMode,
|
||||
[styles.nowrapView]: props.isNowrap
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
{/*TODO: implement plurals by i18n*/}
|
||||
<Show when={props.author.bio} fallback={<div>{props.author.stat?.shouts} публикаций</div>}>
|
||||
<div
|
||||
class={styles.authorAbout}
|
||||
classList={{ 'text-truncate': props.truncateBio }}
|
||||
innerHTML={props.author.bio}
|
||||
<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}
|
||||
class={styles.circlewrap}
|
||||
/>
|
||||
</Show>
|
||||
}
|
||||
>
|
||||
<div class="col-md-5">
|
||||
<Userpic
|
||||
name={props.author.name}
|
||||
userpic={props.author.userpic}
|
||||
hasLink={props.hasLink}
|
||||
isBig={props.isAuthorPage}
|
||||
isAuthorsList={props.isAuthorsList}
|
||||
isFeedMode={props.isFeedMode}
|
||||
class={styles.circlewrap}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={props.followers && props.followers.length > 0}>
|
||||
<div class={styles.subscribers} onClick={() => showModal('followers')}>
|
||||
<For each={props.followers.slice(0, 3)}>
|
||||
{(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
|
||||
</For>
|
||||
<div>
|
||||
{props.followers.length}
|
||||
{getNumeralsDeclension(props.followers.length, [
|
||||
t('subscriber'),
|
||||
t('subscriber_rp'),
|
||||
t('subscribers')
|
||||
])}
|
||||
</div>
|
||||
<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}
|
||||
</a>
|
||||
)}
|
||||
>
|
||||
<span class={clsx({ [styles.authorName]: !props.hasLink })}>{name()}</span>
|
||||
</ConditionalWrapper>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={props.subscriptions && props.subscriptions.length > 0}>
|
||||
<div>
|
||||
<div class={styles.subscribers} onClick={() => showModal('subscriptions')}>
|
||||
<For each={props.subscriptions.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>
|
||||
{props.subscriptions.length}
|
||||
{getNumeralsDeclension(props.subscriptions.length, [
|
||||
t('subscription'),
|
||||
t('subscription_rp'),
|
||||
t('subscriptions')
|
||||
])}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<ShowOnlyOnClient>
|
||||
<Show when={isSessionLoaded()}>
|
||||
<Show when={canFollow()}>
|
||||
<div class={styles.authorSubscribe}>
|
||||
<Show when={!props.noSocialButtons && !props.hideWriteButton}>
|
||||
<div class={styles.authorSubscribeSocial}>
|
||||
<For each={props.author.links}>{(link) => <a href={link} />}</For>
|
||||
{/*TODO: implement plurals by i18n*/}
|
||||
<Show
|
||||
when={props.author.bio}
|
||||
fallback={
|
||||
props.showPublicationsCounter ? (
|
||||
<div class={styles.authorAbout}>{props.author.stat?.shouts} публикаций</div>
|
||||
) : (
|
||||
''
|
||||
)
|
||||
}
|
||||
>
|
||||
<div
|
||||
class={styles.authorAbout}
|
||||
classList={{ 'text-truncate': props.truncateBio }}
|
||||
innerHTML={props.author.bio}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<Show
|
||||
when={
|
||||
(props.followers && props.followers.length > 0) ||
|
||||
(props.subscriptions && props.subscriptions.length > 0)
|
||||
}
|
||||
>
|
||||
<div class={styles.subscribersContainer}>
|
||||
<Show when={props.followers && props.followers.length > 0}>
|
||||
<div class={styles.subscribers} onClick={() => showModal('followers')}>
|
||||
<For each={props.followers.slice(0, 3)}>
|
||||
{(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
|
||||
</For>
|
||||
<div class={styles.subscribersCounter}>
|
||||
{props.followers.length}
|
||||
{getNumeralsDeclension(props.followers.length, [
|
||||
t('subscriber'),
|
||||
t('subscriber_rp'),
|
||||
t('subscribers')
|
||||
])}
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={props.subscriptions && props.subscriptions.length > 0}>
|
||||
<div class={styles.subscribers} onClick={() => showModal('subscriptions')}>
|
||||
<For each={props.subscriptions.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}>
|
||||
{props.subscriptions.length}
|
||||
{getNumeralsDeclension(props.subscriptions.length, [
|
||||
t('subscription'),
|
||||
t('subscription_rp'),
|
||||
t('subscriptions')
|
||||
])}
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<ShowOnlyOnClient>
|
||||
<Show when={isSessionLoaded()}>
|
||||
<Show when={canFollow()}>
|
||||
<div class={styles.authorSubscribe}>
|
||||
<Show when={!props.noSocialButtons && !props.hideWriteButton}>
|
||||
<div class={styles.authorSubscribeSocial}>
|
||||
<For each={props.author.links}>{(link) => <a href={link} />}</For>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show
|
||||
when={subscribed()}
|
||||
fallback={
|
||||
<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>
|
||||
}
|
||||
>
|
||||
<button
|
||||
onClick={handleSubscribe}
|
||||
onClick={() => subscribe(false)}
|
||||
class={clsx('button', styles.button)}
|
||||
classList={{
|
||||
[styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
|
||||
|
|
@ -248,94 +289,82 @@ export const AuthorCard = (props: AuthorCardProps) => {
|
|||
disabled={isSubscribing()}
|
||||
>
|
||||
<Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
|
||||
<Icon name="author-subscribe" class={styles.icon} />
|
||||
<Icon name="author-unsubscribe" class={styles.icon} />
|
||||
</Show>
|
||||
<Show when={props.isTextButton || props.isAuthorPage}>
|
||||
<span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
|
||||
{t('Follow')}
|
||||
<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>
|
||||
}
|
||||
>
|
||||
<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>
|
||||
|
||||
<Show when={!props.hideWriteButton}>
|
||||
<button
|
||||
class={styles.button}
|
||||
classList={{
|
||||
[styles.buttonSubscribe]: !props.isAuthorsList,
|
||||
'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 when={!props.hideWriteButton}>
|
||||
<button
|
||||
class={styles.button}
|
||||
classList={{
|
||||
[styles.buttonSubscribe]: !props.isAuthorsList,
|
||||
'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>
|
||||
</Show>
|
||||
</ShowOnlyOnClient>
|
||||
</ShowOnlyOnClient>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show when={props.followers}>
|
||||
<Modal variant="wide" name="followers">
|
||||
<>
|
||||
<h2>{t('Followers')}</h2>
|
||||
<div class={styles.listWrapper}>
|
||||
<div class="row">
|
||||
<For each={props.followers}>
|
||||
{(follower: Author) => (
|
||||
<div class="col-xs-12">
|
||||
<AuthorCard author={follower} hideWriteButton={true} hasLink={true} />
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
<div class="col-24">
|
||||
<For each={props.followers}>
|
||||
{(follower: Author) => (
|
||||
<AuthorCard
|
||||
author={follower}
|
||||
hideWriteButton={true}
|
||||
hasLink={true}
|
||||
isTextButton={true}
|
||||
liteButtons={true}
|
||||
truncateBio={true}
|
||||
showPublicationsCounter={true}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</Modal>
|
||||
</Show>
|
||||
|
||||
<Show when={props.subscriptions}>
|
||||
<Modal variant="wide" name="subscriptions">
|
||||
<>
|
||||
|
|
@ -357,29 +386,32 @@ export const AuthorCard = (props: AuthorCardProps) => {
|
|||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<br />
|
||||
<div class={styles.listWrapper}>
|
||||
<div class="row">
|
||||
<For each={subscriptions()}>
|
||||
{(subscription: Author | Topic) => (
|
||||
<div class="col-xs-12">
|
||||
{isAuthor(subscription) ? (
|
||||
<div class="col-24">
|
||||
<For each={subscriptions()}>
|
||||
{(subscription: Author | Topic) =>
|
||||
isAuthor(subscription) ? (
|
||||
<AuthorCard
|
||||
author={subscription}
|
||||
hideWriteButton={true}
|
||||
hasLink={true}
|
||||
isTextButton={true}
|
||||
truncateBio={true}
|
||||
showPublicationsCounter={true}
|
||||
/>
|
||||
) : (
|
||||
<TopicCard compact isTopicInRow showDescription topic={subscription} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
<TopicCard compact isTopicInRow showDescription isCardMode topic={subscription} />
|
||||
)
|
||||
}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</Modal>
|
||||
</Show>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -398,8 +398,10 @@
|
|||
padding: 0 2.4rem;
|
||||
width: 100%;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-top: 100%;
|
||||
@include media-breakpoint-down(xl) {
|
||||
aspect-ratio: auto;
|
||||
height: 100%;
|
||||
padding-top: 30%;
|
||||
}
|
||||
|
||||
&.swiper-slide {
|
||||
|
|
@ -450,6 +452,12 @@
|
|||
justify-content: end;
|
||||
padding: 2.4rem;
|
||||
z-index: 1;
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.shoutCardCover {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 0;
|
||||
|
||||
button {
|
||||
margin-top: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user