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

Make classroom cards responsive

Browse source
This commit is contained in:
Leonardo Murça 2022-06-22 16:18:37 -03:00
parent 2f570e5989
commit bf87ed2f8c
3 changed files with 273 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

162
src/components/ClassCard.js
View file

@ -9,56 +9,124 @@ import {
AvatarGroup, AvatarGroup,
} from '@mui/material'; } from '@mui/material';
function ClassCard({ abbreviation, title, color, teachers }) { function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
return ( switch (layoutType) {
<Card sx={{ width: 420 }}> case 'desktop':
<CardActionArea sx={{ display: 'flex', flexDirection: 'row' }}> return (
<Container <Card sx={{ width: 390, height: 145 }}>
sx={{ <CardActionArea sx={{ display: 'flex', flexDirection: 'row' }}>
backgroundColor: color, <Container
width: '140px',
height: '145px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
}}
>
<h1>{abbreviation}</h1>
</Container>
<CardContent sx={{ width: '280px' }}>
<Typography gutterBottom variant="h5" component="div">
{title}
</Typography>
<Stack alignItems="center" direction="row" spacing={1}>
<AvatarGroup total={teachers.length}>
{teachers.map(t => (
<Avatar
key={t.name}
alt={t.name}
src={t.avatar}
sx={{ width: 30, height: 30 }}
/>
))}
</AvatarGroup>
<Typography
sx={{ sx={{
overflow: 'hidden', backgroundColor: color,
textOverflow: 'ellipsis', width: '30%',
display: '-webkit-box', height: '145px',
WebkitLineClamp: 2, display: 'flex',
WebkitBoxOrient: 'vertical', alignItems: 'center',
justifyContent: 'center',
color: 'white',
}} }}
variant="body2"
color="text.secondary"
> >
{teachers.map(t => t.name).join(',')} <h1>{abbreviation}</h1>
</Typography> </Container>
</Stack> <CardContent sx={{ width: '70%' }}>
</CardContent> <Typography
</CardActionArea> sx={{
</Card> overflow: 'hidden',
); textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}}
gutterBottom
variant="h5"
component="div"
>
{title}
</Typography>
<Stack alignItems="center" direction="row" spacing={1}>
<AvatarGroup total={teachers.length}>
{teachers.map(t => (
<Avatar
key={t.name}
alt={t.name}
src={t.avatar}
sx={{ width: 30, height: 30 }}
/>
))}
</AvatarGroup>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}}
variant="body2"
color="text.secondary"
>
{teachers.map(t => t.name).join(',')}
</Typography>
</Stack>
</CardContent>
</CardActionArea>
</Card>
);
case 'mobile':
return (
<Card sx={{ width: '100%' }}>
<CardActionArea sx={{ display: 'flex', flexDirection: 'column' }}>
<Container
sx={{
backgroundColor: color,
width: '100%',
height: '145px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
}}
>
<h1>{abbreviation}</h1>
</Container>
<CardContent sx={{ width: '100%' }}>
<Typography gutterBottom variant="h5" component="div">
{title}
</Typography>
<Stack alignItems="center" direction="row" spacing={1}>
<AvatarGroup total={teachers.length}>
{teachers.map(t => (
<Avatar
key={t.name}
alt={t.name}
src={t.avatar}
sx={{ width: 30, height: 30 }}
/>
))}
</AvatarGroup>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}}
variant="body2"
color="text.secondary"
>
{teachers.map(t => t.name).join(',')}
</Typography>
</Stack>
</CardContent>
</CardActionArea>
</Card>
);
default:
return null;
}
} }
export default ClassCard; export default ClassCard;

2
src/components/MainMenu.js
View file

