yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-26 09:26:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(react): add padding between tags and description on datasets profile page (#2384)

Browse Source
This commit is contained in:
Brian 2021-04-15 10:35:21 +08:00 committed by GitHub
parent 1e11851a90
commit 82791008c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
datahub-web-react/src/app/shared/EntityProfile.tsx
View File

@ -1,6 +1,7 @@
import * as React from 'react';
import { Col, Row, Divider, Layout, Card, Typography } from 'antd';
import { LayoutProps } from 'antd/lib/layout';
import styled from 'styled-components';
import { TagOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
@ -35,14 +36,22 @@ const TagIcon = styled(TagOutlined)`
padding-right: 6px;
`;
type LayoutProps = {
type LayoutPropsExtended = {
isCompact: boolean;
};
const LayoutContent = styled(Layout.Content)<LayoutProps>`
const LayoutContent = styled(({ isCompact: _, ...props }: LayoutProps & LayoutPropsExtended) => (
<Layout.Content {...props} />
))`
padding: 0px ${(props) => (props.isCompact ? '0px' : '100px')};
`;
const LayoutDiv = styled(({ isCompact: _, ...props }: LayoutProps & LayoutPropsExtended) => (
<Layout.Content {...props} />
))`
padding-right: ${(props) => (props.isCompact ? '0px' : '24px')};
`;
const defaultProps = {
tags: [],
tabs: [],
@ -58,44 +67,42 @@ export const EntityProfile = ({ title, tags, header, tabs, titleLink }: EntityPr
/* eslint-disable spaced-comment */
return (
<LayoutContent isCompact={isCompact}>
<div>
<Row>
<Col md={isCompact ? 24 : 16} sm={24} xs={24}>
<div>
<Row style={{ padding: '20px 0px 10px 0px' }}>
<Col span={24}>
{titleLink ? (
<Link to={titleLink}>
<h1>{title}</h1>
</Link>
) : (
<h1>{title}</h1>
)}
</Col>
</Row>
{header}
</div>
</Col>
<Col md={isCompact ? 24 : 8} xs={24} sm={24}>
<TagCard>
<TagsTitle type="secondary" level={4}>
<TagIcon /> Tags
</TagsTitle>
{tags}
</TagCard>
</Col>
</Row>
{!isCompact && (
<>
<Divider style={{ marginBottom: '0px' }} />
<Row style={{ padding: '0px 0px 10px 0px' }}>
<Row>
<Col md={isCompact ? 24 : 16} sm={24} xs={24}>
<LayoutDiv isCompact={isCompact}>
<Row style={{ padding: '20px 0px 10px 0px' }}>
<Col span={24}>
<RoutedTabs defaultPath={defaultTabPath} tabs={tabs || []} />
{titleLink ? (
<Link to={titleLink}>
<h1>{title}</h1>
</Link>
) : (
<h1>{title}</h1>
)}
</Col>
</Row>
</>
)}
</div>
{header}
</LayoutDiv>
</Col>
<Col md={isCompact ? 24 : 8} xs={24} sm={24}>
<TagCard>
<TagsTitle type="secondary" level={4}>
<TagIcon /> Tags
</TagsTitle>
{tags}
</TagCard>
</Col>
</Row>
{!isCompact && (
<>
<Divider style={{ marginBottom: '0px' }} />
<Row style={{ padding: '0px 0px 10px 0px' }}>
<Col span={24}>
<RoutedTabs defaultPath={defaultTabPath} tabs={tabs || []} />
</Col>
</Row>
</>
)}
</LayoutContent>
);
};

2
datahub-web-react/src/app/shared/avatar/CustomAvatar.tsx
View File

@ -12,7 +12,7 @@ const AvatarStyled = styled(Avatar)<{ size?: number }>`
text-align: center;
font-size: ${(props) => (props.size ? `${Math.max(props.size / 2.0, 14)}px` : '14px')} !important;
&& > span {
transform: scale(1) translateX(-45%) !important;
transform: scale(1) translateX(-46%) translateY(-3%) !important;
}
`;