mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-09-30 00:41:09 +00:00
Update featured author layout
This commit is contained in:
parent
de05c5d0a1
commit
4524f7d4fc
@ -1,7 +1,7 @@
|
|||||||
.authorSubscribeCard {
|
.authorSubscribeCard {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: var(--background-header-input);
|
background: var(--background-header-input);
|
||||||
width: 300px;
|
width: 300px;
|
||||||
@ -14,6 +14,7 @@
|
|||||||
.userData {
|
.userData {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@ -49,9 +50,9 @@
|
|||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 8px;
|
||||||
|
|
||||||
>button {
|
>button {
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
@ -60,6 +61,7 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
padding-inline: 16px;
|
padding-inline: 16px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -91,7 +91,7 @@ const AuthoreSubscribe: Component<{
|
|||||||
>
|
>
|
||||||
<div class={styles.authorSubscribeCard}>
|
<div class={styles.authorSubscribeCard}>
|
||||||
<div class={styles.userInfo}>
|
<div class={styles.userInfo}>
|
||||||
<Avatar user={author()} />
|
<Avatar user={author()} size="ml" />
|
||||||
<div class={styles.userData}>
|
<div class={styles.userData}>
|
||||||
<div class={styles.userName}>
|
<div class={styles.userName}>
|
||||||
{userName(author())}
|
{userName(author())}
|
||||||
|
@ -164,6 +164,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mlAvatar {
|
||||||
|
@include avatar;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
|
||||||
|
.missingBack {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconBackground {
|
||||||
|
@include iconBackground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.largeAvatar {
|
.largeAvatar {
|
||||||
@include avatar;
|
@include avatar;
|
||||||
width: 72px;
|
width: 72px;
|
||||||
@ -290,6 +305,13 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mlMissing {
|
||||||
|
@include missing;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.largeMissing {
|
.largeMissing {
|
||||||
@include missing;
|
@include missing;
|
||||||
width: 68px;
|
width: 68px;
|
||||||
|
@ -11,7 +11,7 @@ import styles from './Avatar.module.scss';
|
|||||||
|
|
||||||
const Avatar: Component<{
|
const Avatar: Component<{
|
||||||
src?: string | undefined,
|
src?: string | undefined,
|
||||||
size?: "micro" | "xxs" | "xss" | "xs" | "vvs" | "vs" | "sm" | "md" | "lg" | "xl" | "xxl",
|
size?: "micro" | "xxs" | "xss" | "xs" | "vvs" | "vs" | "sm" | "md" | "ml" | "lg" | "xl" | "xxl",
|
||||||
user?: PrimalUser,
|
user?: PrimalUser,
|
||||||
highlightBorder?: boolean,
|
highlightBorder?: boolean,
|
||||||
id?: string,
|
id?: string,
|
||||||
@ -34,6 +34,7 @@ const Avatar: Component<{
|
|||||||
vs: styles.vsAvatar,
|
vs: styles.vsAvatar,
|
||||||
sm: styles.smallAvatar,
|
sm: styles.smallAvatar,
|
||||||
md: styles.midAvatar,
|
md: styles.midAvatar,
|
||||||
|
ml: styles.mlAvatar,
|
||||||
lg: styles.largeAvatar,
|
lg: styles.largeAvatar,
|
||||||
xl: styles.extraLargeAvatar,
|
xl: styles.extraLargeAvatar,
|
||||||
xxl: styles.xxlAvatar,
|
xxl: styles.xxlAvatar,
|
||||||
@ -48,6 +49,7 @@ const Avatar: Component<{
|
|||||||
vs: styles.vsMissing,
|
vs: styles.vsMissing,
|
||||||
sm: styles.smallMissing,
|
sm: styles.smallMissing,
|
||||||
md: styles.midMissing,
|
md: styles.midMissing,
|
||||||
|
ml: styles.mlMissing,
|
||||||
lg: styles.largeMissing,
|
lg: styles.largeMissing,
|
||||||
xl: styles.extraLargeMissing,
|
xl: styles.extraLargeMissing,
|
||||||
xxl: styles.xxlMissing,
|
xxl: styles.xxlMissing,
|
||||||
|
Loading…
Reference in New Issue
Block a user