From e6001ed59ee9bb18696c6176e96c50706574aea0 Mon Sep 17 00:00:00 2001 From: AlexSserb Date: Wed, 27 Aug 2025 14:44:38 +0400 Subject: [PATCH] fix: roboto font, column scrolling fixed, column input width --- .../CreateStatusButton.module.css | 1 + .../CreateStatusButton/CreateStatusButton.tsx | 10 +++- .../StatusColumnWrapper.module.css | 4 +- .../StatusColumnWrapper.tsx | 2 +- src/components/dnd/FunnelDnd/FunnelDnd.tsx | 55 +++++++++---------- src/theme.ts | 11 +++- 6 files changed, 48 insertions(+), 35 deletions(-) diff --git a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css index 921d096..d9bcf6f 100644 --- a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css +++ b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css @@ -6,6 +6,7 @@ width: fit-content; @media (max-width: 48em) { width: 80vw; + height: 73.5vh; } } diff --git a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx index ba32c01..4522b15 100644 --- a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx +++ b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx @@ -1,6 +1,6 @@ import React from "react"; import { IconPlus } from "@tabler/icons-react"; -import { Box, Center, Group, Stack, Text } from "@mantine/core"; +import { Box, Center, Group, Text } from "@mantine/core"; import { useStatusesContext } from "@/app/deals/contexts/StatusesContext"; import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput"; import useIsMobile from "@/hooks/utils/useIsMobile"; @@ -11,7 +11,7 @@ const CreateStatusButton = () => { const isMobile = useIsMobile(); return ( - + { modalTitle={"Создание колонки"} inputStyles={{ wrapper: { + width: 250, paddingInline: "var(--mantine-spacing-md)", paddingBlock: "var(--mantine-spacing-xs)", }, + input: { + width: 250, + }, }} /> - + ); }; diff --git a/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css index cb79ab1..0fd6c08 100644 --- a/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css +++ b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css @@ -3,7 +3,7 @@ height: calc(100vh - 150px); @media (max-width: 48em) { width: 80vw; - height: calc(100vh - 200px); + height: calc(100vh - 215px); } } @@ -12,7 +12,7 @@ gap: 0; @media (max-width: 48em) { - max-height: calc(100vh - 200px); + max-height: calc(100vh - 215px); } @mixin light { diff --git a/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx index a16f020..da715f9 100644 --- a/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx +++ b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx @@ -30,7 +30,7 @@ const StatusColumnWrapper = ({ scrollbars={"y"}> + mah={"calc(100vh - 285px)"}> {createFormEnabled && } {children} diff --git a/src/components/dnd/FunnelDnd/FunnelDnd.tsx b/src/components/dnd/FunnelDnd/FunnelDnd.tsx index d8bfbc5..dfdd2a1 100644 --- a/src/components/dnd/FunnelDnd/FunnelDnd.tsx +++ b/src/components/dnd/FunnelDnd/FunnelDnd.tsx @@ -11,8 +11,9 @@ import { horizontalListSortingStrategy, SortableContext, } from "@dnd-kit/sortable"; -import { FreeMode, Mousewheel, Pagination, Scrollbar } from "swiper/modules"; +import { FreeMode, Pagination, Scrollbar } from "swiper/modules"; import { Swiper, SwiperRef, SwiperSlide } from "swiper/react"; +import { Box } 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"; @@ -108,42 +109,40 @@ const FunnelDnd = < const renderBody = () => { if (isMobile) { return ( - { - swiper.allowTouchMove = !activeItem; - }} - onTouchMove={swiper => { - swiper.allowTouchMove = !activeItem; - }} - className={classes["swiper-container"]} - slidesPerView={1.1} - style={{ paddingLeft: "10vw", paddingRight: "2vw" }} - modules={[Pagination]} - freeMode={{ enabled: false }} - pagination={{ enabled: true, clickable: true }}> - {renderContainers()} - {isCreatingContainerEnabled && ( - - - - )} - + + { + swiper.allowTouchMove = !activeItem; + }} + onTouchMove={swiper => { + swiper.allowTouchMove = !activeItem; + }} + className={classes["swiper-container"]} + slidesPerView={1.1} + spaceBetween={10} + style={{ paddingLeft: "10vw" }} + modules={[Pagination]} + freeMode={{ enabled: false }} + pagination={{ enabled: true, clickable: true }}> + {renderContainers()} + {isCreatingContainerEnabled && ( + + + + )} + + ); } return ( {renderContainers()} diff --git a/src/theme.ts b/src/theme.ts index e71932d..7a3aab0 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -1,3 +1,4 @@ +import { Roboto } from "next/font/google"; import { createTheme, MantineColorsTuple } from "@mantine/core"; export const myColor: MantineColorsTuple = [ @@ -14,9 +15,17 @@ export const myColor: MantineColorsTuple = [ ]; const radius = "md"; -// const size = "md"; + +const font = Roboto({ + subsets: ["latin"], + weight: ["400"], +}); export const theme = createTheme({ + fontFamily: `${font.style.fontFamily}, sans-serif`, + headings: { + fontFamily: `${font.style.fontFamily}, sans-serif`, + }, colors: { myColor, },