Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00
Code Issues Activity

fix(console): page layout issues

Browse source
This commit is contained in:
Charles Zhao 2022-03-09 21:46:32 +08:00
parent 05bbc9c2d3
commit db61e15cd9
No known key found for this signature in database
GPG key ID: 4858774754C92DF2
13 changed files with 77 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -24,3 +24,4 @@ cache
*.env *.env
.idea/ .idea/
*.pem *.pem
.history

1
packages/console/src/App.module.scss
View file

@ -5,4 +5,5 @@
display: flex; display: flex;
padding-right: _.unit(5); padding-right: _.unit(5);
margin-bottom: _.unit(6); margin-bottom: _.unit(6);
overflow: hidden;
} }

1
packages/console/src/components/Card/index.module.scss
View file

@ -3,6 +3,5 @@
.card { .card {
background: var(--color-card-background); background: var(--color-card-background);
border-radius: _.unit(4); border-radius: _.unit(4);
padding: _.unit(6);
height: 100%; height: 100%;
} }

6
packages/console/src/components/TabNav/index.tsx
View file

@ -1,3 +1,4 @@
import classNames from 'classnames';
import React from 'react'; import React from 'react';
import * as styles from './index.module.scss'; import * as styles from './index.module.scss';
@ -5,9 +6,12 @@ import * as styles from './index.module.scss';
export { default as TabNavLink } from './TabNavLink'; export { default as TabNavLink } from './TabNavLink';
type Props = { type Props = {
className?: string;
children: React.ReactNode; children: React.ReactNode;
}; };
const TabNav = ({ children }: Props) => <nav className={styles.nav}>{children}</nav>; const TabNav = ({ className, children }: Props) => (
<nav className={classNames(styles.nav, className)}>{children}</nav>
);
export default TabNav; export default TabNav;

4
packages/console/src/components/Topbar/index.module.scss
View file

