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;
overflow-y: auto;
>:not(:first-child) {
margin-top: _.unit(4);
}
.header {
display: flex;
align-items: center;
@ -46,42 +50,43 @@
}
}
.content {
flex: 1;
display: flex;
flex-direction: column;
.tabBar {
width: 100%;
padding: _.unit(6);
margin-top: _.unit(6);
border-radius: 16px;
background-color: var(--color-layer-1);
height: 28px;
@include _.shimmering-animation;
}
.tabBar {
@include _.shimmering-animation;
width: 100%;
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 {
.content {
.introduction {
.title {
@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;
}
.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 * as styles from './index.module.scss';
@ -13,17 +17,24 @@ const DetailsSkeleton = () => (
<Spacer />
<div className={styles.button} />
</div>
<div className={styles.content}>
<div className={styles.tabBar} />
{Array.from({ length: 4 }).map((_, index) => (
// eslint-disable-next-line react/no-array-index-key
<div key={index} className={styles.field} />
))}
<Spacer />
<div className={styles.footer}>
<div className={styles.button} />
<div className={styles.tabBar} />
<Card className={classNames(formCardStyles.container, styles.content)}>
<div className={classNames(formCardStyles.introduction, styles.introduction)}>
<div className={styles.title} />
<div className={styles.description}>
{Array.from({ length: 2 }).map((_, index) => (
// eslint-disable-next-line react/no-array-index-key
<div key={index} className={styles.text} />
))}
</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>
);

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

@ -1,146 +1,127 @@
@use '@/scss/underscore' as _;
.container {
display: flex;
align-items: stretch;
min-width: 950px;
height: 100%;
> * {
display: flex;
flex-direction: column;
background: var(--color-layer-1);
border-radius: 16px;
.tabBar {
width: 100%;
height: 28px;
@include _.shimmering-animation;
}
.setup {
flex: 1;
margin-right: _.unit(3);
height: 100%;
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;
.content {
.card {
background-color: var(--color-layer-1);
border-radius: 16px;
padding: _.unit(6);
.info {
.title {
width: 113px;
height: 20px;
@include _.shimmering-animation;
}
.subtitle {
width: 177px;
height: 16px;
margin-top: _.unit(4);
@include _.shimmering-animation;
}
>:not(:first-child) {
margin-top: _.unit(6);
}
.button {
width: 104px;
height: 30px;
margin-left: _.unit(2.5);
.title {
@include _.shimmering-animation;
width: 80px;
height: 16px;
}
.field {
@include _.shimmering-animation;
width: 100%;
height: 44px;
}
&:not(:first-child) {
margin-top: _.unit(3);
}
}
.content {
background: var(--color-surface-variant);
.preview {
flex: 1;
.mobile {
.header {
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
height: 649px;
background: var(--color-surface);
margin: _.unit(10) auto 0;
width: 100%;
height: 103px;
padding: _.unit(6);
border-radius: 16px;
transform: scale(0.65);
transform-origin: top;
background-color: var(--color-layer-1);
border-radius: 16px 16px 0 0;
.logo {
width: 64px;
height: 64px;
margin-top: _.unit(16);
@include _.shimmering-animation;
}
.info {
.title {
width: 113px;
height: 20px;
@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;
.subtitle {
width: 177px;
height: 16px;
margin-top: _.unit(4);
@include _.shimmering-animation;
}
}
.button {
width: 100%;
height: 36px;
margin-top: _.unit(10);
width: 104px;
height: 30px;
margin-left: _.unit(2.5);
@include _.shimmering-animation;
}
}
.social {
width: 180px;
height: 24px;
margin-top: _.unit(3);
@include _.shimmering-animation;
.previewContent {
background: var(--color-surface-variant);
padding: _.unit(6);
border-radius: 0 0 16px 16px;
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 * as pageStyles from '../../index.module.scss';
import * as styles from './index.module.scss';
const Skeleton = () => {
return (
<div className={styles.container}>
<div className={styles.setup}>
<div className={styles.title} />
<div className={styles.subtitle} />
<div className={styles.tabs} />
<div className={styles.field} />
<div className={styles.field} />
<div className={styles.field} />
<div className={styles.field} />
<Spacer />
<div className={styles.footer}>
<div className={styles.button} />
</div>
</div>
<div className={styles.preview}>
<div className={styles.header}>
<div className={styles.info}>
<div className={styles.title} />
<div className={styles.subtitle} />
<div className={classNames(pageStyles.container, styles.container)}>
<CardTitle
title="sign_in_exp.title"
subtitle="sign_in_exp.description"
className={pageStyles.cardTitle}
/>
<div className={classNames(pageStyles.tabs, styles.tabBar)} />
<div className={classNames(pageStyles.content, styles.content)}>
<div className={pageStyles.contentTop}>
<div className={pageStyles.form}>
<div className={styles.card}>
<div className={styles.title} />
<div className={styles.field} />
<div className={styles.field} />
</div>
<div className={styles.card}>
<div className={styles.title} />
<div className={styles.field} />
<div className={styles.field} />
</div>
</div>
<Spacer />
<div className={styles.button} />
<div className={styles.button} />
</div>
<div className={styles.content}>
<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 className={pageStyles.preview}>
<div className={styles.preview}>
<div className={styles.header}>
<div className={styles.info}>
<div className={styles.title} />
<div className={styles.subtitle} />
</div>
<Spacer />
<div className={styles.button} />
<div className={styles.button} />
</div>
<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>