diff --git a/TASKS.md b/TASKS.md index 97c78d0..43d75d7 100644 --- 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 index 235c248..0f4d8af 100644 --- a/src/Layout.tsx +++ b/src/Layout.tsx @@ -16,9 +16,9 @@ const Layout: FC = () => { { sx={{ display: { md: "none" }, mb: 2, + ml: 2, }} > diff --git a/src/components/CategoryDifficulties.tsx b/src/components/CategoryDifficulties.tsx index 9d68d76..107f140 100644 --- 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,6 +14,7 @@ export const CategoryDifficulties = (props: ValueProps) => { { : "black", fontWeight: 700, mr: 0.5, - visibility: props.value[key] === 0 ? "hidden" : "visible", + mb: 0.5, + opacity: props.value[key] === 0 ? 0.2 : 1, }} /> diff --git a/src/components/InfiniteLoad/ExerciseRow.tsx b/src/components/InfiniteLoad/ExerciseRow.tsx index cfbc380..6f377d2 100644 --- a/src/components/InfiniteLoad/ExerciseRow.tsx +++ b/src/components/InfiniteLoad/ExerciseRow.tsx @@ -4,7 +4,15 @@ 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"; @@ -12,6 +20,7 @@ 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 = { KOALA: 0, @@ -32,43 +41,94 @@ const ExerciseRow: FC<{ data: ExerciseListElemFragment }> = ({ data }) => { cursor: "pointer", }} > - - - - - - - - - - - {data.tags.map((tag, index) => ( - - ))} - - - }> - - - - - - - {dayjs(+data.createdAt).format("YYYY. MM. DD.")} - + {isMobile ? ( + + + + {"#" + data.id} + + + + + + {data.tags.map((tag, index) => ( + + ))} + + }> + + + + + + {dayjs(+data.createdAt).format("YYYY. MM. DD.")} + + + + ) : ( + <> + {"#" + data.id} + + + + + + + + {data.tags.map((tag, index) => ( + + ))} + + + }> + + + + + + + {dayjs(+data.createdAt).format("YYYY. MM. DD.")} + + + )} ); }; diff --git a/src/components/InfiniteLoad/InfiniteLoad.tsx b/src/components/InfiniteLoad/InfiniteLoad.tsx index 5fc2336..632362e 100644 --- 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({ return ( <> {isInitialLoading ? ( - - Loading... - + Loading... ) : ( <> {data.map((row, index) => { const isLoaderRow = index > data.length - 1; return !isLoaderRow && children(row as T); })} - {hasMore && - (loadingElement || ( - - - Loading... - - - - - ))} + {hasMore && (loadingElement || Loading...)} )} {!hasMore && !isFetchingNextPage && ( - - - - {data.length > 0 ? "A végére értél" : "Nincs találat"} - - - - - + {data.length > 0 ? "A végére értél" : "Nincs találat"} )} - - - - - + ); } diff --git a/src/components/exercise/ExerciseOperations.tsx b/src/components/exercise/ExerciseOperations.tsx index 9a5790a..840933d 100644 --- a/src/components/exercise/ExerciseOperations.tsx +++ b/src/components/exercise/ExerciseOperations.tsx @@ -143,7 +143,7 @@ export const ExerciseOperations: FC<{ refetchComments(); }} /> - + { + const isMobile = useMediaQuery("(max-width: 900px)"); + return ( - + - {headCells.map((headCell) => ( - - {headCell.sortable ? ( - { - setOrderBy(headCell.id); - setOrder(order === "asc" ? "desc" : "asc"); - }} - > - {headCell.label} - - ) : ( - headCell.label - )} + {isMobile && ( + + + - ))} + )} + {!isMobile && + headCells.map((headCell) => ( + + {headCell.sortable ? ( + { + setOrderBy(headCell.id); + setOrder(order === "asc" ? "desc" : "asc"); + }} + > + {headCell.label} + + ) : ( + headCell.label + )} + + ))} diff --git a/src/pages/ExerciseDetails.tsx b/src/pages/ExerciseDetails.tsx index e376f9b..3d875b8 100644 --- a/src/pages/ExerciseDetails.tsx +++ b/src/pages/ExerciseDetails.tsx @@ -1,3 +1,4 @@ +import { CreatedByItem } from "@/components/CreatedByItem.tsx"; import { ExerciseOperations } from "@/components/exercise/ExerciseOperations"; import { SameGroupExerciseCard } from "@/components/exercise/SameGroupExerciseCard"; import FakeId from "@/components/FakeId"; @@ -10,6 +11,7 @@ import { } from "@/generated/graphql"; import { createExerciseInitialValue } from "@/util/const"; import { ExerciseFieldsType } from "@/util/types"; +import ContentCopyIcon from "@mui/icons-material/ContentCopy"; import { LoadingButton } from "@mui/lab"; import { Alert, @@ -21,6 +23,7 @@ import { TextField, Typography, } from "@mui/material"; +import { AlertColor } from "@mui/material/Alert/Alert"; import { Box, Stack } from "@mui/system"; import dayjs from "dayjs"; import { Formik, useFormikContext } from "formik"; @@ -28,12 +31,9 @@ import { useSnackbar } from "notistack"; import { FC, useCallback, useMemo, useState } from "react"; import { MdSave } from "react-icons/md"; import { useParams } from "react-router"; +import { useNavigate } from "react-router-dom"; import { useToggle } from "react-use"; import ExerciseFields from "./createExercise/ExerciseFields"; -import ContentCopyIcon from "@mui/icons-material/ContentCopy"; -import { useNavigate } from "react-router-dom"; -import { AlertColor } from "@mui/material/Alert/Alert"; -import { CreatedByItem } from "@/components/CreatedByItem.tsx"; const ExerciseDetails: FC = () => { const { enqueueSnackbar } = useSnackbar(); @@ -227,7 +227,13 @@ const ExerciseDetailsForm: FC<{ updateSignal: boolean }> = ({ return ( <> - + Feladat {id} @@ -250,7 +256,7 @@ const ExerciseDetailsForm: FC<{ updateSignal: boolean }> = ({ - + {exercise.alert && ( void; }) => { return ( - - + + { props.setIsEnabled(checked); }} /> - - - {ageGroupTexts[props.ageGroup]} - - - - - props.setDifficulty(value as [number, number]) - } - step={1} - min={0} - max={4} - valueLabelDisplay="auto" - /> - - + + + props.setDifficulty(value as [number, number])} + step={1} + min={0} + max={4} + valueLabelDisplay="auto" + /> + ); }; diff --git a/src/pages/ExerciseListPage/DifficultySelectorList.tsx b/src/pages/ExerciseListPage/DifficultySelectorList.tsx index f493c45..73f103e 100644 --- a/src/pages/ExerciseListPage/DifficultySelectorList.tsx +++ b/src/pages/ExerciseListPage/DifficultySelectorList.tsx @@ -1,7 +1,7 @@ import { ExerciseAgeGroup } from "@/generated/graphql.tsx"; import { DifficultySelector } from "@/pages/ExerciseListPage/DifficultySelector.tsx"; import { DifficultySelect, ExerciseQuery } from "@/util/types"; -import { Grid, Stack, Typography } from "@mui/material"; +import { Stack } from "@mui/material"; import { entries } from "lodash"; import { Updater } from "use-immer"; @@ -13,15 +13,6 @@ export const DifficultySelectorList = ({ setExerciseQuery: Updater; }) => ( - - - - - Könnyű - Nehéz - - - {entries(difficulties).map(([difficultyName, ageGroup]) => { return ( { }, [exerciseQuery, difficulty, orderBy, order, reset]); return ( - + {filterComponents} diff --git a/src/pages/ExerciseListPage/TagSelector.tsx b/src/pages/ExerciseListPage/TagSelector.tsx index 7c5d576..1d5d798 100644 --- a/src/pages/ExerciseListPage/TagSelector.tsx +++ b/src/pages/ExerciseListPage/TagSelector.tsx @@ -16,6 +16,7 @@ export const TagSelector: FC<{ Tartalmazza a következők egyikét + sx={{ backgroundColor: "background.paper" }} items={props.tags} value={props.tags.filter((tag) => props.selectedTags.includes(tag.id))} getItemLabel={(item) => item.name} @@ -28,6 +29,7 @@ export const TagSelector: FC<{ /> Ne tartalmazza a következőket + sx={{ backgroundColor: "background.paper" }} items={props.tags} value={props.tags.filter((tag) => props.excludeTags.includes(tag.id))} getItemLabel={(item) => item.name} diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 609ed38..08462ec 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,18 +1,18 @@ -import { userAtom } from "@/util/atoms.ts"; -import { Grid2, useColorScheme } from "@mui/material"; -import { useAtomValue } from "jotai"; -import { useToggle } from "react-use"; +import { ProfileStatCard } from "@/components/profile/ProfileStatCard.tsx"; +import { StatCard } from "@/components/StatCard.tsx"; import { useStatsQuery } from "@/generated/graphql.tsx"; import { LeaderBoardCard } from "@/pages/home/LeaderBoardCard.tsx"; -import { StatCard } from "@/components/StatCard.tsx"; -import { Bar } from "react-chartjs-2"; +import { userAtom } from "@/util/atoms.ts"; +import { Box, Grid2, useColorScheme } from "@mui/material"; +import { lightBlue, lightGreen } from "@mui/material/colors"; import { CategoryScale, Chart, LinearScale } from "chart.js/auto"; +import { useAtomValue } from "jotai"; import { useEffect } from "react"; -import { ProfileStatCard } from "@/components/profile/ProfileStatCard.tsx"; -import { FaDiceD6 } from "react-icons/fa6"; -import { FaCheck } from "react-icons/fa"; -import { lightBlue, lightGreen } from "@mui/material/colors"; +import { Bar } from "react-chartjs-2"; import { ContributionCalendar } from "react-contribution-calendar"; +import { FaCheck } from "react-icons/fa"; +import { FaDiceD6 } from "react-icons/fa6"; +import { useToggle } from "react-use"; export const HomePage = () => { const user = useAtomValue(userAtom); @@ -27,7 +27,7 @@ export const HomePage = () => { }, []); return ( -
+

Szia, {user && user.user ? user.user.name : " - "}

{user?.user?.email === "emerichkeen@gmail.com" && (
@@ -142,6 +142,6 @@ export const HomePage = () => { /> -
+ ); }; diff --git a/src/pages/createExercise/CreateExercise.tsx b/src/pages/createExercise/CreateExercise.tsx index e5cbbd1..2e0500a 100644 --- a/src/pages/createExercise/CreateExercise.tsx +++ b/src/pages/createExercise/CreateExercise.tsx @@ -151,7 +151,12 @@ const CreateExerciseForm = () => { Feladat létrehozása - + { - + - +