Fixed author badge in the following modal

This commit is contained in:
kvakazyambra 2024-04-30 18:14:10 +03:00
parent e1484e0aa9
commit 12ca2b9a97
4 changed files with 13 additions and 11 deletions

View File

@ -27,6 +27,7 @@ type Props = {
inviteView?: boolean
onInvite?: (id: number) => void
selected?: boolean
subscriptionsMode?: boolean
}
export const AuthorBadge = (props: Props) => {
const { mediaMatches } = useMediaQuery()
@ -114,7 +115,7 @@ export const AuthorBadge = (props: Props) => {
<div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
</Match>
</Switch>
<Show when={props.author?.stat}>
<Show when={props.author?.stat && !props.subscriptionsMode}>
<div class={styles.bio}>
<Show when={props.author?.stat.shouts > 0}>
<div>{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}</div>

View File

@ -312,7 +312,7 @@ export const AuthorCard = (props: Props) => {
<For each={authorSubs()}>
{(subscription) =>
isAuthor(subscription) ? (
<AuthorBadge author={subscription} />
<AuthorBadge author={subscription} subscriptionsMode={true} />
) : (
<TopicBadge topic={subscription} subscriptionsMode={true} />
)

View File

@ -68,7 +68,7 @@
@include font-size(1.6rem);
line-height: 1.4;
margin: 0.8rem 0;
-webkit-line-clamp: 3;
-webkit-line-clamp: 2;
}
}
@ -111,7 +111,7 @@
.description {
color: var(--black-400);
@include font-size(1.4rem);
@include font-size(1.2rem);
font-weight: 500;
margin: 0;
}

View File

@ -69,14 +69,15 @@ export const TopicBadge = (props: Props) => {
<a href={`/topic/${props.topic.slug}`} class={styles.info}>
<span class={styles.title}>{title()}</span>
<Show when={props.topic.body}>
<div innerHTML={props.topic.body} class={clsx('text-truncate', styles.description)} />
</Show>
<Show when={props.subscriptionsMode && !props.topic.body}>
<Show
when={props.topic.body}
fallback={
<div class={styles.description}>
{t('PublicationsWithCount', { count: props.topic?.stat?.shouts ?? 0 })}
</div>
}
>
<div innerHTML={props.topic.body} class={clsx('text-truncate', styles.description)} />
</Show>
</a>
</div>