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 (
-
- )
+ if (blacklistItem){
+ const { width } = useWindowDimensions();
+ return (
+
+ )
+ } else {
+ return (
+
+ )
+ }
+
}
\ 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