Make classroom cards responsive

src/components/ClassCard.js

@@ -9,14 +9,16 @@ import {
   AvatarGroup,
 } from '@mui/material';
 
-function ClassCard({ abbreviation, title, color, teachers }) {
+function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
+  switch (layoutType) {
+    case 'desktop':
       return (
-    <Card sx={{ width: 420 }}>
+        <Card sx={{ width: 390, height: 145 }}>
           <CardActionArea sx={{ display: 'flex', flexDirection: 'row' }}>
             <Container
               sx={{
                 backgroundColor: color,
-            width: '140px',
+                width: '30%',
                 height: '145px',
                 display: 'flex',
                 alignItems: 'center',
@@ -26,7 +28,69 @@ function ClassCard({ abbreviation, title, color, teachers }) {
             >
               <h1>{abbreviation}</h1>
             </Container>
-        <CardContent sx={{ width: '280px' }}>
+            <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>
@@ -59,6 +123,10 @@ function ClassCard({ abbreviation, title, color, teachers }) {
           </CardActionArea>
         </Card>
       );
+
+    default:
+      return null;
+  }
 }
 
 export default ClassCard;

src/components/MainMenu.js

@@ -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);

src/screens/Home/index.js

@@ -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,11 +18,18 @@ function Home() {
     getClassrooms();
   }, [fetchClassrooms]);
 
+  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">
+            <Stack
+              alignItems="center"
+              flexWrap="wrap"
+              direction="row"
+              gap="30px"
+            >
               {classrooms === null ? (
                 Array(6)
                   .fill()
@@ -28,7 +37,7 @@ function Home() {
                     <Skeleton
                       key={index}
                       variant="rectangular"
-                  width={420}
+                      width={390}
                       height={145}
                     />
                   ))
@@ -40,6 +49,7 @@ function Home() {
                     title={classroom.name}
                     color={classroom.color}
                     teachers={classroom.teachers}
+                    layoutType={layoutType}
                   />
                 ))
               ) : (
@@ -58,7 +68,7 @@ function Home() {
                     <Skeleton
                       key={index}
                       variant="rectangular"
-                  width={420}
+                      width={390}
                       height={145}
                     />
                   ))
@@ -70,6 +80,7 @@ function Home() {
                     title={classroom.name}
                     color={classroom.color}
                     teachers={classroom.teachers}
+                    layoutType={layoutType}
                   />
                 ))
               ) : (
@@ -79,6 +90,94 @@ function Home() {
           </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}
+                />
+              ))
+            ) : (
+              <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}
+                />
+              ))
+            ) : (
+              <h1>Nenhuma sala de aula encontrada!</h1>
+            )}
+          </Stack>
+        </Stack>
+      );
+    default:
+      return null;
+  }
 }
 
 export default Home;