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,
Upload
} 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 { appPrivateRoutes } from '../../routes'
import styles from './style.module.scss'
@ -19,7 +19,16 @@ export const HomePage = () => {
<Typography variant="h3" className={styles.title}>
Sigits
</Typography>
<Box className={styles.actionButtons}>
{/* This is for desktop view */}
<Box
className={styles.actionButtons}
sx={{
display: {
xs: 'none',
md: 'flex'
}
}}
>
<Button
variant="outlined"
startIcon={<Upload />}
@ -35,19 +44,71 @@ export const HomePage = () => {
Create
</Button>
</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 className={styles.submissions}>
<PlaceHolder />
<PlaceHolder />
<PlaceHolder />
</Box>
</Box>
)
}
const PlaceHolder = () => {
return (
<Box className={styles.submissions}>
<Box className={styles.item}>
<Box className={styles.titleBox}>
<Box
className={styles.item}
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}>
<Description />
Title
@ -76,6 +137,5 @@ const PlaceHolder = () => {
</Box>
</Box>
</Box>
</Box>
)
}

View File

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