fix: home screen style fixed for mobile view #108

Merged
s merged 1 commits from home-screen-style-fix into staging 2024-06-07 19:39:27 +00:00
2 changed files with 95 additions and 35 deletions
Showing only changes of commit 6f8830a77c - Show all commits

View File

@ -5,7 +5,7 @@ import {
PersonOutline, PersonOutline,
Upload Upload
} from '@mui/icons-material' } from '@mui/icons-material'
import { Box, Button, Typography } from '@mui/material' import { Box, Button, Tooltip, Typography } from '@mui/material'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { appPrivateRoutes } from '../../routes' import { appPrivateRoutes } from '../../routes'
import styles from './style.module.scss' import styles from './style.module.scss'
@ -19,7 +19,16 @@ export const HomePage = () => {
<Typography variant="h3" className={styles.title}> <Typography variant="h3" className={styles.title}>
Sigits Sigits
</Typography> </Typography>
<Box className={styles.actionButtons}> {/* This is for desktop view */}
<Box
className={styles.actionButtons}
sx={{
display: {
xs: 'none',
md: 'flex'
}
}}
>
<Button <Button
variant="outlined" variant="outlined"
startIcon={<Upload />} startIcon={<Upload />}
@ -35,19 +44,71 @@ export const HomePage = () => {
Create Create
</Button> </Button>
</Box> </Box>
{/* This is for mobile view */}
<Box
className={styles.actionButtons}
sx={{
display: {
xs: 'flex',
md: 'none'
}
}}
>
<Tooltip title="Upload" arrow>
<Button
variant="outlined"
onClick={() => navigate(appPrivateRoutes.sign)}
>
<Upload />
</Button>
</Tooltip>
<Tooltip title="Create" arrow>
<Button
variant="contained"
onClick={() => navigate(appPrivateRoutes.create)}
>
<Add />
</Button>
</Tooltip>
</Box> </Box>
</Box>
<Box className={styles.submissions}>
<PlaceHolder /> <PlaceHolder />
<PlaceHolder /> <PlaceHolder />
<PlaceHolder /> <PlaceHolder />
</Box> </Box>
</Box>
) )
} }
const PlaceHolder = () => { const PlaceHolder = () => {
return ( return (
<Box className={styles.submissions}> <Box
<Box className={styles.item}> className={styles.item}
<Box className={styles.titleBox}> sx={{
flexDirection: {
xs: 'column',
md: 'row'
}
}}
>
<Box
className={styles.titleBox}
sx={{
flexDirection: {
xs: 'row',
md: 'column'
},
borderBottomLeftRadius: {
xs: 'initial',
md: 'inherit'
},
borderTopRightRadius: {
xs: 'inherit',
md: 'initial'
}
}}
>
<Typography variant="body1" className={styles.titleBoxItem}> <Typography variant="body1" className={styles.titleBoxItem}>
<Description /> <Description />
Title Title
@ -76,6 +137,5 @@ const PlaceHolder = () => {
</Box> </Box>
</Box> </Box>
</Box> </Box>
</Box>
) )
} }

View File

@ -15,7 +15,6 @@
} }
.actionButtons { .actionButtons {
display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
@ -25,6 +24,7 @@
.submissions { .submissions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px;
.item { .item {
display: flex; display: flex;
@ -33,10 +33,10 @@
.titleBox { .titleBox {
display: flex; display: flex;
flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: space-between;
padding: 10px; padding: 10px;
background-color: #e7e2df99; background-color: #cdc8c499;
border-top-left-radius: inherit; border-top-left-radius: inherit;
border-bottom-left-radius: inherit; border-bottom-left-radius: inherit;