Skip to content

Commit c19ac85

Browse files
sametkabaysametkabay
committed
Dashboard card implementation
1 parent f97da82 commit c19ac85

File tree

3 files changed

+132
-4
lines changed

3 files changed

+132
-4
lines changed

‎reactjs/src/scenes/Dashboard/index.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.dashboardCard{
2+
margin-top: 16px;
3+
}
4+
5+
.ant-card.dasboardCard1{
6+
background-color: #E91E63;
7+
border-radius: 5px;
8+
}
9+
10+
.ant-card.dasboardCard2{
11+
background-color: #00BCD4;
12+
border-radius: 5px;
13+
}
14+
15+
.ant-card.dasboardCard3{
16+
background-color: #8BC34A;
17+
border-radius: 5px;
18+
}
19+
.ant-card.dasboardCard4{
20+
background-color: #FF9800;
21+
border-radius: 5px;
22+
}
23+
24+
25+
.dashboardCardCounter{
26+
font-size: 36px;
27+
color: #fff;
28+
}
29+
30+
.dashboardCardName{
31+
font-size: 18px;
32+
color: #fff;
33+
margin-bottom: -5;
34+
}
35+
36+
.dashboardCardIcon{
37+
font-size: 48px;
38+
color: #fff;
39+
}

‎reactjs/src/scenes/Dashboard/index.tsx

Lines changed: 89 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,98 @@
11
import * as React from 'react';
2+
import { Row, Col, Card, Icon } from 'antd';
3+
import "./index.css"
24

35
export class Dashboard extends React.Component<any>{
6+
constructor(props: any) {
7+
super(props);
8+
setInterval(() => this.setState({ loading: false }), 1000);
9+
}
10+
state = {
11+
loading: true,
12+
}
413

514
render() {
15+
16+
const { loading } = this.state;
617
return (
7-
<p>Dashboard</p>
18+
<Row gutter={16}>
19+
<Col
20+
className={"dashboardCard"}
21+
xs={{ offset: 2, span: 22 }}
22+
sm={{ offset: 2, span: 22 }}
23+
md={{ offset: 1, span: 11 }}
24+
lg={{ offset: 1, span: 11 }}
25+
xl={{ offset: 0, span: 6 }}
26+
xxl={{ offset: 0, span: 6 }}
27+
>
28+
<Card className={"dasboardCard1"} bodyStyle={{ padding: 10 }} loading={loading} bordered={false}>
29+
<Col span={8}>
30+
<Icon className={"dashboardCardIcon"} type="check" />
31+
</Col>
32+
<Col span={16}>
33+
<p className={"dashboardCardName"}>New Task</p>
34+
<label className={"dashboardCardCounter"}>125</label>
35+
</Col>
36+
</Card>
37+
</Col>
38+
<Col
39+
className={"dashboardCard"}
40+
xs={{ offset: 2, span: 22 }}
41+
sm={{ offset: 2, span: 22 }}
42+
md={{ offset: 1, span: 11 }}
43+
lg={{ offset: 1, span: 11 }}
44+
xl={{ offset: 0, span: 6 }}
45+
xxl={{ offset: 0, span: 6 }}
46+
>
47+
<Card className={"dasboardCard2"} bodyStyle={{ padding: 10 }} loading={loading} bordered={false}>
48+
<Col span={8}>
49+
<Icon className={"dashboardCardIcon"} type="question" />
50+
</Col>
51+
<Col span={16}>
52+
<p className={"dashboardCardName"}>New Ticket</p>
53+
<label className={"dashboardCardCounter"}>257</label>
54+
</Col>
55+
</Card>
56+
</Col>
57+
<Col
58+
className={"dashboardCard"}
59+
xs={{ offset: 2, span: 22 }}
60+
sm={{ offset: 2, span: 22 }}
61+
md={{ offset: 1, span: 11 }}
62+
lg={{ offset: 1, span: 11 }}
63+
xl={{ offset: 0, span: 6 }}
64+
xxl={{ offset: 0, span: 6 }}
65+
>
66+
<Card className={"dasboardCard3"} bodyStyle={{ padding: 10 }} loading={loading} bordered={false}>
67+
<Col span={8}>
68+
<Icon className={"dashboardCardIcon"} type="message" />
69+
</Col>
70+
<Col span={16}>
71+
<p className={"dashboardCardName"}>New Comments</p>
72+
<label className={"dashboardCardCounter"}>243</label>
73+
</Col>
74+
</Card>
75+
</Col>
76+
<Col
77+
className={"dashboardCard"}
78+
xs={{ offset: 2, span: 22 }}
79+
sm={{ offset: 2, span: 22 }}
80+
md={{ offset: 1, span: 11 }}
81+
lg={{ offset: 1, span: 11 }}
82+
xl={{ offset: 0, span: 6 }}
83+
xxl={{ offset: 0, span: 6 }}
84+
>
85+
<Card className={"dasboardCard4"} bodyStyle={{ padding: 10 }} loading={loading} bordered={false}>
86+
<Col span={8}>
87+
<Icon className={"dashboardCardIcon"} type="user-add" />
88+
</Col>
89+
<Col span={16}>
90+
<p className={"dashboardCardName"}>New Visitors</p>
91+
<label className={"dashboardCardCounter"}>1225</label>
92+
</Col>
93+
</Card>
94+
</Col>
95+
</Row>
896
)
997
}
1098
}

‎reactjs/src/scenes/Layout/index.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,16 +116,17 @@ class LayoutComponent extends React.Component<any> {
116116
toggle={this.toggle}
117117
/>
118118
<Content style={{ margin: '0 16px' }}>
119-
<div style={{ marginTop: 24, padding: 24, background: '#fff', minHeight: 360 }}>
120-
<Switch>
119+
<Switch>
121120
{/* <Route path="/login" component={Logins} /> */}
122121
<Route path="/dashboard" component={Dashboard} />
123122
<Route path="/users" component={Users} />
124123
<Route path="/tenants" component={Tenants} />
125124
<Route path="/rules" component={Rules} />
126125
<Route path="/about" component={About} />
127126
</Switch>
128-
</div>
127+
{/* <div style={{ marginTop: 24, padding: 24, background: '#fff', minHeight: 360 }}>
128+
129+
</div> */}
129130
</Content>
130131
<Layout.Footer style={{ textAlign: 'center' }}>
131132
Asp.Net Boilerplate - React ©2018 <a href="https://github.com/ryoldash/module-zero-core-template">Github Page</a>

0 commit comments

Comments
 (0)