Skip to content

Commit

Permalink
Fix icons in UI cannot auto scale (feathr-ai#737) (feathr-ai#744)
Browse files Browse the repository at this point in the history 
* Fix icons in UI cannot auto scale (feathr-ai#737)

* Fix home.css code style issue
  • Loading branch information
@Fendoe @hyingyang-linkedin
Fendoe authored and hyingyang-linkedin committed Oct 25, 2022
1 parent 0acb0f3 commit b118159
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 149 deletions.
9 changes: 8 additions & 1 deletion ui/.vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,12 @@
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.workingDirectories": [{ "mode": "auto" }]
"eslint.workingDirectories": [
{
"mode": "auto"
}
],
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
23 changes: 23 additions & 0 deletions ui/src/pages/home/home.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.home .ant-card {
box-shadow: 5px 8px 15px 5px rgba(208, 216, 243, 0.6);
border-radius: 8px;
}

.home .card-meta {
display: flex;
}

.home .card-meta .ant-card-meta-avatar {
max-width: 80px;
flex-basis: 30%;
box-sizing: border-box;
}

.home .card-meta .ant-card-meta-avatar > span {
width: 100%;
}

.home .card-meta .ant-card-meta-avatar svg {
width: 100%;
height: auto;
}
210 changes: 62 additions & 148 deletions ui/src/pages/home/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,42 @@ import {
ProjectOutlined,
} from "@ant-design/icons";

import "./home.css";

const { Title } = Typography;
const { Meta } = Card;

const features = [
{
icon: <ProjectOutlined style={{ color: "#177ddc" }} />,
title: "Projects",
link: "/projects",
linkText: "See all",
},
{
icon: <DatabaseOutlined style={{ color: "#219ebc" }} />,
title: "Sources",
link: "/dataSources",
linkText: "See all",
},
{
icon: <CopyOutlined style={{ color: "#ffb703" }} />,
title: "Features",
link: "/features",
linkText: "See all",
},
{
icon: <EyeOutlined style={{ color: "#fb8500" }} />,
title: "Monitoring",
link: "/monitoring",
linkText: "See all",
},
];

const Home = () => {
return (
<div className="page">
<Card
style={{
boxShadow: "5px 8px 15px 5px rgba(208, 216, 243, 0.6)",
borderRadius: "8px",
}}
>
<div className="page home">
<Card>
<Title level={2}>Welcome to Feathr Feature Store</Title>
<span>
You can use Feathr UI to search features, identify data sources, track
Expand All @@ -33,141 +58,36 @@ const Home = () => {
</a>
</span>
</Card>
<Row justify="space-between">
<Col span={6}>
<Card
style={{
marginTop: "15px",
marginRight: "15px",
boxShadow: "5px 8px 15px 5px rgba(208, 216, 243, 0.6)",
borderRadius: "8px",
}}
>
<Row>
<Col span={6}>
<ProjectOutlined
style={{ fontSize: "80px", color: "#177ddc" }}
<Row gutter={16} style={{ marginTop: 16 }}>
{features.map((item) => {
return (
<Col
key={item.title}
xl={6}
lg={12}
sm={24}
xs={24}
style={{ marginBottom: 16 }}
>
<Card>
<Meta
className="card-meta"
avatar={item.icon}
title={
<Title level={2} ellipsis>
{item.title}
</Title>
}
description={<Link to={item.link}>{item.linkText}</Link>}
/>
</Col>
<Col span={18}>
<Row>
<Col span={24}>
<Title level={2}>Projects</Title>
</Col>
</Row>
<Row>
<Col span={24}>
<span>
<Link to="/projects">See all</Link>
</span>
</Col>
</Row>
</Col>
</Row>
</Card>
</Col>
<Col span={6}>
<Card
style={{
marginTop: "15px",
marginRight: "15px",
boxShadow: "5px 8px 15px 5px rgba(208, 216, 243, 0.6)",
borderRadius: "8px",
}}
>
<Row>
<Col span={6}>
<DatabaseOutlined
style={{ fontSize: "80px", color: "#219ebc" }}
/>
</Col>
<Col span={18}>
<Row>
<Col span={24}>
<Title level={2}>Sources</Title>
</Col>
</Row>
<Row>
<Col span={24}>
<span>
<Link to="/dataSources">See all</Link>
</span>
</Col>
</Row>
</Col>
</Row>
</Card>
</Col>
<Col span={6}>
<Card
style={{
marginTop: "15px",
marginRight: "15px",
boxShadow: "5px 8px 15px 5px rgba(208, 216, 243, 0.6)",
borderRadius: "8px",
}}
>
<Row>
<Col span={6}>
<CopyOutlined style={{ fontSize: "80px", color: "#ffb703" }} />
</Col>
<Col span={18}>
<Row>
<Col span={24}>
<Title level={2}>Features</Title>
</Col>
</Row>
<Row>
<Col span={24}>
<span>
<Link to="/features">See all</Link>
</span>
</Col>
</Row>
</Col>
</Row>
</Card>
</Col>
<Col span={6}>
<Card
style={{
marginTop: "15px",
boxShadow: "5px 8px 15px 5px rgba(208, 216, 243, 0.6)",
borderRadius: "8px",
}}
>
<Row>
<Col span={6}>
<EyeOutlined style={{ fontSize: "80px", color: "#fb8500" }} />
</Col>
<Col span={18}>
<Row>
<Col span={24}>
<Title level={2}>Monitoring</Title>
</Col>
</Row>
<Row>
<Col span={24}>
<span>
<Link to="/monitoring">See all</Link>
</span>
</Col>
</Row>
</Col>
</Row>
</Card>
</Col>
</Card>
</Col>
);
})}
</Row>
<Row>
<Col span={16}>
<Card
style={{
marginTop: "15px",
marginRight: "15px",
boxShadow: "5px 8px 15px 5px rgba(208, 216, 243, 0.6)",
borderRadius: "8px",
}}
>
<Row gutter={16}>
<Col xl={16} lg={24} sm={24} xs={24} style={{ marginBottom: 16 }}>
<Card>
<Title level={2}>Need help to get started?</Title>
Explore the following resources to get started with Feathr:
<ul>
Expand Down Expand Up @@ -237,14 +157,8 @@ const Home = () => {
</p>
</Card>
</Col>
<Col span={8}>
<Card
style={{
marginTop: "15px",
boxShadow: "5px 8px 15px 5px rgba(208, 216, 243, 0.6)",
borderRadius: "8px",
}}
>
<Col xl={8} lg={24} sm={24} xs={24} style={{ marginBottom: 16 }}>
<Card>
<Title level={2}>Recent Activity</Title>
<span>Under construction</span>
</Card>
Expand Down

0 comments on commit b118159

Please sign in to comment.