Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

fix(console): detail top card spacing (#598)

Browse source
This commit is contained in:
Xiao Yijun 2022-04-22 17:12:42 +08:00 committed by GitHub
parent 2a03b68865
commit bfececcfe5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 46 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/console/src/pages/ApiResourceDetails/index.module.scss
View file

@ -12,6 +12,10 @@
.info {
display: flex;
.imagePlaceholder {
margin-left: _.unit(2);
}
.meta {
margin-left: _.unit(6);
display: flex;
@ -22,6 +26,10 @@
font: var(--font-title-large);
color: var(--color-text);
}
.copy {
padding: _.unit(1) _.unit(2);
}
}
}

6
packages/console/src/pages/ApiResourceDetails/index.tsx
View file

@ -87,10 +87,12 @@ const ApiResourceDetails = () => {
<>
<Card className={styles.header}>
<div className={styles.info}>
<ImagePlaceholder size={76} borderRadius={16} />
<div className={styles.imagePlaceholder}>
<ImagePlaceholder size={60} borderRadius={16} />
</div>
<div className={styles.meta}>
<div className={styles.name}>{data.name}</div>
<CopyToClipboard value={data.indicator} />
<CopyToClipboard value={data.indicator} className={styles.copy} />
</div>
</div>
<div className={styles.operations}>

9
packages/console/src/pages/ApplicationDetails/index.module.scss
View file

@ -29,7 +29,11 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: _.unit(8);
padding: _.unit(6);
.imagePlaceholder {
margin-left: _.unit(2);
}
> *:not(:first-child) {
margin-left: _.unit(6);
@ -55,7 +59,6 @@
.details {
display: flex;
align-items: center;
margin-top: _.unit(2);
> :not(:first-child) {
margin-left: _.unit(2);
@ -81,7 +84,7 @@
}
.copy {
padding: _.unit(1) _.unit(4) _.unit(1) _.unit(2);
padding: _.unit(1) _.unit(2);
}
}
}

4
packages/console/src/pages/ApplicationDetails/index.tsx
View file

@ -188,7 +188,9 @@ const ApplicationDetails = () => {
{data && oidcConfig && (
<>
<Card className={styles.header}>
<ImagePlaceholder size={76} borderRadius={16} />
<div className={styles.imagePlaceholder}>
<ImagePlaceholder size={60} borderRadius={16} />
</div>
<div className={styles.metadata}>
<div className={styles.name}>{data.name}</div>
<div className={styles.details}>

13
packages/console/src/pages/ConnectorDetails/index.module.scss
View file

@ -5,7 +5,7 @@
}
.header {
padding: _.unit(8);
padding: _.unit(6);
display: flex;
align-items: center;
justify-content: space-between;
@ -14,10 +14,15 @@
margin-left: _.unit(6);
}
.imagePlaceholder {
margin-left: _.unit(2);
}
.logo {
width: _.unit(19);
height: _.unit(19);
border-radius: _.unit(4);
display: block;
width: 60px;
height: 60px;
border-radius: 16px;
}
.operations {

12
packages/console/src/pages/ConnectorDetails/index.tsx
View file

@ -108,11 +108,13 @@ const ConnectorDetails = () => {
{error && <div>{`error occurred: ${error.body.message}`}</div>}
{data && (
<Card className={styles.header}>
{data.metadata.logo.startsWith('http') ? (
<img src={data.metadata.logo} className={styles.logo} />
) : (
<ImagePlaceholder size={76} borderRadius={16} />
)}
<div className={styles.imagePlaceholder}>
{data.metadata.logo.startsWith('http') ? (
<img src={data.metadata.logo} className={styles.logo} />
) : (
<ImagePlaceholder size={60} borderRadius={16} />
)}
</div>
<div className={styles.metadata}>
<div>
<div className={styles.name}>

12
packages/console/src/pages/UserDetails/index.module.scss
View file

@ -5,7 +5,7 @@
}
.header {
padding: _.unit(8);
padding: _.unit(6);
display: flex;
align-items: center;
justify-content: space-between;
@ -14,6 +14,10 @@
margin-left: _.unit(6);
}
.imagePlaceholder {
margin-left: _.unit(2);
}
.metadata {
flex: 1;
@ -21,10 +25,6 @@
display: flex;
align-items: center;
&:not(:first-child) {
margin-top: _.unit(2);
}
> *:not(:first-child) {
margin-left: _.unit(2);
}
@ -51,7 +51,7 @@
}
.copy {
padding: _.unit(1) _.unit(4) _.unit(1) _.unit(2);
padding: _.unit(1) _.unit(2);
}
}
}

4
packages/console/src/pages/UserDetails/index.tsx
View file

@ -115,7 +115,9 @@ const UserDetails = () => {
{id && data && (
<>
<Card className={styles.header}>
<ImagePlaceholder size={76} borderRadius={16} />
<div className={styles.imagePlaceholder}>
<ImagePlaceholder size={60} borderRadius={16} />
</div>
<div className={styles.metadata}>
<div className={styles.name}>{data.name ?? '-'}</div>
<div>