Skip to content

Commit 17bee5f

Browse files
dipscoderdipscoder
authored
Responsive pages (#110)
* Make Setting Page responsive * Make event page responsive * Make Dashboard responsive * Make Individual Event Page Responsive
1 parent 8a9b7c4 commit 17bee5f

File tree

9 files changed

+110
-74
lines changed

9 files changed

+110
-74
lines changed

‎src/components/BookmarkedEvents.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
55
import { firebase } from 'src/services/authService';
66
import { useHistory } from 'react-router';
77

8-
const useStyles = makeStyles(() => ({
8+
const useStyles = makeStyles(theme => ({
99
root: {
1010
color: '#291757',
1111
fontFamily: 'Montserrat',
@@ -27,7 +27,10 @@ const useStyles = makeStyles(() => ({
2727
display: 'flex',
2828
fontSize: '17px',
2929
marginBottom: '10px',
30-
letterSpacing: '0.44px'
30+
letterSpacing: '0.44px',
31+
[theme.breakpoints.down('xs')]: {
32+
justifyContent: 'space-evenly'
33+
}
3134
},
3235
bmText: {
3336
display: 'flex',

‎src/components/Calendar.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const useStyles = makeStyles(() => ({
3333
fontSize: '18px',
3434
color: '#292C3D',
3535
display: 'flex',
36-
width: '60px',
36+
width: '35px',
3737
height: '30px',
3838
justifyContent: 'center'
3939
},
@@ -42,7 +42,7 @@ const useStyles = makeStyles(() => ({
4242
color: '#291757',
4343
fontWeight: 'bold',
4444
display: 'flex',
45-
width: '60px',
45+
width: '35px',
4646
height: '30px',
4747
alignItems: 'center',
4848
textAlign: 'center',

‎src/components/NewEvents.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,18 @@ import { Button, Card, Grid, Typography } from '@material-ui/core';
44
import { useSelector } from 'react-redux';
55
import { firebase } from 'src/services/authService';
66

7-
const useStyles = makeStyles(() => ({
7+
const useStyles = makeStyles(theme => ({
88
root: {
99
background: '#CCD2E3',
1010
borderRadius: '20px',
1111
padding: '19px',
1212
color: '#291757',
1313
fontFamily: 'Montserrat',
1414
marginBottom: '21px',
15-
marginLeft: '21px'
15+
marginLeft: '21px',
16+
[theme.breakpoints.down('sm')]: {
17+
marginLeft: 0
18+
}
1619
},
1720
topContainer: {
1821
display: 'flex',

‎src/components/Stats.js

+37-24
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
23

3-
const Stats = ({ conducted, attending }) => {
4-
const heading = {
4+
const useStyles = makeStyles(theme => ({
5+
heading: {
56
color: '#291755',
67
marginBottom: '10px'
7-
};
8-
9-
const box = {
8+
},
9+
main: {
10+
display: 'flex',
11+
gap: '20px',
12+
justifyContent: 'space-between',
13+
width: '100%',
14+
[theme.breakpoints.down('xs')]: {
15+
flexDirection: 'column',
16+
alignItems: 'center'
17+
}
18+
},
19+
box: {
1020
display: 'flex',
1121
height: '80px',
1222
width: '250px',
@@ -17,10 +27,12 @@ const Stats = ({ conducted, attending }) => {
1727
alignItems: 'center',
1828
position: 'relative',
1929
fontWeight: '500',
20-
fontSize: '20px'
21-
};
22-
23-
const circle = {
30+
fontSize: '20px',
31+
[theme.breakpoints.down('xs')]: {
32+
height: '70px'
33+
}
34+
},
35+
circle: {
2436
display: 'flex',
2537
justifyContent: 'center',
2638
alignItems: 'center',
@@ -32,35 +44,36 @@ const Stats = ({ conducted, attending }) => {
3244
position: 'absolute',
3345
border: '2px solid #291755',
3446
right: '-10px',
35-
fontWeight: '900'
36-
};
47+
fontWeight: '900',
48+
[theme.breakpoints.down('xs')]: {
49+
height: '85px',
50+
width: '85px'
51+
}
52+
}
53+
}));
54+
55+
const Stats = ({ conducted, attending }) => {
56+
const classes = useStyles();
3757

3858
return (
3959
<div>
40-
<h2 style={heading}>Statistics</h2>
41-
<div
42-
style={{
43-
display: 'flex',
44-
gap: '20px',
45-
justifyContent: 'space-between',
46-
width: '100%'
47-
}}
48-
>
49-
<div style={box}>
60+
<h2 className={classes.heading}>Statistics</h2>
61+
<div className={classes.main}>
62+
<div className={classes.box}>
5063
<p>
5164
events
5265
<br />
5366
conducted
5467
</p>
55-
<div style={circle}>{conducted}</div>
68+
<div className={classes.circle}>{conducted}</div>
5669
</div>
57-
<div style={box}>
70+
<div className={classes.box}>
5871
<p>
5972
events
6073
<br />
6174
attended
6275
</p>
63-
<div style={circle}>{attending}</div>
76+
<div className={classes.circle}>{attending}</div>
6477
</div>
6578
</div>
6679
</div>

‎src/components/UserNewEvents.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
55
import { firebase } from 'src/services/authService';
66
import { useHistory } from 'react-router';
77

8-
const useStyles = makeStyles(() => ({
8+
const useStyles = makeStyles(theme => ({
99
root: {
1010
color: '#291757',
1111
fontFamily: 'Montserrat',
@@ -27,7 +27,10 @@ const useStyles = makeStyles(() => ({
2727
display: 'flex',
2828
fontSize: '17px',
2929
marginBottom: '10px',
30-
letterSpacing: '0.44px'
30+
letterSpacing: '0.44px',
31+
[theme.breakpoints.down('xs')]: {
32+
justifyContent: 'space-evenly'
33+
}
3134
},
3235
bmText: {
3336
display: 'flex',

‎src/components/dashboard.js

+18-12
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Box from '@material-ui/core/Box';
1+
import { Box, Grid } from '@material-ui/core';
22
import { makeStyles } from '@material-ui/core/styles';
33
import React, { useEffect, useState } from 'react';
44
import { useSelector } from 'react-redux';
@@ -55,17 +55,23 @@ export default function Dashboard() {
5555
<DrawerLayout>
5656
{!loading ? (
5757
<main className={classes.content}>
58-
<Box display="flex">
59-
<Box flexGrow={1}>
60-
{userEvents.length > 0 && <Calendar userEvents={userEvents} />}
61-
<Stats conducted={userEvents.length} attending={attending} />
62-
<BookmarkedEvents />
63-
</Box>
64-
<Box maxWidth="28em" minWidth="24em">
65-
<NewEvents />
66-
{/* <Publications /> */}
67-
</Box>
68-
</Box>
58+
<Grid container>
59+
{/* <Box display="flex"> */}
60+
<Grid justify="center" md={8} sm={12} xs={12}>
61+
<Box flexGrow={1}>
62+
{userEvents.length > 0 && <Calendar userEvents={userEvents} />}
63+
<Stats conducted={userEvents.length} attending={attending} />
64+
<BookmarkedEvents />
65+
</Box>
66+
</Grid>
67+
<Grid md={4} sm={12} xs={12}>
68+
<Box>
69+
<NewEvents />
70+
{/* <Publications /> */}
71+
</Box>
72+
</Grid>
73+
{/* </Box> */}
74+
</Grid>
6975
</main>
7076
) : (
7177
<Loader></Loader>

‎src/views/pages/events/eventdefault.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,8 @@ const useStyles = makeStyles(theme => ({
2323
fontWeight: 'bold',
2424
fontSize: '18px',
2525
background: '#291757',
26-
[theme.breakpoints.down('xs')]: {
27-
marginTop: '29px',
28-
marginLeft: '215px'
26+
[theme.breakpoints.down('sm')]: {
27+
margin: '0 0 20px 0'
2928
}
3029
}
3130
}));

‎src/views/pages/events/individualEvent.js

+32-18
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import {
77
Dialog,
88
DialogActions,
99
DialogContent,
10-
DialogContentText,
11-
useMediaQuery
10+
DialogContentText
1211
} from '@material-ui/core';
1312
// import Avatar from '@material-ui/core/Avatar';
1413
import AvatarGroup from '@material-ui/lab/AvatarGroup';
@@ -18,7 +17,6 @@ import { useSelector } from 'react-redux';
1817
import { useHistory, useParams } from 'react-router';
1918
import DrawerLayout from 'src/layouts/DrawerLayout';
2019
import { firebase } from 'src/services/authService';
21-
import { useTheme } from '@material-ui/core/styles';
2220
import { BookmarkBorder, Bookmark } from '@material-ui/icons';
2321
import { SnackbarProvider, useSnackbar } from 'notistack';
2422
import Loader from 'src/components/Loader';
@@ -60,27 +58,50 @@ const useStyles = makeStyles(theme => ({
6058
color: 'black',
6159
fontSize: '32px',
6260
[theme.breakpoints.down('sm')]: {
63-
fontSize: '26px'
61+
fontSize: '30px'
6462
},
6563
[theme.breakpoints.down('xs')]: {
66-
fontSize: '22px',
64+
fontSize: '30px',
6765
marginBottom: '10px'
6866
}
6967
},
70-
68+
buttons: {
69+
display: 'flex',
70+
gap: '10px',
71+
[theme.breakpoints.down('xs')]: {
72+
flexDirection: 'column'
73+
}
74+
},
75+
buttonHeading: {
76+
color: '#fff',
77+
fontWeight: 'bold',
78+
[theme.breakpoints.down('xs')]: {
79+
fontSize: '0.85rem'
80+
}
81+
},
7182
register: {
7283
width: '160px',
7384
backgroundColor: '#291757',
7485
borderRadius: '20px',
7586
marginTop: 12,
76-
marginBottom: 16
87+
marginBottom: 16,
88+
[theme.breakpoints.down('xs')]: {
89+
width: '120px',
90+
marginBottom: 0,
91+
marginTop: 0
92+
}
7793
},
7894
attending: {
7995
width: '160px',
8096
backgroundColor: '#576886',
8197
borderRadius: '20px',
8298
marginTop: 12,
83-
marginBottom: 16
99+
marginBottom: 16,
100+
[theme.breakpoints.down('xs')]: {
101+
width: '120px',
102+
marginBottom: 0,
103+
marginTop: 0
104+
}
84105
},
85106
desc: {
86107
marginTop: '10px',
@@ -155,8 +176,6 @@ export default function IndividualEvent() {
155176
// For Attending
156177
const [open, setOpen] = useState(false);
157178
const [attending, setAttending] = useState(false);
158-
const theme = useTheme();
159-
const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
160179

161180
const handleClickOpen = () => {
162181
setOpen(true);
@@ -224,7 +243,6 @@ export default function IndividualEvent() {
224243
{!loading ? (
225244
<>
226245
<Dialog
227-
fullScreen={fullScreen}
228246
open={open}
229247
onClose={handleClose}
230248
aria-labelledby="responsive-dialog-title"
@@ -269,14 +287,12 @@ export default function IndividualEvent() {
269287
<Typography className={classes.introduction} variant="h1">
270288
{event?.eventName}
271289
</Typography>
272-
<Grid item style={{ display: 'flex', gap: '10px' }}>
290+
<Grid item className={classes.buttons}>
273291
<Button
274292
href={event?.eventLink}
275293
className={classes.register}
276294
>
277-
<Typography
278-
style={{ color: '#fff', fontWeight: 'bold' }}
279-
>
295+
<Typography className={classes.buttonHeading}>
280296
Register
281297
</Typography>
282298
</Button>
@@ -287,9 +303,7 @@ export default function IndividualEvent() {
287303
}
288304
disabled={attending}
289305
>
290-
<Typography
291-
style={{ color: '#fff', fontWeight: 'bold' }}
292-
>
306+
<Typography className={classes.buttonHeading}>
293307
{attending ? 'Attending' : 'Attend'}
294308
</Typography>
295309
</Button>

‎src/views/pages/settings/Settings.js

+4-9
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,7 @@ const useStyles = makeStyles(theme => ({
2121
width: '98%',
2222
background: '#FFFFFF',
2323
borderRadius: '20px',
24-
fontSize: '16px',
25-
[theme.breakpoints.down('xs')]: {
26-
height: '793px',
27-
width: '353px'
28-
}
24+
fontSize: '16px'
2925
},
3026
topContainer: {
3127
width: '150%',
@@ -42,9 +38,8 @@ const useStyles = makeStyles(theme => ({
4238
textAlign: 'center'
4339
},
4440
gallery: {
45-
width: '20%',
46-
[theme.breakpoints.down('xs')]: {
47-
marginLeft: '71px'
41+
[theme.breakpoints.down('sm')]: {
42+
display: 'none'
4843
}
4944
},
5045

@@ -295,7 +290,7 @@ function Settings() {
295290
</Grid>
296291
</Grid>
297292
</Box>
298-
<Box maxWidth="28em" minWidth="24em">
293+
<Box className={classes.gallery} maxWidth="28em" minWidth="24em">
299294
<img
300295
src=".././static/images/event_img.jpg"
301296
alt="gallery-icon"

0 commit comments

Comments
 (0)