Skip to content
Snippets Groups Projects
Commit 3d0dcb7b authored by Francesco's avatar Francesco
Browse files

Reservation Page is Responsive

parent 355b01f0
No related branches found
No related tags found
1 merge request!60New component to search senior (see #12). Enhance responsiveness and solve #10 and #11
Pipeline #12677 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/components/Dashboard/HomePage/HomePage.tsx
+ 22
− 21
View file @ 3d0dcb7b
...@@ -98,32 +98,33 @@ export const HomePage: FC = () => { ...@@ -98,32 +98,33 @@ export const HomePage: FC = () => {
</MuiThemeProvider> </MuiThemeProvider>
</div> </div>
<Grid item container className={classes.paddingTop}> <MuiThemeProvider theme={themeResp}>
<Grid item xs={2} /> <Grid item container className={classes.paddingTop}>
<Grid item xs={8}> <Grid item xs={2} />
<Typography variant="h3">Your Next Reservation</Typography> <Grid item xs={8}>
<Typography variant="h2">Your Next Reservation</Typography>
</Grid>
<Grid item xs={2} />
</Grid> </Grid>
<Grid item xs={2} />
</Grid>
<Grid item container style={{ paddingTop: '20px' }}> <Grid item container style={{ paddingTop: '20px' }}>
<Grid item xs={1} lg={2} /> <Grid item xs={1} lg={2} />
<Grid item xs={10} lg={8}> <Grid item xs={10} lg={8}>
<Reservation departure="" destination="" time="" date="" /> <Reservation departure="" destination="" time="" date="" />
</Grid>
<Grid item xs={1} lg={2} />
</Grid> </Grid>
<Grid item xs={1} lg={2} />
</Grid>
<Grid item container className={classes.paddingTop}> <Grid item container className={classes.paddingTop}>
<Grid item xs={2} /> <Grid item xs={2} />
<Grid item xs={8}> <Grid item xs={8}>
<Typography variant="h3" align="right"> <Typography variant="h2" align="right">
Some Our Numbers Some Our Numbers
</Typography> </Typography>
</Grid>
<Grid item xs={2} />
</Grid> </Grid>
<Grid item xs={2} /> </MuiThemeProvider>
</Grid>
<Numbers /> <Numbers />
</Grid> </Grid>
); );
......
src/components/Dashboard/HomePage/Numbers.tsx
+ 34
− 10
View file @ 3d0dcb7b
...@@ -69,9 +69,17 @@ export const Numbers: FC = () => { ...@@ -69,9 +69,17 @@ export const Numbers: FC = () => {
300 300
</Typography> </Typography>
<Typography variant="h6" align="center"> <Hidden smDown>
Rides Offered <Typography variant="h6" align="center">
</Typography> Rides Offered
</Typography>
</Hidden>
<Hidden mdUp>
<Typography variant="h6" align="center">
Rides
</Typography>
</Hidden>
</CardContent> </CardContent>
</Grid> </Grid>
...@@ -92,12 +100,20 @@ export const Numbers: FC = () => { ...@@ -92,12 +100,20 @@ export const Numbers: FC = () => {
</Grid> </Grid>
<Typography variant="h4" align="center"> <Typography variant="h4" align="center">
25000 2500
</Typography> </Typography>
<Typography variant="h6" align="center"> <Hidden smDown>
Kilometers <Typography variant="h6" align="center">
</Typography> Kilometers
</Typography>
</Hidden>
<Hidden mdUp>
<Typography variant="h6" align="center">
Kms
</Typography>
</Hidden>
</CardContent> </CardContent>
</Grid> </Grid>
...@@ -125,9 +141,17 @@ export const Numbers: FC = () => { ...@@ -125,9 +141,17 @@ export const Numbers: FC = () => {
225 225
</Typography> </Typography>
<Typography variant="h6" align="center"> <Hidden smDown>
People who used our service <Typography variant="h6" align="center">
</Typography> People who used our service
</Typography>
</Hidden>
<Hidden mdUp>
<Typography variant="h6" align="center">
Users
</Typography>
</Hidden>
</CardContent> </CardContent>
</Grid> </Grid>
......
src/components/Dashboard/ProfilePage/ProfilePage.tsx
+ 0
− 6
View file @ 3d0dcb7b
...@@ -12,12 +12,6 @@ import { ...@@ -12,12 +12,6 @@ import {
createMuiTheme, createMuiTheme,
responsiveFontSizes, responsiveFontSizes,
MuiThemeProvider, MuiThemeProvider,
Container,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
TextField, TextField,
Button, Button,
Select, Select,
......
src/components/Dashboard/ReservationPage/ReservationPage.style.ts
+ 9
− 1
View file @ 3d0dcb7b
...@@ -41,11 +41,19 @@ export const useStyles = makeStyles(() => ({ ...@@ -41,11 +41,19 @@ export const useStyles = makeStyles(() => ({
fontSize: '50px', fontSize: '50px',
}, },
fab: { fab: {
margin: '1.5em', margin: '1.9em',
bottom: '0', bottom: '0',
right: '0', right: '0',
position: 'fixed', position: 'fixed',
fontSize: '2em', fontSize: '2em',
padding: '1.5em', padding: '1.5em',
}, },
fabSmall: {
margin: '1.4em',
bottom: '0',
right: '0',
position: 'fixed',
fontSize: '1.7em',
padding: '1.4em',
},
})); }));
src/components/Dashboard/ReservationPage/ReservationPage.tsx
+ 62
− 38
View file @ 3d0dcb7b
...@@ -7,7 +7,11 @@ import { ...@@ -7,7 +7,11 @@ import {
DialogContent, DialogContent,
DialogContentText, DialogContentText,
DialogTitle, DialogTitle,
Hidden,
Button, Button,
MuiThemeProvider,
createMuiTheme,
responsiveFontSizes,
} from '@material-ui/core'; } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@material-ui/icons/Add';
import Fab from '@material-ui/core/Fab'; import Fab from '@material-ui/core/Fab';
...@@ -20,6 +24,9 @@ import { InputField } from 'components/Auth/InputField/InputField'; ...@@ -20,6 +24,9 @@ import { InputField } from 'components/Auth/InputField/InputField';
import { useStyles } from './ReservationPage.style'; import { useStyles } from './ReservationPage.style';
import { ReservationDialog } from './ReservationDialog'; import { ReservationDialog } from './ReservationDialog';
let themeResp = createMuiTheme();
themeResp = responsiveFontSizes(themeResp);
export const ReservationPage: FC = () => { export const ReservationPage: FC = () => {
const classes = useStyles(); const classes = useStyles();
const { control, handleSubmit } = useForm<ReservationProps>(); const { control, handleSubmit } = useForm<ReservationProps>();
...@@ -51,53 +58,70 @@ export const ReservationPage: FC = () => { ...@@ -51,53 +58,70 @@ export const ReservationPage: FC = () => {
</Grid> </Grid>
<ReservationDialog handleClose={handleClose} isOpen={isOpen} /> <ReservationDialog handleClose={handleClose} isOpen={isOpen} />
<Grid item container className={classes.paddingBottom}> <MuiThemeProvider theme={themeResp}>
<Grid item xs={1} md={2} lg={2} /> <Grid item container className={classes.paddingBottom}>
<Grid item xs={1} md={2} lg={2} />
<Grid item xs={10} md={6} lg={4}> <Grid item xs={10} md={6} lg={4}>
<Typography variant="h2" className={classes.whiteText}> <Typography variant="h2" className={classes.whiteText}>
Plan Here Your Plan Here Your
</Typography> </Typography>
<Typography variant="h1" className={classes.whiteText}> <Typography variant="h2" className={classes.whiteText}>
RESERVATIONS RESERVATIONS
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={1} /> <Grid item xs={1} />
</Grid> </Grid>
</MuiThemeProvider>
</div> </div>
<Fab <Hidden smDown>
color="primary" <Fab
size="large" color="primary"
aria-label="add" size="large"
className={classes.fab} className={classes.fab}
onClick={handleOpen} onClick={handleOpen}
> >
<AddIcon className={classes.extendedIcon} /> <AddIcon className={classes.extendedIcon} />
</Fab> </Fab>
</Hidden>
<Grid item container className={classes.paddingTop}>
<Grid item xs={2} /> <Hidden mdUp>
<Grid item xs={8}> <Fab
<Typography variant="h3">Your Next Reservations</Typography> 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>
<Grid item xs={2} />
</Grid>
<Reservation departure="" destination="" time="" date="" /> <Reservation departure="" destination="" time="" date="" />
<Grid item container className={classes.paddingTop}> <Grid item container className={classes.paddingTop}>
<Grid item xs={2} /> <Grid item xs={2} />
<Grid item xs={8}> <Grid item xs={8}>
<Typography variant="h3" align="right"> <Typography variant="h3" align="right">
Your Past Reservations Your Past Reservations
</Typography> </Typography>
</Grid>
<Grid item xs={2} />
</Grid> </Grid>
<Grid item xs={2} />
</Grid>
<Reservation departure="" destination="" time="" date="" /> <Reservation departure="" destination="" time="" date="" />
</MuiThemeProvider>
</Grid> </Grid>
</div> </div>
); );
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment