From b6cec9a308db3ef8a4027afd4cd72876ce78966e Mon Sep 17 00:00:00 2001 From: AlexSserb Date: Thu, 14 Aug 2025 11:16:33 +0400 Subject: [PATCH] fix: mantine carousel --- package.json | 3 ++ .../CreateStatusButton.module.css | 12 +++++ .../CreateStatusButton/CreateStatusButton.tsx | 50 +++++++++---------- .../StatusColumnWrapper.module.css | 2 +- src/app/layout.tsx | 1 + .../dnd/FunnelDnd/FunnelDnd.module.css | 19 +++++++ src/components/dnd/FunnelDnd/FunnelDnd.tsx | 26 +++++----- yarn.lock | 45 +++++++++++++++++ 8 files changed, 119 insertions(+), 39 deletions(-) create mode 100644 src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css diff --git a/package.json b/package.json index 755d5e8..6dc2890 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@dnd-kit/core": "^6.3.1", "@dnd-kit/modifiers": "^9.0.0", "@dnd-kit/sortable": "^10.0.0", + "@mantine/carousel": "^8.2.4", "@mantine/core": "8.1.2", "@mantine/form": "^8.1.3", "@mantine/hooks": "8.1.2", @@ -25,6 +26,8 @@ "@tanstack/react-query": "^5.83.0", "axios": "^1.11.0", "classnames": "^2.5.1", + "embla-carousel": "^8.6.0", + "embla-carousel-react": "^8.6.0", "framer-motion": "^12.23.7", "i18n-iso-countries": "^7.14.0", "lexorank": "^1.0.5", diff --git a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css new file mode 100644 index 0000000..26e5ea4 --- /dev/null +++ b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css @@ -0,0 +1,12 @@ + +.container { + flex-wrap: nowrap; + border-bottom: solid blue 3px; + margin-bottom: 3px; + cursor: pointer; + + @media (max-width: 48em) { + width: 80vw; + margin-right: 8vw; + } +} diff --git a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx index 2f5b585..514c0ae 100644 --- a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx +++ b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx @@ -1,37 +1,37 @@ import React from "react"; import { IconPlus } from "@tabler/icons-react"; -import { Box } from "@mantine/core"; +import { Box, Center, Stack } from "@mantine/core"; import { useStatusesContext } from "@/app/deals/contexts/StatusesContext"; import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput"; +import styles from "./CreateStatusButton.module.css"; const CreateStatusButton = () => { const { onCreateStatus } = useStatusesContext(); return ( - - ( - startEditing()}> - - - )} - modalTitle={"Создание колонки"} - inputStyles={{ - wrapper: { - padding: 4, - }, - }} - /> - + + + ( +
startEditing()}> + +
+ )} + modalTitle={"Создание колонки"} + inputStyles={{ + wrapper: { + padding: 4, + }, + }} + /> + + ); }; diff --git a/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css index d4b1387..b997ac2 100644 --- a/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css +++ b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css @@ -4,6 +4,6 @@ width: 15vw; @media (max-width: 48em) { - width: 90vw; + width: 80vw; } } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a3900ab..2f1305a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,6 @@ import "@mantine/core/styles.css"; import "@mantine/notifications/styles.css"; +import "@mantine/carousel/styles.css"; import { ReactNode } from "react"; import { ColorSchemeScript, diff --git a/src/components/dnd/FunnelDnd/FunnelDnd.module.css b/src/components/dnd/FunnelDnd/FunnelDnd.module.css index 50d1cee..7bfac46 100644 --- a/src/components/dnd/FunnelDnd/FunnelDnd.module.css +++ b/src/components/dnd/FunnelDnd/FunnelDnd.module.css @@ -12,3 +12,22 @@ } } } + +.indicator { + height: 4px; + @mixin light { + background-color: lightgray; + } + @mixin dark { + background-color: var(--mantine-color-dark-6); + } + + &[data-active] { + @mixin light { + background-color: gray; + } + @mixin dark { + background-color: var(--mantine-color-dark-5); + } + } +} diff --git a/src/components/dnd/FunnelDnd/FunnelDnd.tsx b/src/components/dnd/FunnelDnd/FunnelDnd.tsx index bf7fcb5..751991d 100644 --- a/src/components/dnd/FunnelDnd/FunnelDnd.tsx +++ b/src/components/dnd/FunnelDnd/FunnelDnd.tsx @@ -12,7 +12,8 @@ import { horizontalListSortingStrategy, SortableContext, } from "@dnd-kit/sortable"; -import { Group, ScrollArea } from "@mantine/core"; +import { Carousel } from "@mantine/carousel"; +import { Group } from "@mantine/core"; import CreateStatusButton from "@/app/deals/components/shared/CreateStatusButton/CreateStatusButton"; import useDndSensors from "@/app/deals/hooks/useSensors"; import FunnelColumn from "@/components/dnd/FunnelDnd/FunnelColumn"; @@ -20,6 +21,7 @@ import FunnelOverlay from "@/components/dnd/FunnelDnd/FunnelOverlay"; import { BaseDraggable } from "@/components/dnd/types/types"; import useIsMobile from "@/hooks/useIsMobile"; import SortableItem from "../SortableItem"; +import styles from "./FunnelDnd.module.css"; type Props = { containers: TContainer[]; @@ -89,18 +91,16 @@ const FunnelDnd = < const renderBody = () => ( <> {isMobile ? ( - - - {renderContainers()} - - - + + {renderContainers()} + + ) : ( renderContainers() )} diff --git a/yarn.lock b/yarn.lock index 73c8cd3..f11fea0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2857,6 +2857,20 @@ __metadata: languageName: node linkType: hard +"@mantine/carousel@npm:^8.2.4": + version: 8.2.4 + resolution: "@mantine/carousel@npm:8.2.4" + peerDependencies: + "@mantine/core": 8.2.4 + "@mantine/hooks": 8.2.4 + embla-carousel: ">=8.0.0" + embla-carousel-react: ">=8.0.0" + react: ^18.x || ^19.x + react-dom: ^18.x || ^19.x + checksum: 10c0/3aa2700d5e3bf6be1316af3a48ba006db7ed1490ece78417952aa8b32afbaadc3195daffcf8eb9f60f469c2135c130d32d1494f30cb5a8a8fa991a97c37e3a58 + languageName: node + linkType: hard + "@mantine/core@npm:8.1.2": version: 8.1.2 resolution: "@mantine/core@npm:8.1.2" @@ -6107,6 +6121,7 @@ __metadata: "@hey-api/client-next": "npm:^0.5.1" "@hey-api/openapi-ts": "npm:^0.80.1" "@ianvs/prettier-plugin-sort-imports": "npm:^4.4.2" + "@mantine/carousel": "npm:^8.2.4" "@mantine/core": "npm:8.1.2" "@mantine/form": "npm:^8.1.3" "@mantine/hooks": "npm:8.1.2" @@ -6136,6 +6151,8 @@ __metadata: axios: "npm:^1.11.0" babel-loader: "npm:^10.0.0" classnames: "npm:^2.5.1" + embla-carousel: "npm:^8.6.0" + embla-carousel-react: "npm:^8.6.0" eslint: "npm:^9.29.0" eslint-config-mantine: "npm:^4.0.3" eslint-plugin-eslint-comments: "npm:^3.2.0" @@ -6728,6 +6745,34 @@ __metadata: languageName: node linkType: hard +"embla-carousel-react@npm:^8.6.0": + version: 8.6.0 + resolution: "embla-carousel-react@npm:8.6.0" + dependencies: + embla-carousel: "npm:8.6.0" + embla-carousel-reactive-utils: "npm:8.6.0" + peerDependencies: + react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc + checksum: 10c0/461b0c427a6fca62e730c7b39d08e9c55b01a2138c173d5b9ebf77ec92092a900b45ac384731c77382b48d5d65946994d3abba6e9899a66d6e16f8ddf191ed1c + languageName: node + linkType: hard + +"embla-carousel-reactive-utils@npm:8.6.0": + version: 8.6.0 + resolution: "embla-carousel-reactive-utils@npm:8.6.0" + peerDependencies: + embla-carousel: 8.6.0 + checksum: 10c0/33d07e6df4d8dec9b4fc95858838ea2d5e5df078039c05b2a342c05ba4979d8d18564a1c607da445fed744daf969a0b5a90124ce487a854e86ced6f0458b51e9 + languageName: node + linkType: hard + +"embla-carousel@npm:8.6.0, embla-carousel@npm:^8.6.0": + version: 8.6.0 + resolution: "embla-carousel@npm:8.6.0" + checksum: 10c0/f4c598e7be28b70340d31ffd2bebb2472db370b0c81d9b089bf9555cf618695f35dc4a0694565c994c9ab972731123063f945aa09ff485df0df761d79c6a08ef + languageName: node + linkType: hard + "emittery@npm:^0.13.1": version: 0.13.1 resolution: "emittery@npm:0.13.1"