sigit/sigit.io
6
2
Fork 0
Code Issues 55 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

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
Conversation 0 Commits 1 Files Changed 2 +95 -35
2 changed files with 95 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/pages/home/index.tsx
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,45 +44,96 @@ 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>
<PlaceHolder />
<PlaceHolder />
<PlaceHolder />
</Box>
)
}
const PlaceHolder = () => {
return (
<Box className={styles.submissions}>
<Box className={styles.item}>
<Box className={styles.titleBox}>
<Typography variant="body1" className={styles.titleBoxItem}>
<Description />
Title
</Typography>
<Typography variant="body2" className={styles.titleBoxItem}>
<PersonOutline />
Sigit
</Typography>
<Typography variant="body2" className={styles.titleBoxItem}>
<CalendarMonth />
07 Jun 10:23 AM
<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
</Typography>
<Typography variant="body2" className={styles.titleBoxItem}>
<PersonOutline />
Sigit
</Typography>
<Typography variant="body2" className={styles.titleBoxItem}>
<CalendarMonth />
07 Jun 10:23 AM
</Typography>
</Box>
<Box className={styles.signers}>
<Box className={styles.signerItem}>
<Typography variant="button" className={styles.status}>
Sent
</Typography>
<Typography variant="body1">placeholder@sigit.io</Typography>
</Box>
<Box className={styles.signers}>
<Box className={styles.signerItem}>
<Typography variant="button" className={styles.status}>
Sent
</Typography>
<Typography variant="body1">placeholder@sigit.io</Typography>
</Box>
<Box className={styles.signerItem}>
<Typography variant="button" className={styles.status}>
Awaiting
</Typography>
<Typography variant="body1">placeholder@sigit.io</Typography>
</Box>
<Box className={styles.signerItem}>
<Typography variant="button" className={styles.status}>
Awaiting
</Typography>
<Typography variant="body1">placeholder@sigit.io</Typography>
</Box>
</Box>
</Box>

6
src/pages/home/style.module.scss
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;