Skip to content
This repository was archived by the owner on Mar 7, 2024. It is now read-only.

Commit 49627fa

Browse files
Abhishek-kumar09Abhishek-kumar09
authored
Add Student Dashboard (#117)
* Add Student Dashboard * removed unused vars and netlify conflicts'
1 parent d513810 commit 49627fa

File tree

13 files changed

+835
-2
lines changed

13 files changed

+835
-2
lines changed

‎public/static/icons/Vector.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/Routes.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import CoursesView from 'src/views/pages/CoursesView';
1010
import ProfileView from 'src/views/pages/ProfileView';
1111
import ApplicationsView from 'src/views/pages/ApplicationsView';
1212
import Error404View from 'src/views/pages/Error404View';
13+
import StudentDashboardView from 'src/views/pages/StudentDashboardView';
1314

1415
import MachineLearningView from 'src/views/pages/Courses/MachineLearningView';
1516
import AlgoJavaView from 'src/views/pages/Courses/AlgoJavaView';
@@ -64,6 +65,15 @@ const renderRoutes = () => (
6465
</MainLayout>
6566
)}
6667
/>
68+
<Route
69+
path="/student"
70+
exact
71+
render={props => (
72+
<MainLayout>
73+
<StudentDashboardView {...props} />
74+
</MainLayout>
75+
)}
76+
/>
6777

6878
<Route
6979
path="/courses"

‎src/views/pages/common/CourseCard.js renamed to ‎src/components/Course/CourseCardTemplate1.js

File renamed without changes.

