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

feat(react): updating entity layouts to be friendly to smaller viewport sizes (#2277)

Browse Source
This commit is contained in:
Gabe Lyons 2021-03-22 23:19:28 -07:00 committed by GitHub
parent 1ea450e0e4
commit 01f27b4503
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 58 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
datahub-web-react/src/app/entity/chart/profile/ChartProfile.tsx
View File

@ -1,6 +1,5 @@
import { Alert } from 'antd';
import React from 'react';
import styled from 'styled-components';
import { Chart, GlobalTags } from '../../../../types.generated';
import { Ownership as OwnershipView } from '../../shared/Ownership';
import { EntityProfile } from '../../../shared/EntityProfile';
@ -10,10 +9,6 @@ import ChartSources from './ChartSources';
import { Message } from '../../../shared/Message';
import TagGroup from '../../../shared/tags/TagGroup';
const PageContainer = styled.div`
padding: 32px 100px;
`;
export enum TabType {
Ownership = 'Ownership',
Sources = 'Sources',
@ -74,25 +69,23 @@ export default function ChartProfile({ urn }: { urn: string }) {
};
return (
<PageContainer>
<>
{loading && <Message type="loading" content="Loading..." style={{ marginTop: '10%' }} />}
{data && data.chart && (
<EntityProfile
tags={
<TagGroup
editableTags={data.chart?.globalTags as GlobalTags}
canAdd
canRemove
updateTags={(globalTags) => updateChart({ variables: { input: { urn, globalTags } } })}
/>
}
title={data.chart.info?.name || ''}
tabs={getTabs(data.chart as Chart)}
header={getHeader(data.chart as Chart)}
/>
)}
</>
</PageContainer>
<>
{loading && <Message type="loading" content="Loading..." style={{ marginTop: '10%' }} />}
{data && data.chart && (
<EntityProfile
tags={
<TagGroup
editableTags={data.chart?.globalTags as GlobalTags}
canAdd
canRemove
updateTags={(globalTags) => updateChart({ variables: { input: { urn, globalTags } } })}
/>
}
title={data.chart.info?.name || ''}
tabs={getTabs(data.chart as Chart)}
header={getHeader(data.chart as Chart)}
/>
)}
</>
);
}

45
datahub-web-react/src/app/entity/dashboard/profile/DashboardProfile.tsx
View File

@ -1,6 +1,5 @@
import { Alert } from 'antd';
import React from 'react';
import styled from 'styled-components';
import {
GetDashboardDocument,
useGetDashboardQuery,
@ -14,10 +13,6 @@ import DashboardCharts from './DashboardCharts';
import { Message } from '../../../shared/Message';
import TagGroup from '../../../shared/tags/TagGroup';
const PageContainer = styled.div`
padding: 32px 100px;
`;
export enum TabType {
Ownership = 'Ownership',
Charts = 'Charts',
@ -81,27 +76,23 @@ export default function DashboardProfile({ urn }: { urn: string }) {
};
return (
<PageContainer>
<>
{loading && <Message type="loading" content="Loading..." style={{ marginTop: '10%' }} />}
{data && data.dashboard && (
<EntityProfile
title={data.dashboard.info?.name || ''}
tags={
<TagGroup
editableTags={data.dashboard?.globalTags as GlobalTags}
canAdd
canRemove
updateTags={(globalTags) =>
updateDashboard({ variables: { input: { urn, globalTags } } })
}
/>
}
tabs={getTabs(data.dashboard as Dashboard)}
header={getHeader(data.dashboard as Dashboard)}
/>
)}
</>
</PageContainer>
<>
{loading && <Message type="loading" content="Loading..." style={{ marginTop: '10%' }} />}
{data && data.dashboard && (
<EntityProfile
title={data.dashboard.info?.name || ''}
tags={
<TagGroup
editableTags={data.dashboard?.globalTags as GlobalTags}
canAdd
canRemove
updateTags={(globalTags) => updateDashboard({ variables: { input: { urn, globalTags } } })}
/>
}
tabs={getTabs(data.dashboard as Dashboard)}
header={getHeader(data.dashboard as Dashboard)}
/>
)}
</>
);
}

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

@ -16,11 +16,6 @@ export interface EntityProfileProps {
}>;
}
const FlexSpace = styled.div`
display: flex;
justify-content: space-between;
`;
const TagsTitle = styled(Typography.Title)`
font-size: 18px;
`;
@ -28,9 +23,8 @@ const TagsTitle = styled(Typography.Title)`
const TagCard = styled(Card)`
margin-top: 24px;
font-size: 18px;
min-width: 450px;
width: 450px;
height: 100%;
min-width: 100%;
width: 100%;
`;
const TagIcon = styled(TagOutlined)`
@ -52,22 +46,26 @@ export const EntityProfile = ({ title, tags, header, tabs }: EntityProfileProps)
return (
<Layout.Content style={{ padding: '0px 100px' }}>
<div>
<FlexSpace>
<div>
<Row style={{ padding: '20px 0px 10px 0px' }}>
<Col span={24}>
<h1>{title}</h1>
</Col>
</Row>
{header}
</div>
<TagCard>
<TagsTitle type="secondary" level={4}>
<TagIcon /> Tags
</TagsTitle>
{tags}
</TagCard>
</FlexSpace>
<Row>
<Col span={16} md={16} sm={24} xs={24}>
<div>
<Row style={{ padding: '20px 0px 10px 0px' }}>
<Col span={24}>
<h1>{title}</h1>
</Col>
</Row>
{header}
</div>
</Col>
<Col span={8} xs={24} sm={24} md={8}>
<TagCard>
<TagsTitle type="secondary" level={4}>
<TagIcon /> Tags
</TagsTitle>
{tags}
</TagCard>
</Col>
</Row>
<Divider style={{ marginBottom: '0px' }} />
<Row style={{ padding: '0px 0px 10px 0px' }}>
<Col span={24}>