responsive exercise list

mok-it · Jan 9, 2025 · a98b56c · a98b56c
1 parent 0757081
commit a98b56c
Show file tree

Hide file tree

Showing 14 changed files with 255 additions and 167 deletions.
diff --git a/TASKS.md b/TASKS.md
@@ -13,13 +13,13 @@
 
 ## Fejleszthető
 
-- [ ] Feladat esetén lehetnek collaborator (User)-ek akik ugyan úgy jelenjelenk meg mint a feladat létrehozói
+- [X] Feladat esetén lehetnek collaborator (User)-ek akik ugyan úgy jelenjelenk meg mint a feladat létrehozói
 - [ ] Feladat esetén lehessen módosítani, valamint létrehozásánál megadni, hogy kik a collaborator-ok
 - [ ] Csak a megfelelő jogosultság esetén lehessen adott oldalakra navigálni
    - Pl.: Ha valakinek nincs USER joga akkor csak beküldeni lehessen
 
 - [ ] Esetleg bejelentkezéskor egy jegyezzen meg 30 napra gomb? és akkor hosszú lejáratú tokent generálna a backend
-- [ ] Feladat listázás oldal mobil responsivitás
+- [X] Feladat listázás oldal mobil responsivitás
 - [ ] Home page mobil responsivitás
 - [ ] Oldal frissítésekor a dolgok megmaradjanak (feladat, kereső, stb)
 - [ ] Bármelyik feladat mező lehet latex, esetleg egy modal-os LaTeX editor?

