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

Update AuthorBadge mobile view (#302)

Browse Source
This commit is contained in:
Ilya Y 2023-11-06 11:00:31 +03:00 committed by GitHub
parent 081c9c1734
commit 38ab3ddc4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Author/AuthorBadge/AuthorBadge.module.scss
View File

@ -11,6 +11,9 @@
margin-bottom: 0;
}
}
@include media-breakpoint-down(sm) {
flex-direction: column;
}
@include media-breakpoint-up(sm) {
margin-bottom: 2rem;
@ -20,12 +23,23 @@
text-align: left;
}
.basicInfo {
display: flex;
flex-direction: row;
align-items: center;
flex: 0 calc(100% - 5.2rem);
gap: 1rem;
@include media-breakpoint-down(sm) {
flex: 0 100%;
}
}
.info {
@include font-size(1.4rem);
border: none;
display: flex;
flex: 0 calc(100% - 5.2rem);
flex-direction: column;
line-height: 1.3;
margin-bottom: 1rem;
@ -60,6 +74,10 @@
margin-left: 5.2rem;
gap: 1rem;
@include media-breakpoint-down(sm) {
margin-left: 0;
}
@include media-breakpoint-up(sm) {
margin-left: 2rem;
}

62
src/components/Author/AuthorBadge/AuthorBadge.tsx
View File

@ -78,36 +78,38 @@ export const AuthorBadge = (props: Props) => {
return (
<div class={clsx(styles.AuthorBadge, { [styles.nameOnly]: props.nameOnly })}>
<Userpic
hasLink={true}
size={'M'}
name={props.author.name}
userpic={props.author.userpic}
slug={props.author.slug}
/>
<a href={`/author/${props.author.slug}`} class={styles.info}>
<div class={styles.name}>
<span>{props.author.name}</span>
</div>
<Show when={!props.nameOnly}>
<Switch
fallback={
<div class={styles.bio}>
{t('Registered since {date}', { date: formatDate(new Date(props.author.createdAt)) })}
</div>
}
>
<Match when={props.author.bio}>
<div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
</Match>
<Match when={props.author?.stat && props.author?.stat.shouts > 0}>
<div class={styles.bio}>
{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
</div>
</Match>
</Switch>
</Show>
</a>
<div class={styles.basicInfo}>
<Userpic
hasLink={true}
size={'M'}
name={props.author.name}
userpic={props.author.userpic}
slug={props.author.slug}
/>
<a href={`/author/${props.author.slug}`} class={styles.info}>
<div class={styles.name}>
<span>{props.author.name}</span>
</div>
<Show when={!props.nameOnly}>
<Switch
fallback={
<div class={styles.bio}>
{t('Registered since {date}', { date: formatDate(new Date(props.author.createdAt)) })}
</div>
}
>
<Match when={props.author.bio}>
<div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
</Match>
<Match when={props.author?.stat && props.author?.stat.shouts > 0}>
<div class={styles.bio}>
{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
</div>
</Match>
</Switch>
</Show>
</a>
</div>
<Show when={props.author.slug !== session()?.user.slug && !props.nameOnly}>
<div class={styles.actions}>
<Show