diff --git a/app/assets/styles/home.css b/app/assets/styles/home.css index 43919d4..1a553c8 100644 --- a/app/assets/styles/home.css +++ b/app/assets/styles/home.css @@ -70,6 +70,30 @@ margin-top: 10px; } +@media (width <= 570px) { + + .report-tag-list { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; + } + + .report-tag { + > .report-tag-count-good { + color: var(--tag-color-good); + } + > .report-tag-count-ok { + color: var(--tag-color-ok); + } + > .report-tag-count-bad { + color: var(--tag-color-bad); + } + > .report-tag-count-very-bad { + color: var(--tag-color-very-bad); + } + } +} + .report-comment:hover { background-color: #383d49; cursor: default; diff --git a/app/components/itemDialog.tsx b/app/components/itemDialog.tsx index e7744a9..eafe944 100644 --- a/app/components/itemDialog.tsx +++ b/app/components/itemDialog.tsx @@ -4,29 +4,46 @@ import NicknameList from "~/components/itemDialog/nicknameList"; import CommentsList from "~/components/itemDialog/commentsList"; import TagList from "~/components/itemDialog/tagList"; import TitleHeader from "~/components/itemDialog/titleHeader"; +import useWindowDimensions from "~/hooks/windowDimensions"; +import trimLink from "~/functions/trimLink"; export default function ItemDialog({ blacklistItem, open, handleClose }: { blacklistItem: BlacklistItem|null, open: boolean, handleClose: Function }){ - return ( - handleClose()} - > - - - - - - - - - - - ) + if (blacklistItem){ + const { width } = useWindowDimensions(); + return ( + handleClose()} + > + + + + + + + + + + + ) + } else { + return ( + handleClose()} + > + + Error: No item + + + ) + } + } \ No newline at end of file diff --git a/app/components/itemList.tsx b/app/components/itemList.tsx index 11aa187..2e24389 100644 --- a/app/components/itemList.tsx +++ b/app/components/itemList.tsx @@ -1,5 +1,7 @@ import {BlacklistItem} from "~/classes/blacklistItem"; import {Button, CircularProgress} from "@mui/material"; +import useWindowDimensions from "~/hooks/windowDimensions"; +import trimLink from "~/functions/trimLink"; export default function ItemList({ isFetching, blacklistItems, showDialog }: { isFetching: boolean, blacklistItems: BlacklistItem[], showDialog: Function }) { if (isFetching){ @@ -10,11 +12,12 @@ export default function ItemList({ isFetching, blacklistItems, showDialog }: { i ) } else { if (blacklistItems.length > 0){ + const { width } = useWindowDimensions(); return (
{blacklistItems.map((item) => { - return + return })}
diff --git a/app/components/reportDialog.tsx b/app/components/reportDialog.tsx index 6946586..2d9853f 100644 --- a/app/components/reportDialog.tsx +++ b/app/components/reportDialog.tsx @@ -1,4 +1,3 @@ -import type {BlacklistItem} from "~/classes/blacklistItem"; import { Button, Checkbox, @@ -41,8 +40,16 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han const handleSend = async () => { setLoading(true); + + let cleanLink = link.trim().toLowerCase(); + + if (cleanLink.endsWith('/')) { + cleanLink = cleanLink.slice(0, -1); + } + + setLink(cleanLink); let blacklistReport = new BlacklistReport( - link, + cleanLink, nickname, comment, afk, @@ -52,8 +59,9 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han useless, smurf ); + await sendReport(blacklistReport).then((result: boolean) => { - setLoading(true); + setLoading(false); clearValues(); handleClose(); }); @@ -138,7 +146,7 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han />
- +
diff --git a/app/functions/trimLink.ts b/app/functions/trimLink.ts new file mode 100644 index 0000000..0bcb501 --- /dev/null +++ b/app/functions/trimLink.ts @@ -0,0 +1,9 @@ +export default function trimLink(link: string){ + if (link.includes('/id')){ + return link.split('/id')[1]; + } else if (link.includes('/profiles')){ + return link.split('/profiles')[1]; + } else { + return link; + } +} \ No newline at end of file diff --git a/app/hooks/windowDimensions.ts b/app/hooks/windowDimensions.ts new file mode 100644 index 0000000..5b26c6f --- /dev/null +++ b/app/hooks/windowDimensions.ts @@ -0,0 +1,27 @@ +import { useState, useEffect } from "react"; + +export default function useWindowDimensions() { + // На сервере инициализируем значениями по умолчанию (0 или null) + const [dimensions, setDimensions] = useState({ + width: typeof window !== 'undefined' ? window.innerWidth : 0, + height: typeof window !== 'undefined' ? window.innerHeight : 0, + }); + + useEffect(() => { + // Этот код гарантированно выполнится ТОЛЬКО в браузере + function handleResize() { + setDimensions({ + width: window.innerWidth, + height: window.innerHeight, + }); + } + + // Устанавливаем точные размеры сразу при монтировании + handleResize(); + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + return dimensions; +} \ No newline at end of file