diff --git a/src/Layout.tsx b/src/Layout.tsx
@@ -16,16 +16,17 @@ const Layout: FC = () => {
       <Box
         component={"div"}
         sx={{
-          width: { md: `calc(100% - ${drawerWidth}px)` },
+          width: { lg: `calc(100% - ${drawerWidth}px)` },
           py: { xs: 2 },
-          px: { xs: 2, md: 4 },
+          px: { xs: 0, md: 2 },
         }}
       >
         <IconButton
           onClick={toggle}
           sx={{
             display: { md: "none" },
             mb: 2,
+            ml: 2,
           }}
         >
           <MdMenu />

diff --git a/src/components/CategoryDifficulties.tsx b/src/components/CategoryDifficulties.tsx
@@ -1,8 +1,8 @@
 import { ExerciseAgeGroup } from "@/generated/graphql.tsx";
 import { categoryColors } from "@/theme/palette.ts";
+import { Tooltip } from "@mui/material";
 import Chip from "@mui/material/Chip";
 import tinycolor from "tinycolor2";
-import { Tooltip } from "@mui/material";
 
 type ValueProps = {
   value: { [key in ExerciseAgeGroup]: number };
@@ -14,14 +14,16 @@ export const CategoryDifficulties = (props: ValueProps) => {
         <Tooltip key={key} title={key} placement="top">
           <Chip
             label={props.value[key]}
+            size="small"
             sx={{
               backgroundColor: categoryColors[key],
               color: tinycolor(categoryColors[key]).isDark()
                 ? "white"
                 : "black",
               fontWeight: 700,
               mr: 0.5,
-              visibility: props.value[key] === 0 ? "hidden" : "visible",
+              mb: 0.5,
+              opacity: props.value[key] === 0 ? 0.2 : 1,
             }}
           />
         </Tooltip>

diff --git a/src/components/InfiniteLoad/ExerciseRow.tsx b/src/components/InfiniteLoad/ExerciseRow.tsx
@@ -4,14 +4,23 @@ import {
   ExerciseListElemFragment,
 } from "@/generated/graphql";
 import { exerciseStatus } from "@/util/const";
-import { Box, Chip, TableCell, Tooltip } from "@mui/material";
+import {
+  Box,
+  Chip,
+  Stack,
+  TableCell,
+  Tooltip,
+  Typography,
+  useMediaQuery,
+} from "@mui/material";
 import dayjs from "dayjs";
 import { FC, memo } from "react";
 import { useNavigate } from "react-router-dom";
 import { CategoryDifficulties } from "../CategoryDifficulties";
 import { KaTeX } from "../Katex";
 
 const ExerciseRow: FC<{ data: ExerciseListElemFragment }> = ({ data }) => {
+  const isMobile = useMediaQuery("(max-width: 900px)");
   const navigate = useNavigate();
   const difficulties: Record<ExerciseAgeGroup, number> = {
     KOALA: 0,
@@ -32,43 +41,94 @@ const ExerciseRow: FC<{ data: ExerciseListElemFragment }> = ({ data }) => {
         cursor: "pointer",
       }}
     >
-      <TableCell sx={{ minWidth: 100 }}>
-        <Chip label={"#" + data.id} />
-      </TableCell>
-      <TableCell sx={{ minWidth: 210 }}>
-        <CategoryDifficulties value={difficulties} />
-      </TableCell>
-      <TableCell sx={{ verticalAlign: "middle" }}>
-        <Chip
-          variant="outlined"
-          color={exerciseStatus[data.status].color}
-          label={exerciseStatus[data.status].text}
-        />
-      </TableCell>
-      <TableCell>
-        {data.tags.map((tag, index) => (
-          <Chip key={index} label={tag.name} sx={{ margin: 0.5 }} />
-        ))}
-      </TableCell>
-      <TableCell sx={{ minWidth: 300 }}>
-        <Tooltip title={<KaTeX fixNewLines value={data.description} />}>
-          <Box
-            sx={{
-              maxHeight: 100,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              display: "-webkit-box",
-              WebkitLineClamp: "2",
-              WebkitBoxOrient: "vertical",
-            }}
-          >
-            <KaTeX value={data.description} />
-          </Box>
-        </Tooltip>
-      </TableCell>
-      <TableCell sx={{ verticalAlign: "left" }}>
-        {dayjs(+data.createdAt).format("YYYY. MM. DD.")}
-      </TableCell>
+      {isMobile ? (
+        <TableCell>
+          <Stack spacing={1}>
+            <Stack direction="row" alignItems={"center"} spacing={1}>
+              <Box sx={{ whiteSpace: "nowrap" }}>{"#" + data.id}</Box>
+              <Chip
+                size="small"
+                variant="outlined"
+                color={exerciseStatus[data.status].color}
+                label={exerciseStatus[data.status].text}
+              />
+              <Box flexGrow={1} />
+              <CategoryDifficulties value={difficulties} />
+            </Stack>
+            <Stack
+              direction="row"
+              alignItems={"center"}
+              gap={1}
+              flexWrap="wrap"
+            >
+              {data.tags.map((tag, index) => (
+                <Chip size="small" key={index} label={tag.name} />
+              ))}
+            </Stack>
+            <Tooltip title={<KaTeX fixNewLines value={data.description} />}>
+              <Box
+                sx={{
+                  maxHeight: 100,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  display: "-webkit-box",
+                  WebkitLineClamp: "2",
+                  WebkitBoxOrient: "vertical",
+                }}
+              >
+                <KaTeX value={data.description} />
+              </Box>
+            </Tooltip>
+            <Typography variant="caption">
+              {dayjs(+data.createdAt).format("YYYY. MM. DD.")}
+            </Typography>
+          </Stack>
+        </TableCell>
+      ) : (
+        <>
+          <TableCell sx={{ minWidth: 100 }}>{"#" + data.id}</TableCell>
+          <TableCell sx={{ minWidth: 260 }}>
+            <CategoryDifficulties value={difficulties} />
+          </TableCell>
+          <TableCell sx={{ verticalAlign: "middle" }}>
+            <Chip
+              size="small"
+              variant="outlined"
+              color={exerciseStatus[data.status].color}
+              label={exerciseStatus[data.status].text}
+            />
+          </TableCell>
+          <TableCell>
+            {data.tags.map((tag, index) => (
+              <Chip
+                size="small"
+                key={index}
+                label={tag.name}
+                sx={{ margin: 0.5 }}
+              />
+            ))}
+          </TableCell>
+          <TableCell sx={{ minWidth: 300 }}>
+            <Tooltip title={<KaTeX fixNewLines value={data.description} />}>
+              <Box
+                sx={{
+                  maxHeight: 100,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  display: "-webkit-box",
+                  WebkitLineClamp: "2",
+                  WebkitBoxOrient: "vertical",
+                }}
+              >
+                <KaTeX value={data.description} />
+              </Box>
+            </Tooltip>
+          </TableCell>
+          <TableCell sx={{ verticalAlign: "left" }}>
+            {dayjs(+data.createdAt).format("YYYY. MM. DD.")}
+          </TableCell>
+        </>
+      )}
     </StyledTableRow>
   );
 };

diff --git a/src/components/InfiniteLoad/InfiniteLoad.tsx b/src/components/InfiniteLoad/InfiniteLoad.tsx
@@ -1,4 +1,4 @@
-import { Box, TableCell, TableRow } from "@mui/material";
+import { Box } from "@mui/material";
 import { ReactNode, useCallback, useEffect, useRef } from "react";
 import { useEffectOnce, useIntersection } from "react-use";
 
@@ -50,53 +50,30 @@ export function InfiniteLoad<T>({
   return (
     <>
       {isInitialLoading ? (
-        <TableRow>
-          <TableCell>Loading...</TableCell>
-        </TableRow>
+        <Box p={2}>Loading...</Box>
       ) : (
         <>
           {data.map((row, index) => {
             const isLoaderRow = index > data.length - 1;
             return !isLoaderRow && children(row as T);
           })}
-          {hasMore &&
-            (loadingElement || (
-              <TableRow>
-                <TableCell />
-                <TableCell>Loading...</TableCell>
-                <TableCell />
-                <TableCell />
-                <TableCell />
-              </TableRow>
-            ))}
+          {hasMore && (loadingElement || <Box p={2}>Loading...</Box>)}
         </>
       )}
       {!hasMore && !isFetchingNextPage && (
-        <TableRow>
-          <TableCell />
-          <TableCell>
-            {data.length > 0 ? "A végére értél" : "Nincs találat"}
-          </TableCell>
-          <TableCell />
-          <TableCell />
-          <TableCell />
-        </TableRow>
+        <Box p={2}>{data.length > 0 ? "A végére értél" : "Nincs találat"}</Box>
       )}
-      <TableRow>
-        <TableCell>
-          <Box
-            ref={intersectionRef}
-            style={{
-              position: "relative",
-              bottom: 400,
-              left: 0,
-              height: 10,
-              width: 10,
-              pointerEvents: "none",
-            }}
-          ></Box>
-        </TableCell>
-      </TableRow>
+      <Box
+        ref={intersectionRef}
+        style={{
+          position: "relative",
+          bottom: 400,
+          left: 0,
+          height: 10,
+          width: 10,
+          pointerEvents: "none",
+        }}
+      ></Box>
     </>
   );
 }
diff --git a/src/components/exercise/ExerciseOperations.tsx b/src/components/exercise/ExerciseOperations.tsx
@@ -143,7 +143,7 @@ export const ExerciseOperations: FC<{
           refetchComments();
         }}
       />
-      <Card>
+      <Card sx={{ borderRadius: { xs: 0, md: 1 } }}>
         <Stack p={2} gap={2}>
           <Stack
             direction={"row"}