@ -1,9 +1,9 @@
@use '@/scss/underscore' as _; @use '@/scss/underscore' as _;
.topbar { .topbar {
height: 80px; flex: 0 0 66px;
width: 100%; width: 100%;
padding: _.unit(3) _.unit(8); padding: _.unit(4) _.unit(6);
display: flex; display: flex;
align-items: center; align-items: center;

16
packages/console/src/pages/ApiResources/index.module.scss
View file

@ -3,17 +3,21 @@
.headline { .headline {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: _.unit(6) _.unit(6) 0;
} }
.table { .table {
margin-top: _.unit(6); margin: _.unit(4) _.unit(6) _.unit(6);
width: 100%;
tbody tr.clickable { tbody {
cursor: pointer; max-height: calc(100vh - _.unit(64));
&:hover { tr.clickable {
background: var(--color-table-row-selected); cursor: pointer;
&:hover {
background: var(--color-table-row-selected);
}
} }
} }
} }

8
packages/console/src/pages/ApiResources/index.tsx
View file

@ -56,14 +56,14 @@ const ApiResources = () => {
<table className={styles.table}> <table className={styles.table}>
<thead> <thead>
<tr> <tr>
<td className={styles.apiResourceName}>{t('api_resources.api_name')}</td> <th className={styles.apiResourceName}>{t('api_resources.api_name')}</th>
<td>{t('api_resources.api_identifier')}</td> <th>{t('api_resources.api_identifier')}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{error && ( {error && (
<tr> <tr>
<td colSpan={2}>error occured: {error.metadata.code}</td> <td colSpan={2}>error occurred: {error.metadata.code}</td>
</tr> </tr>
)} )}
{isLoading && ( {isLoading && (
@ -73,7 +73,7 @@ const ApiResources = () => {
)} )}
{data?.map(({ id, name, indicator }) => ( {data?.map(({ id, name, indicator }) => (
<tr key={id} className={styles.clickable}> <tr key={id} className={styles.clickable}>
<td> <td className={styles.apiResourceName}>
<ItemPreview title={name} icon={<ImagePlaceholder />} to={`/api-resources/${id}`} /> <ItemPreview title={name} icon={<ImagePlaceholder />} to={`/api-resources/${id}`} />
</td> </td>
<td> <td>

16
packages/console/src/pages/Applications/index.module.scss
View file

@ -3,17 +3,21 @@
.headline { .headline {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: _.unit(6) _.unit(6) 0;
} }
.table { .table {
margin-top: _.unit(6); margin: _.unit(4) _.unit(6) _.unit(6);
width: 100%;
tbody tr.clickable { tbody {
cursor: pointer; max-height: calc(100vh - _.unit(64));
&:hover { tr.clickable {
background: var(--color-table-row-selected); cursor: pointer;
&:hover {
background: var(--color-table-row-selected);
}
} }
} }
} }

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

@ -65,8 +65,8 @@ const Applications = () => {
<table className={styles.table}> <table className={styles.table}>
<thead> <thead>
<tr> <tr>
<td className={styles.applicationName}>{t('applications.application_name')}</td> <th className={styles.applicationName}>{t('applications.application_name')}</th>
<td>{t('applications.client_id')}</td> <th>{t('applications.client_id')}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -88,7 +88,7 @@ const Applications = () => {
navigate(`/applications/${id}`); navigate(`/applications/${id}`);
}} }}
> >
<td> <td className={styles.applicationName}>
<ItemPreview <ItemPreview
title={name} title={name}
subtitle={t(`${applicationTypeI18nKey[type]}.title`)} subtitle={t(`${applicationTypeI18nKey[type]}.title`)}

3
packages/console/src/pages/Connectors/components/ConnectorRow.tsx
View file

@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
import Button from '@/components/Button'; import Button from '@/components/Button';
import Status from '@/components/Status'; import Status from '@/components/Status';
import * as styles from '../index.module.scss';
import ConnectorName from './ConnectorName'; import ConnectorName from './ConnectorName';
type Props = { type Props = {
@ -29,7 +30,7 @@ const ConnectorRow = ({ type, connector }: Props) => {
return ( return (
<tr> <tr>
<td> <td className={styles.connectorName}>
<ConnectorName connector={connector} titlePlaceholder={typeLabel} /> <ConnectorName connector={connector} titlePlaceholder={typeLabel} />
</td> </td>
<td>{typeLabel}</td> <td>{typeLabel}</td>

21
packages/console/src/pages/Connectors/index.module.scss
View file

@ -3,18 +3,25 @@
.headline { .headline {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: _.unit(6) _.unit(6) 0;
}
.tabs {
margin: _.unit(4) _.unit(6) 0;
} }
.table { .table {
margin-top: _.unit(6); margin: _.unit(4) _.unit(6) _.unit(6);
width: 100%;
font-size: var(--font-small-text);
tbody tr.clickable { tbody {
cursor: pointer; max-height: calc(100vh - _.unit(74));
&:hover { tr.clickable {
background: var(--color-table-row-selected); cursor: pointer;
&:hover {
background: var(--color-table-row-selected);
}
} }
} }
} }

8
packages/console/src/pages/Connectors/index.tsx
View file

@ -45,16 +45,16 @@ const Connectors = () => {
<CardTitle title="connectors.title" subtitle="connectors.subtitle" /> <CardTitle title="connectors.title" subtitle="connectors.subtitle" />
{isSocial && <Button disabled title="admin_console.connectors.create" type="primary" />} {isSocial && <Button disabled title="admin_console.connectors.create" type="primary" />}
</div> </div>
<TabNav> <TabNav className={styles.tabs}>
<TabNavLink href="/connectors">{t('connectors.tab_email_sms')}</TabNavLink> <TabNavLink href="/connectors">{t('connectors.tab_email_sms')}</TabNavLink>
<TabNavLink href="/connectors/social">{t('connectors.tab_social')}</TabNavLink> <TabNavLink href="/connectors/social">{t('connectors.tab_social')}</TabNavLink>
</TabNav> </TabNav>
<table className={styles.table}> <table className={styles.table}>
<thead> <thead>
<tr> <tr>
<td className={styles.connectorName}>{t('connectors.connector_name')}</td> <th className={styles.connectorName}>{t('connectors.connector_name')}</th>
<td>{t('connectors.connector_type')}</td> <th>{t('connectors.connector_type')}</th>
<td>{t('connectors.connector_status')}</td> <th>{t('connectors.connector_status')}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

23
packages/console/src/scss/normalized.scss
View file

@ -24,11 +24,21 @@ table {
border-spacing: 0; border-spacing: 0;
overflow: hidden; overflow: hidden;
thead,
tbody,
tr {
display: table;
width: 100%;
table-layout: fixed;
}
thead { thead {
td { th {
font: var(--font-subhead-2); font: var(--font-subhead-2);
color: var(--color-component-caption); color: var(--color-component-caption);
padding: _.unit(3) _.unit(4); padding: _.unit(3) _.unit(4);
border-bottom: 1px solid var(--color-neutral-90);
text-align: left;
&:first-child, &:first-child,
&:last-child { &:last-child {
@ -38,8 +48,13 @@ table {
} }
tbody { tbody {
display: block;
overflow: auto;
table-layout: fixed;
max-height: calc(100% - _.unit(40));
td { td {
border-top: 1px solid var(--color-neutral-90); border-bottom: 1px solid var(--color-neutral-90);
padding: _.unit(5) _.unit(4); padding: _.unit(5) _.unit(4);
&:first-child, &:first-child,
@ -48,4 +63,8 @@ table {
} }
} }
} }
tr:last-child td {
border-bottom: none;
}
} }