leomurca/if-salas-web
leomurca/if-salas-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add mobile layout to people tab

Browse source
This commit is contained in:
Leonardo Murça 2022-08-28 15:16:07 -03:00
parent dd256b3fb5
commit 9f05b4f3c1
1 changed files with 166 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

168
src/screens/Classroom/PeopleTab/index.js
View file

@ -159,9 +159,173 @@ function PeopleTab({ layoutType, peopleTabData }) {
} else if (layoutType === 'mobile') { } else if (layoutType === 'mobile') {
switch (state) { switch (state) {
case 'loading': case 'loading':
return <h1>Loading...</h1>; return (
<Container
sx={{ marginTop: '50px', height: '100vh' }}
disableGutters
>
<Stack alignItems="center">
<Skeleton
variant="rectangular"
width="90%"
height={50}
sx={{ marginBottom: '30px' }}
/>
<Stack
flexDirection="row"
alignItems="center"
sx={{ width: '90%', marginLeft: '20px' }}
>
<Skeleton variant="circular" width={40} height={40} />
<Skeleton
variant="rectangular"
width="80%"
height={30}
sx={{ marginLeft: '15px' }}
/>
</Stack>
</Stack>
<Stack alignItems="center">
<Skeleton
variant="rectangular"
width="90%"
height={50}
sx={{ marginBottom: '30px', marginTop: '50px' }}
/>
{createArrayFrom1ToN(5).map(i => (
<Stack
key={i}
flexDirection="row"
alignItems="center"
sx={{ width: '90%', marginLeft: '20px', marginTop: '25px' }}
>
<Skeleton variant="circular" width={40} height={40} />
<Skeleton
variant="rectangular"
width="80%"
height={30}
sx={{ marginLeft: '15px' }}
/>
</Stack>
))}
</Stack>
</Container>
);
case 'idle': case 'idle':
return <h1>People Tab</h1>; return (
<Container
sx={{ marginTop: '50px', height: '100vh' }}
disableGutters
>
<Container sx={{ width: '90%' }} disableGutters>
<Typography
sx={{
padding: '10px',
borderBottom: '2px solid #00420D',
color: '#00420D',
}}
variant="h5"
>
Docentes
</Typography>
<Stack alignItems="center">
{people
.filter(p => p.role === 'PROFESSOR')
.map(p => (
<Container
key={p.id}
sx={{
width: '95%',
padding: '20px',
borderBottom: '2px solid #BCBCBC',
display: 'flex',
alignItems: 'center',
}}
disableGutters
>
<Avatar
alt={p.name}
src={p.avatar}
sx={{
width: '40px',
height: '40px',
marginRight: '15px',
}}
/>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 1,
WebkitBoxOrient: 'vertical',
}}
variant="body1"
>
{p.name}
</Typography>
</Container>
))}
</Stack>
</Container>
<Container
sx={{ width: '90%', marginTop: '30px' }}
disableGutters
>
<Typography
sx={{
padding: '10px',
borderBottom: '2px solid #00420D',
color: '#00420D',
}}
variant="h5"
>
Discentes
</Typography>
<Stack alignItems="center">
{people
.filter(p => p.role === 'STUDENT')
.map(p => (
<Container
key={p.id}
sx={{
width: '95%',
padding: '20px',
borderBottom: '2px solid #BCBCBC',
display: 'flex',
alignItems: 'center',
}}
disableGutters
>
<Avatar
alt={p.name}
src={p.avatar}
sx={{
width: '40px',
height: '40px',
marginRight: '15px',
}}
/>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 1,
WebkitBoxOrient: 'vertical',
}}
variant="body1"
>
{p.name}
</Typography>
</Container>
))}
</Stack>
</Container>
</Container>
);
case 'gone': case 'gone':
return null; return null;
default: default: