Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00
Code Issues Activity

refactor(console): update loading skeletons (#2660)

Browse source
This commit is contained in:
Xiao Yijun 2022-12-28 14:22:35 +08:00 • committed by GitHub
parent eef8c0c091
commit fd4bd8a2df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 203 additions and 191 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
packages/console/src/components/DetailsSkeleton/index.module.scss
View file

@ -6,6 +6,10 @@
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
>:not(:first-child) {
margin-top: _.unit(4);
}
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
@ -46,42 +50,43 @@
} }
} }
.content { .tabBar {
flex: 1;
display: flex;
flex-direction: column;
width: 100%; width: 100%;
padding: _.unit(6); height: 28px;
margin-top: _.unit(6); @include _.shimmering-animation;
border-radius: 16px; }
background-color: var(--color-layer-1);
.tabBar { .content {
@include _.shimmering-animation; .introduction {
width: 100%; .title {
height: 25px;
margin-bottom: _.unit(13.5);
}
.field {
@include _.shimmering-animation;
width: 566px;
height: 44px;
}
.field + .field {
margin-top: _.unit(6);
}
.footer {
display: flex;
justify-content: end;
.button {
@include _.shimmering-animation; @include _.shimmering-animation;
width: 194px; height: 16px;
width: 80px;
}
.description {
.text {
@include _.shimmering-animation;
width: 100%;
height: 10px;
}
.text + .text {
margin-top: _.unit(2);
}
}
}
.form {
.field {
@include _.shimmering-animation;
width: 100%;
height: 44px; height: 44px;
} }
.field + .field {
margin-top: _.unit(6);
}
} }
} }
} }

31
packages/console/src/components/DetailsSkeleton/index.tsx
View file

@ -1,3 +1,7 @@
import classNames from 'classnames';
import Card from '@/components/Card';
import * as formCardStyles from '@/components/FormCard/index.module.scss';
import Spacer from '@/components/Spacer'; import Spacer from '@/components/Spacer';
import * as styles from './index.module.scss'; import * as styles from './index.module.scss';
@ -13,17 +17,24 @@ const DetailsSkeleton = () => (
<Spacer /> <Spacer />
<div className={styles.button} /> <div className={styles.button} />
</div> </div>
<div className={styles.content}> <div className={styles.tabBar} />
<div className={styles.tabBar} /> <Card className={classNames(formCardStyles.container, styles.content)}>
{Array.from({ length: 4 }).map((_, index) => ( <div className={classNames(formCardStyles.introduction, styles.introduction)}>
// eslint-disable-next-line react/no-array-index-key <div className={styles.title} />
<div key={index} className={styles.field} /> <div className={styles.description}>
))} {Array.from({ length: 2 }).map((_, index) => (
<Spacer /> // eslint-disable-next-line react/no-array-index-key
<div className={styles.footer}> <div key={index} className={styles.text} />
<div className={styles.button} /> ))}
</div>
</div> </div>
</div> <div className={classNames(formCardStyles.form, styles.form)}>
{Array.from({ length: 4 }).map((_, index) => (
// eslint-disable-next-line react/no-array-index-key
<div key={index} className={styles.field} />
))}
</div>
</Card>
</div> </div>
); );

219
packages/console/src/pages/SignInExperience/components/Skeleton/index.module.scss
View file