‎src/components/Course/CourseCardTemplate2.js

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
4+
import {
5+
Typography,
6+
Box,
7+
Card,
8+
CardContent,
9+
Grid,
10+
LinearProgress
11+
} from '@material-ui/core';
12+
import { Link } from 'react-router-dom';
13+
import { withStyles } from '@material-ui/styles';
14+
15+
const useStyles = makeStyles(theme => ({
16+
icon: {
17+
marginRight: theme.spacing(2)
18+
},
19+
root: {
20+
padding: theme.spacing(10, 10, 10),
21+
display: 'flex',
22+
justifyContent: 'center',
23+
alignItems: 'center',
24+
[theme.breakpoints.down('md')]: {
25+
padding: theme.spacing(10, 3, 10)
26+
}
27+
},
28+
cardGrid: {
29+
paddingTop: theme.spacing(8),
30+
paddingBottom: theme.spacing(8)
31+
},
32+
card: {
33+
height: '100%',
34+
display: 'flex',
35+
flexDirection: 'column',
36+
borderRadius: '10px',
37+
margin: '12px',
38+
boxShadow: '0px 0px 30px rgba(0, 0, 0, 0.13)'
39+
},
40+
cardMedia: {
41+
width: '100%',
42+
height: 'auto'
43+
// paddingTop: "56.25%", // 16:9
44+
},
45+
cardContent: {
46+
margin: '15px 5px'
47+
},
48+
chipActions: {
49+
display: 'block'
50+
},
51+
chip: {
52+
margin: '8px 0 3px 8px'
53+
},
54+
extraMargin: {
55+
marginTop: '15px',
56+
marginBottom: '0'
57+
},
58+
btn: {
59+
textTransform: 'none'
60+
},
61+
paddingCls: {
62+
paddingLeft: '10px',
63+
paddingRight: '10px'
64+
},
65+
paddingClsxs: {
66+
padding: 0
67+
},
68+
iconSize: {
69+
fontSize: '32px'
70+
},
71+
text: {
72+
color: '#FFFFFF'
73+
},
74+
avatarLarge: {
75+
width: theme.spacing(16),
76+
height: theme.spacing(16),
77+
margin: theme.spacing(4, 0, 2)
78+
},
79+
80+
avatarGrid: {
81+
display: 'flex',
82+
flexDirection: 'column',
83+
alignItems: 'center',
84+
justifyContent: 'center',
85+
padding: '5px'
86+
},
87+
88+
slide: {
89+
perspective: 0, // create perspective
90+
overflow: 'hidden',
91+
// relative is a must if you want to create overlapping layers in children
92+
position: 'relative'
93+
},
94+
background: {
95+
width: '100%',
96+
height: 'auto',
97+
backgroundPosition: 'bottom center',
98+
backgroundSize: 'cover'
99+
},
100+
complete: {
101+
fontWeight: '600'
102+
},
103+
gridList: {
104+
flexWrap: 'nowrap',
105+
width: '100%',
106+
transform: 'translateZ(0)'
107+
}
108+
}));
109+
110+
export default function CourseCard({ course }) {
111+
const classes = useStyles();
112+
return (
113+
<Box>
114+
<Card
115+
className={classes.card}
116+
display="flex"
117+
style={{
118+
maxWidth: '320px'
119+
}}
120+
>
121+
<CardContent className={classes.cardContent}>
122+
<Box display="flex" flexDirection="column">
123+
<Typography
124+
align="left"
125+
variant="h5"
126+
style={{
127+
color: '#0085FF'
128+
}}
129+
>
130+
{course.difficulty}
131+
</Typography>
132+
<Typography
133+
align="left"
134+
variant="h6"
135+
style={{
136+
color: '#B20000',
137+
marginBottom: '12px'
138+
}}
139+
>
140+
{course.domain}
141+
</Typography>
142+
143+
<Typography variant="h4" align="left">
144+
{course.title}
145+
</Typography>
146+
</Box>
147+
</CardContent>
148+
149+
<Box>
150+
<Grid container md={12} justify="space-around" alignItems="center">
151+
<Grid item md={4}>
152+
<Typography
153+
fontWeight=""
154+
noWrap
155+
variant="caption"
156+
style={{ fontWeight: 'bold' }}
157+
>
158+
Application Date
159+
</Typography>
160+
</Grid>
161+
<Grid item md={2}>
162+
<Typography noWrap variant="caption">
163+
12:00 PM
164+
</Typography>
165+
</Grid>
166+
<Grid item md={4}>
167+
<Typography noWrap variant="caption">
168+
19th sept 2020
169+
</Typography>
170+
</Grid>
171+
</Grid>
172+
173+
<Grid
174+
container
175+
md={12}
176+
justify="space-around"
177+
alignItems="center"
178+
style={{ padding: '10px' }}
179+
>
180+
<Grid container md={3} sm={3} xs={3} row>
181+
<ActiveLinearProgress
182+
variant="determinate"
183+
value="99"
184+
></ActiveLinearProgress>
185+
<Typography className={classes.complete} variant="caption">
186+
{'Application Filled'}
187+
</Typography>
188+
</Grid>
189+
<Grid container md={3} sm={3} xs={3} row>
190+
<ActiveLinearProgress
191+
variant="determinate"
192+
value="99"
193+
></ActiveLinearProgress>
194+
<Typography className={classes.complete} variant="caption">
195+
{'Got Shortlisted'}
196+
</Typography>
197+
</Grid>
198+
<Grid container md={3} sm={3} xs={3} row>
199+
<UnActiveLinearProgress
200+
variant="determinate"
201+
value="99"
202+
></UnActiveLinearProgress>
203+
<Typography variant="caption">{'Online Meeting'}</Typography>
204+
</Grid>
205+
<Grid container md={3} sm={3} xs={3} row>
206+
<UnActiveLinearProgress
207+
variant="determinate"
208+
value="99"
209+
></UnActiveLinearProgress>
210+
<Typography variant="caption">{'Enroll In course'}</Typography>
211+
</Grid>
212+
</Grid>
213+
</Box>
214+
215+
<CardContent className={classes.cardContent}>
216+
<Typography variant="caption">
217+
Congratulations! You are shortlisted In The Course. Check you have
218+
recieved email for Online Meeting on your registed email id
219+
[email protected]
220+
</Typography>
221+
</CardContent>
222+
223+
<Link
224+
display="flex"
225+
justifyContent="center"
226+
to={course.link}
227+
style={{
228+
background: '#A60000',
229+
color: '#FF4C00',
230+
textDecoration: 'none',
231+
marginBottom: '16px'
232+
}}
233+
>
234+
<Typography
235+
align="center"
236+
style={{
237+
color: '#FFFFFF'
238+
}}
239+
>
240+
<Box m={1} fontWeight={600}>
241+
Enroll Now
242+
</Box>
243+
</Typography>
244+
</Link>
245+
{/* <Typography style={{fontSize: '0.56rem', padding: '0px 10px'}} variant='caption'>
246+
You will be able to enroll into the course as soon as you successfully completed your online meeting.</Typography> */}
247+
</Card>
248+
</Box>
249+
);
250+
}
251+
252+
const ActiveLinearProgress = withStyles(theme => ({
253+
root: {
254+
width: '100%',
255+
marginTop: '10px',
256+
marginBottom: '10px'
257+
},
258+
colorPrimary: {
259+
backgroundColor: '#FFF'
260+
},
261+
bar: {
262+
borderRadius: 5,
263+
backgroundColor: '#4CAC00'
264+
}
265+
}))(LinearProgress);
266+
267+
const UnActiveLinearProgress = withStyles(theme => ({
268+
root: {
269+
width: '100%',
270+
marginTop: '10px',
271+
marginBottom: '10px'
272+
},
273+
colorPrimary: {
274+
backgroundColor: '#FFF'
275+
},
276+
bar: {
277+
borderRadius: 5,
278+
backgroundColor: '#D7D7D7'
279+
}
280+
}))(LinearProgress);

0 commit comments

Comments
 (0)