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,
} from '@mui/material';
function ClassCard({ abbreviation, title, color, teachers }) {
return (
<Card sx={{ width: 420 }}>
<CardActionArea sx={{ display: 'flex', flexDirection: 'row' }}>
<Container
sx={{
backgroundColor: color,
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
function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
switch (layoutType) {
case 'desktop':
return (
<Card sx={{ width: 390, height: 145 }}>
<CardActionArea sx={{ display: 'flex', flexDirection: 'row' }}>
<Container
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
backgroundColor: color,
width: '30%',
height: '145px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
}}
variant="body2"
color="text.secondary"
>
{teachers.map(t => t.name).join(',')}
</Typography>
</Stack>
</CardContent>
</CardActionArea>
</Card>
);
<h1>{abbreviation}</h1>
</Container>
<CardContent sx={{ width: '70%' }}>
<Typography
sx={{
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;

2
src/components/MainMenu.js
View file

@ -46,7 +46,7 @@ function MainMenu({ options, layoutType }) {
case 'mobile':
return (
<Box sx={{ width: '100%', position: 'fixed', bottom: 0 }}>
<Box sx={{ width: '100%', position: 'fixed', bottom: 0, zIndex: 2 }}>
<BottomNavigation
onChange={(_, 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 ClassCard from '../../components/ClassCard';
import useLayoutType from '../../hooks/useLayoutType';
function Home() {
const layoutType = useLayoutType();
const { fetchClassrooms } = useUser();
const [classrooms, setClassrooms] = useState(null);
@ -16,69 +18,166 @@ function Home() {
getClassrooms();
}, [fetchClassrooms]);
return (
<Grid sx={{ height: '100vh', margin: 0 }} container spacing={2}>
<Grid sx={{}} item xs={8}>
<h1>Turmas</h1>
<Stack alignItems="center" flexWrap="wrap" direction="row" gap="30px">
{classrooms === null ? (
Array(6)
.fill()
.map((_, index) => (
<Skeleton
key={index}
variant="rectangular"
width={420}
height={145}
switch (layoutType) {
case 'desktop':
return (
<Grid sx={{ height: '100vh', margin: 0 }} container spacing={2}>
<Grid sx={{}} item xs={8}>
<h1>Turmas</h1>
<Stack
alignItems="center"
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 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 => (
<ClassCard
key={classroom.name}
abbreviation={classroom.abbreviation}
title={classroom.name}
color={classroom.color}
teachers={classroom.teachers}
/>
))
) : (
<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={420}
height={145}
) : (
<h1>Nenhuma sala de aula encontrada!</h1>
)}
</Stack>
<h1>Atividades</h1>
<h2>Atribuídas</h2>
<Stack
sx={{
paddingBottom: '100px',
}}
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 => (
<ClassCard
key={classroom.name}
abbreviation={classroom.abbreviation}
title={classroom.name}
color={classroom.color}
teachers={classroom.teachers}
/>
))
) : (
<h1>Nenhuma sala de aula encontrada!</h1>
)}
) : (
<h1>Nenhuma sala de aula encontrada!</h1>
)}
</Stack>
</Stack>
</Grid>
</Grid>
);
);
default:
return null;
}
}
export default Home;