@ -1,146 +1,127 @@
@use '@/scss/underscore' as _; @use '@/scss/underscore' as _;
.container { .container {
display: flex; .tabBar {
align-items: stretch; width: 100%;
min-width: 950px; height: 28px;
height: 100%; @include _.shimmering-animation;
> * {
display: flex;
flex-direction: column;
background: var(--color-layer-1);
border-radius: 16px;
} }
.setup { .content {
flex: 1; .card {
margin-right: _.unit(3); background-color: var(--color-layer-1);
height: 100%; border-radius: 16px;
padding: _.unit(6);
.title {
width: 113px;
height: 20px;
@include _.shimmering-animation;
}
.subtitle {
width: 177px;
height: 16px;
margin-top: _.unit(4);
@include _.shimmering-animation;
}
.tabs {
width: 498px;
height: 25px;
margin: _.unit(6) 0 _.unit(15.5);
@include _.shimmering-animation;
}
.field {
width: 100%;
height: 44px;
margin-top: _.unit(6);
@include _.shimmering-animation;
}
.footer {
display: flex;
width: 100%;
justify-content: right;
.button {
width: 194px;
height: 44px;
@include _.shimmering-animation;
}
}
}
.preview {
width: 480px;
overflow: hidden;
.header {
display: flex;
width: 100%;
height: 103px;
padding: _.unit(6); padding: _.unit(6);
.info { >:not(:first-child) {
.title { margin-top: _.unit(6);
width: 113px;
height: 20px;
@include _.shimmering-animation;
}
.subtitle {
width: 177px;
height: 16px;
margin-top: _.unit(4);
@include _.shimmering-animation;
}
} }
.button { .title {
width: 104px;
height: 30px;
margin-left: _.unit(2.5);
@include _.shimmering-animation; @include _.shimmering-animation;
width: 80px;
height: 16px;
}
.field {
@include _.shimmering-animation;
width: 100%;
height: 44px;
}
&:not(:first-child) {
margin-top: _.unit(3);
} }
} }
.content { .preview {
background: var(--color-surface-variant); flex: 1;
.mobile { .header {
display: flex; display: flex;
flex-direction: column; width: 100%;
align-items: center; height: 103px;
width: 300px;
height: 649px;
background: var(--color-surface);
margin: _.unit(10) auto 0;
padding: _.unit(6); padding: _.unit(6);
border-radius: 16px; background-color: var(--color-layer-1);
transform: scale(0.65); border-radius: 16px 16px 0 0;
transform-origin: top;
.logo { .info {
width: 64px; .title {
height: 64px; width: 113px;
margin-top: _.unit(16); height: 20px;
@include _.shimmering-animation; @include _.shimmering-animation;
} }
.slogan { .subtitle {
width: 177px; width: 177px;
height: 16px; height: 16px;
margin: _.unit(3) 0 _.unit(10); margin-top: _.unit(4);
@include _.shimmering-animation; @include _.shimmering-animation;
} }
.field {
width: 100%;
height: 36px;
margin-top: _.unit(3);
@include _.shimmering-animation;
} }
.button { .button {
width: 100%; width: 104px;
height: 36px; height: 30px;
margin-top: _.unit(10); margin-left: _.unit(2.5);
@include _.shimmering-animation; @include _.shimmering-animation;
} }
}
.social { .previewContent {
width: 180px; background: var(--color-surface-variant);
height: 24px; padding: _.unit(6);
margin-top: _.unit(3); border-radius: 0 0 16px 16px;
@include _.shimmering-animation; height: 450px;
overflow: hidden;
.mobile {
display: flex;
flex-direction: column;
align-items: center;
width: 375px;
height: 667px;
background: var(--color-surface);
margin: 0 auto;
padding: _.unit(6);
border-radius: 16px;
transform: scale(0.6);
transform-origin: top;
.logo {
width: 64px;
height: 64px;
margin-top: _.unit(16);
@include _.shimmering-animation;
}
.slogan {
width: 177px;
height: 16px;
margin: _.unit(3) 0 _.unit(10);
@include _.shimmering-animation;
}
.field {
width: 100%;
height: 36px;
margin-top: _.unit(3);
@include _.shimmering-animation;
}
.button {
width: 100%;
height: 36px;
margin-top: _.unit(10);
@include _.shimmering-animation;
}
.social {
width: 180px;
height: 24px;
margin-top: _.unit(3);
@include _.shimmering-animation;
}
} }
} }
} }

77
packages/console/src/pages/SignInExperience/components/Skeleton/index.tsx
View file

@ -1,41 +1,56 @@
import classNames from 'classnames';
import CardTitle from '@/components/CardTitle';
import Spacer from '@/components/Spacer'; import Spacer from '@/components/Spacer';
import * as pageStyles from '../../index.module.scss';
import * as styles from './index.module.scss'; import * as styles from './index.module.scss';
const Skeleton = () => { const Skeleton = () => {
return ( return (
<div className={styles.container}> <div className={classNames(pageStyles.container, styles.container)}>
<div className={styles.setup}> <CardTitle
<div className={styles.title} /> title="sign_in_exp.title"
<div className={styles.subtitle} /> subtitle="sign_in_exp.description"
<div className={styles.tabs} /> className={pageStyles.cardTitle}
<div className={styles.field} /> />
<div className={styles.field} /> <div className={classNames(pageStyles.tabs, styles.tabBar)} />
<div className={styles.field} /> <div className={classNames(pageStyles.content, styles.content)}>
<div className={styles.field} /> <div className={pageStyles.contentTop}>
<Spacer /> <div className={pageStyles.form}>
<div className={styles.footer}> <div className={styles.card}>
<div className={styles.button} /> <div className={styles.title} />
</div> <div className={styles.field} />
</div> <div className={styles.field} />
<div className={styles.preview}> </div>
<div className={styles.header}> <div className={styles.card}>
<div className={styles.info}> <div className={styles.title} />
<div className={styles.title} /> <div className={styles.field} />
<div className={styles.subtitle} /> <div className={styles.field} />
</div>
</div> </div>
<Spacer /> <div className={pageStyles.preview}>
<div className={styles.button} /> <div className={styles.preview}>
<div className={styles.button} /> <div className={styles.header}>
</div> <div className={styles.info}>
<div className={styles.content}> <div className={styles.title} />
<div className={styles.mobile}> <div className={styles.subtitle} />
<div className={styles.logo} /> </div>
<div className={styles.slogan} /> <Spacer />
<div className={styles.field} /> <div className={styles.button} />
<div className={styles.field} /> <div className={styles.button} />
<div className={styles.button} /> </div>
<div className={styles.social} /> <div className={styles.previewContent}>
<div className={styles.mobile}>
<div className={styles.logo} />
<div className={styles.slogan} />
<div className={styles.field} />
<div className={styles.field} />
<div className={styles.button} />
<div className={styles.social} />
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>