From 3d0dcb7bb6f871d62d8507d02257e21312c8e7b4 Mon Sep 17 00:00:00 2001
From: Francesco <fmazzini@unibz.it>
Date: Mon, 7 Jun 2021 11:55:07 +0200
Subject: [PATCH] Reservation Page is Responsive
---
.../Dashboard/HomePage/HomePage.tsx | 43 ++++----
src/components/Dashboard/HomePage/Numbers.tsx | 44 ++++++--
.../Dashboard/ProfilePage/ProfilePage.tsx | 6 --
.../ReservationPage/ReservationPage.style.ts | 10 +-
.../ReservationPage/ReservationPage.tsx | 100 +++++++++++-------
5 files changed, 127 insertions(+), 76 deletions(-)
diff --git a/src/components/Dashboard/HomePage/HomePage.tsx b/src/components/Dashboard/HomePage/HomePage.tsx
index 94f1eb7..6119252 100644
--- a/src/components/Dashboard/HomePage/HomePage.tsx
+++ b/src/components/Dashboard/HomePage/HomePage.tsx
@@ -98,32 +98,33 @@ export const HomePage: FC = () => {
</MuiThemeProvider>
</div>
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item xs={8}>
- <Typography variant="h3">Your Next Reservation</Typography>
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h2">Your Next Reservation</Typography>
+ </Grid>
+ <Grid item xs={2} />
</Grid>
- <Grid item xs={2} />
- </Grid>
- <Grid item container style={{ paddingTop: '20px' }}>
- <Grid item xs={1} lg={2} />
- <Grid item xs={10} lg={8}>
- <Reservation departure="" destination="" time="" date="" />
+ <Grid item container style={{ paddingTop: '20px' }}>
+ <Grid item xs={1} lg={2} />
+ <Grid item xs={10} lg={8}>
+ <Reservation departure="" destination="" time="" date="" />
+ </Grid>
+ <Grid item xs={1} lg={2} />
</Grid>
- <Grid item xs={1} lg={2} />
- </Grid>
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item xs={8}>
- <Typography variant="h3" align="right">
- Some Our Numbers
- </Typography>
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h2" align="right">
+ Some Our Numbers
+ </Typography>
+ </Grid>
+ <Grid item xs={2} />
</Grid>
- <Grid item xs={2} />
- </Grid>
-
+ </MuiThemeProvider>
<Numbers />
</Grid>
);
diff --git a/src/components/Dashboard/HomePage/Numbers.tsx b/src/components/Dashboard/HomePage/Numbers.tsx
index 20f38c8..4b47425 100644
--- a/src/components/Dashboard/HomePage/Numbers.tsx
+++ b/src/components/Dashboard/HomePage/Numbers.tsx
@@ -69,9 +69,17 @@ export const Numbers: FC = () => {
300
</Typography>
- <Typography variant="h6" align="center">
- Rides Offered
- </Typography>
+ <Hidden smDown>
+ <Typography variant="h6" align="center">
+ Rides Offered
+ </Typography>
+ </Hidden>
+
+ <Hidden mdUp>
+ <Typography variant="h6" align="center">
+ Rides
+ </Typography>
+ </Hidden>
</CardContent>
</Grid>
@@ -92,12 +100,20 @@ export const Numbers: FC = () => {
</Grid>
<Typography variant="h4" align="center">
- 25000
+ 2500
</Typography>
- <Typography variant="h6" align="center">
- Kilometers
- </Typography>
+ <Hidden smDown>
+ <Typography variant="h6" align="center">
+ Kilometers
+ </Typography>
+ </Hidden>
+
+ <Hidden mdUp>
+ <Typography variant="h6" align="center">
+ Kms
+ </Typography>
+ </Hidden>
</CardContent>
</Grid>
@@ -125,9 +141,17 @@ export const Numbers: FC = () => {
225
</Typography>
- <Typography variant="h6" align="center">
- People who used our service
- </Typography>
+ <Hidden smDown>
+ <Typography variant="h6" align="center">
+ People who used our service
+ </Typography>
+ </Hidden>
+
+ <Hidden mdUp>
+ <Typography variant="h6" align="center">
+ Users
+ </Typography>
+ </Hidden>
</CardContent>
</Grid>
diff --git a/src/components/Dashboard/ProfilePage/ProfilePage.tsx b/src/components/Dashboard/ProfilePage/ProfilePage.tsx
index e3fb1b9..d07c161 100644
--- a/src/components/Dashboard/ProfilePage/ProfilePage.tsx
+++ b/src/components/Dashboard/ProfilePage/ProfilePage.tsx
@@ -12,12 +12,6 @@ import {
createMuiTheme,
responsiveFontSizes,
MuiThemeProvider,
- Container,
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
TextField,
Button,
Select,
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
index c3d2fca..4aa65af 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
@@ -41,11 +41,19 @@ export const useStyles = makeStyles(() => ({
fontSize: '50px',
},
fab: {
- margin: '1.5em',
+ margin: '1.9em',
bottom: '0',
right: '0',
position: 'fixed',
fontSize: '2em',
padding: '1.5em',
},
+ fabSmall: {
+ margin: '1.4em',
+ bottom: '0',
+ right: '0',
+ position: 'fixed',
+ fontSize: '1.7em',
+ padding: '1.4em',
+ },
}));
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.tsx b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
index c4e5ee2..df2572e 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
@@ -7,7 +7,11 @@ import {
DialogContent,
DialogContentText,
DialogTitle,
+ Hidden,
Button,
+ MuiThemeProvider,
+ createMuiTheme,
+ responsiveFontSizes,
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import Fab from '@material-ui/core/Fab';
@@ -20,6 +24,9 @@ import { InputField } from 'components/Auth/InputField/InputField';
import { useStyles } from './ReservationPage.style';
import { ReservationDialog } from './ReservationDialog';
+let themeResp = createMuiTheme();
+themeResp = responsiveFontSizes(themeResp);
+
export const ReservationPage: FC = () => {
const classes = useStyles();
const { control, handleSubmit } = useForm<ReservationProps>();
@@ -51,53 +58,70 @@ export const ReservationPage: FC = () => {
</Grid>
<ReservationDialog handleClose={handleClose} isOpen={isOpen} />
- <Grid item container className={classes.paddingBottom}>
- <Grid item xs={1} md={2} lg={2} />
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container className={classes.paddingBottom}>
+ <Grid item xs={1} md={2} lg={2} />
- <Grid item xs={10} md={6} lg={4}>
- <Typography variant="h2" className={classes.whiteText}>
- Plan Here Your
- </Typography>
- <Typography variant="h1" className={classes.whiteText}>
- RESERVATIONS
- </Typography>
- </Grid>
+ <Grid item xs={10} md={6} lg={4}>
+ <Typography variant="h2" className={classes.whiteText}>
+ Plan Here Your
+ </Typography>
+ <Typography variant="h2" className={classes.whiteText}>
+ RESERVATIONS
+ </Typography>
+ </Grid>
- <Grid item xs={1} />
- </Grid>
+ <Grid item xs={1} />
+ </Grid>
+ </MuiThemeProvider>
</div>
- <Fab
- color="primary"
- size="large"
- aria-label="add"
- className={classes.fab}
- onClick={handleOpen}
- >
- <AddIcon className={classes.extendedIcon} />
- </Fab>
-
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item xs={8}>
- <Typography variant="h3">Your Next Reservations</Typography>
+ <Hidden smDown>
+ <Fab
+ color="primary"
+ size="large"
+ className={classes.fab}
+ onClick={handleOpen}
+ >
+ <AddIcon className={classes.extendedIcon} />
+ </Fab>
+ </Hidden>
+
+ <Hidden mdUp>
+ <Fab
+ color="primary"
+ size="large"
+ aria-label="add"
+ className={classes.fabSmall}
+ onClick={handleOpen}
+ >
+ <AddIcon className={classes.extendedIcon} />
+ </Fab>
+ </Hidden>
+
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h3">Your Next Reservations</Typography>
+ </Grid>
+ <Grid item xs={2} />
</Grid>
- <Grid item xs={2} />
- </Grid>
- <Reservation departure="" destination="" time="" date="" />
+ <Reservation departure="" destination="" time="" date="" />
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item xs={8}>
- <Typography variant="h3" align="right">
- Your Past Reservations
- </Typography>
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h3" align="right">
+ Your Past Reservations
+ </Typography>
+ </Grid>
+ <Grid item xs={2} />
</Grid>
- <Grid item xs={2} />
- </Grid>
- <Reservation departure="" destination="" time="" date="" />
+ <Reservation departure="" destination="" time="" date="" />
+ </MuiThemeProvider>
</Grid>
</div>
);
--
GitLab