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; margin-bottom: 0;
} }
} }
@include media-breakpoint-down(sm) {
flex-direction: column;
}
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
margin-bottom: 2rem; margin-bottom: 2rem;
@ -20,12 +23,23 @@
text-align: left; 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 { .info {
@include font-size(1.4rem); @include font-size(1.4rem);
border: none; border: none;
display: flex; display: flex;
flex: 0 calc(100% - 5.2rem);
flex-direction: column; flex-direction: column;
line-height: 1.3; line-height: 1.3;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -60,6 +74,10 @@
margin-left: 5.2rem; margin-left: 5.2rem;
gap: 1rem; gap: 1rem;
@include media-breakpoint-down(sm) {
margin-left: 0;
}
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
margin-left: 2rem; margin-left: 2rem;
} }

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

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