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
This commit is part of merge request !60. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
src/components/Dashboard/HomePage/HomePage.tsx
+ 22
− 21
Edit View file @ 3d0dcb7b
......@@ -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>
);
......
src/components/Dashboard/HomePage/Numbers.tsx
+ 34
− 10
Edit View file @ 3d0dcb7b
......@@ -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>
......
src/components/Dashboard/ProfilePage/ProfilePage.tsx
+ 0
− 6
Edit View file @ 3d0dcb7b
......@@ -12,12 +12,6 @@ import {
createMuiTheme,
responsiveFontSizes,
MuiThemeProvider,
Container,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
TextField,
Button,
Select,
......
src/components/Dashboard/ReservationPage/ReservationPage.style.ts
+ 9
− 1
Edit View file @ 3d0dcb7b
......@@ -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',
},
}));
src/components/Dashboard/ReservationPage/ReservationPage.tsx
+ 62
− 38
Edit View file @ 3d0dcb7b
......@@ -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>
);
......
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