@ -46,7 +46,7 @@ function MainMenu({ options, layoutType }) {
case 'mobile': case 'mobile':
return ( return (
<Box sx={{ width: '100%', position: 'fixed', bottom: 0 }}> <Box sx={{ width: '100%', position: 'fixed', bottom: 0, zIndex: 2 }}>
<BottomNavigation <BottomNavigation
onChange={(_, newValue) => { onChange={(_, newValue) => {
const newOption = options.find(option => option.id === newValue); const newOption = options.find(option => option.id === newValue);

215
src/screens/Home/index.js
View file

@ -3,8 +3,10 @@ import { Grid, Skeleton, Stack } from '@mui/material';
import { useUser } from '../../context/user'; import { useUser } from '../../context/user';
import ClassCard from '../../components/ClassCard'; import ClassCard from '../../components/ClassCard';
import useLayoutType from '../../hooks/useLayoutType';
function Home() { function Home() {
const layoutType = useLayoutType();
const { fetchClassrooms } = useUser(); const { fetchClassrooms } = useUser();
const [classrooms, setClassrooms] = useState(null); const [classrooms, setClassrooms] = useState(null);
@ -16,69 +18,166 @@ function Home() {
getClassrooms(); getClassrooms();
}, [fetchClassrooms]); }, [fetchClassrooms]);
return ( switch (layoutType) {
<Grid sx={{ height: '100vh', margin: 0 }} container spacing={2}> case 'desktop':
<Grid sx={{}} item xs={8}> return (
<h1>Turmas</h1> <Grid sx={{ height: '100vh', margin: 0 }} container spacing={2}>
<Stack alignItems="center" flexWrap="wrap" direction="row" gap="30px"> <Grid sx={{}} item xs={8}>
{classrooms === null ? ( <h1>Turmas</h1>
Array(6) <Stack
.fill() alignItems="center"
.map((_, index) => ( flexWrap="wrap"
<Skeleton direction="row"
key={index} gap="30px"
variant="rectangular" >
width={420} {classrooms === null ? (
height={145} Array(6)
.fill()
.map((_, index) => (
<Skeleton
key={index}
variant="rectangular"
width={390}
height={145}
/>
))
) : classrooms.length !== 0 ? (
classrooms.map(classroom => (
<ClassCard
key={classroom.name}
abbreviation={classroom.abbreviation}
title={classroom.name}
color={classroom.color}
teachers={classroom.teachers}
layoutType={layoutType}
/>
))
) : (
<h1>Nenhuma sala de aula encontrada!</h1>
)}
</Stack>
</Grid>
<Grid sx={{ borderLeft: '4px solid #CFCFCF' }} item xs={4}>
<h1>Atividades</h1>
<h2>Atribuídas</h2>
<Stack alignItems="end" flexWrap="wrap" direction="row" gap="30px">
{classrooms === null ? (
Array(6)
.fill()
.map((_, index) => (
<Skeleton
key={index}
variant="rectangular"
width={390}
height={145}
/>
))
) : classrooms.length !== 0 ? (
classrooms.map(classroom => (
<ClassCard
key={classroom.name}
abbreviation={classroom.abbreviation}
title={classroom.name}
color={classroom.color}
teachers={classroom.teachers}
layoutType={layoutType}
/>
))
) : (
<h1>Nenhuma sala de aula encontrada!</h1>
)}
</Stack>
</Grid>
</Grid>
);
case 'mobile':
return (
<Stack
sx={{
height: 'inherit',
width: '100%',
padding: '10px 20px ',
margin: 0,
}}
>
<h1>Turmas</h1>
<Stack
alignItems="center"
justifyContent="center"
flexWrap="wrap"
direction="row"
gap="30px"
>
{classrooms === null ? (
Array(6)
.fill()
.map((_, index) => (
<Skeleton
key={index}
variant="rectangular"
width="100%"
height={245}
/>
))
) : classrooms.length !== 0 ? (
classrooms.map(classroom => (
<ClassCard
key={classroom.name}
abbreviation={classroom.abbreviation}
title={classroom.name}
color={classroom.color}
teachers={classroom.teachers}
layoutType={layoutType}
/> />
)) ))
) : classrooms.length !== 0 ? ( ) : (
classrooms.map(classroom => ( <h1>Nenhuma sala de aula encontrada!</h1>
<ClassCard )}
key={classroom.name} </Stack>
abbreviation={classroom.abbreviation} <h1>Atividades</h1>
title={classroom.name} <h2>Atribuídas</h2>
color={classroom.color} <Stack
teachers={classroom.teachers} sx={{
/> paddingBottom: '100px',
)) }}
) : ( alignItems="center"
<h1>Nenhuma sala de aula encontrada!</h1> justifyContent="center"
)} flexWrap="wrap"
</Stack> direction="row"
</Grid> gap="30px"
<Grid sx={{ borderLeft: '4px solid #CFCFCF' }} item xs={4}> >
<h1>Atividades</h1> {classrooms === null ? (
<h2>Atribuídas</h2> Array(6)
<Stack alignItems="end" flexWrap="wrap" direction="row" gap="30px"> .fill()
{classrooms === null ? ( .map((_, index) => (
Array(6) <Skeleton
.fill() key={index}
.map((_, index) => ( variant="rectangular"
<Skeleton width="100%"
key={index} height={245}
variant="rectangular" />
width={420} ))
height={145} ) : classrooms.length !== 0 ? (
classrooms.map(classroom => (
<ClassCard
key={classroom.name}
abbreviation={classroom.abbreviation}
title={classroom.name}
color={classroom.color}
teachers={classroom.teachers}
layoutType={layoutType}
/> />
)) ))
) : classrooms.length !== 0 ? ( ) : (
classrooms.map(classroom => ( <h1>Nenhuma sala de aula encontrada!</h1>
<ClassCard )}
key={classroom.name} </Stack>
abbreviation={classroom.abbreviation}
title={classroom.name}
color={classroom.color}
teachers={classroom.teachers}
/>
))
) : (
<h1>Nenhuma sala de aula encontrada!</h1>
)}
</Stack> </Stack>
</Grid> );
</Grid> default:
); return null;
}
} }
export default Home; export default Home;