discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Fixed author page controls visibiity

Browse Source
This commit is contained in:
kvakazyambra 2023-10-17 01:14:43 +03:00
parent b22e27bce6
commit ef281b0e31
2 changed files with 70 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Author/AuthorCard/AuthorCard.module.scss
View File

@ -426,6 +426,10 @@
} }
} }
.shareControl {
display: inline-block;
}
.buttonSubscribe { .buttonSubscribe {
align-items: center; align-items: center;
aspect-ratio: 1/1; aspect-ratio: 1/1;

131
src/components/Author/AuthorCard/AuthorCard.tsx
View File

@ -208,76 +208,57 @@ export const AuthorCard = (props: Props) => {
} }
> >
<div class={styles.subscribersContainer}> <div class={styles.subscribersContainer}>
<Switch> <Show when={props.followers && props.followers.length > 0}>
<Match when={props.followers && props.followers.length > 0 && !props.isCurrentUser}> <a href="?modal=followers" class={styles.subscribers}>
<a href="?modal=followers" class={styles.subscribers}> <For each={props.followers.slice(0, 3)}>
<For each={props.followers.slice(0, 3)}> {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
{(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />} </For>
</For> <div class={styles.subscribersCounter}>
<div class={styles.subscribersCounter}> {t('SubscriberWithCount', { count: props.followers.length })}
{t('SubscriberWithCount', { count: props.followers.length })} </div>
</div> </a>
</a> </Show>
</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> <Show when={props.following && props.following.length > 0}>
<Match when={!props.isCurrentUser && props.following && props.following.length > 0}> <a href="?modal=following" class={styles.subscribers}>
<a href="?modal=following" class={styles.subscribers}> <For each={props.following.slice(0, 3)}>
<For each={props.following.slice(0, 3)}> {(f) => {
{(f) => { if ('name' in f) {
if ('name' in f) { return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} /> } else if ('title' in f) {
} else if ('title' in f) { return <Userpic name={f.title} userpic={f.pic} class={styles.userpic} />
return <Userpic name={f.title} userpic={f.pic} class={styles.userpic} /> }
} return null
return null }}
}} </For>
</For> <div class={styles.subscribersCounter}>
<div class={styles.subscribersCounter}> {t('SubscriptionWithCount', { count: props?.following.length ?? 0 })}
{t('SubscriptionWithCount', { count: props?.following.length ?? 0 })} </div>
</div> </a>
</a> </Show>
</Match>
<Match when={props.isCurrentUser && props.following && props.following.length > 0}>
<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> </div>
</Show> </Show>
</div> </div>
<ShowOnlyOnClient> <ShowOnlyOnClient>
<Show when={isSessionLoaded() && props.author.links}> <Show when={isSessionLoaded()}>
<div class={styles.authorSubscribeSocial}> <Show when={props.author.links && props.author.links.length}>
<For each={props.author.links}> <div class={styles.authorSubscribeSocial}>
{(link) => ( <For each={props.author.links}>
<a {(link) => (
class={styles.socialLink} <a
href={link.startsWith('http') ? link : `https://${link}`} class={styles.socialLink}
target="_blank" href={link.startsWith('http') ? link : `https://${link}`}
rel="nofollow noopener" target="_blank"
> rel="nofollow noopener"
<span class={styles.authorSubscribeSocialLabel}> >
{link.startsWith('http') ? link : `https://${link}`} <span class={styles.authorSubscribeSocialLabel}>
</span> {link.startsWith('http') ? link : `https://${link}`}
</a> </span>
)} </a>
</For> )}
</div> </For>
</div>
</Show>
<Show when={canFollow()}> <Show when={canFollow()}>
<div class={styles.authorSubscribe}> <div class={styles.authorSubscribe}>
<Show <Show
@ -362,6 +343,26 @@ export const AuthorCard = (props: Props) => {
</Show> </Show>
</div> </div>
</Show> </Show>
<Show when={props.isCurrentUser}>
<div class={styles.authorSubscribe}>
<Button
variant="secondary"
onClick={() => redirectPage(router, 'profileSettings')}
value={t('Edit profile')}
class={styles.button}
/>
<SharePopup
containerCssClass={styles.shareControl}
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')} />}
/>
</div>
</Show>
</Show> </Show>
</ShowOnlyOnClient> </ShowOnlyOnClient>
<Show when={props.followers}> <Show when={props.followers}>