diff --git a/src/app/deals/components/desktop/Board/Board.module.css b/src/app/deals/components/desktop/Board/Board.module.css deleted file mode 100644 index e65c632..0000000 --- a/src/app/deals/components/desktop/Board/Board.module.css +++ /dev/null @@ -1,7 +0,0 @@ - -.board { - min-width: 130px; - flex-wrap: nowrap; - gap: 3px; - -} diff --git a/src/app/deals/components/desktop/Board/Board.tsx b/src/app/deals/components/desktop/Board/Board.tsx deleted file mode 100644 index 52901fc..0000000 --- a/src/app/deals/components/desktop/Board/Board.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React, { FC, useState } from "react"; -import { Box, Flex, Group, Text } from "@mantine/core"; -import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu"; -import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; -import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock"; -import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput"; -import { BoardSchema } from "@/lib/client"; -import styles from "./Board.module.css"; - -type Props = { - board: BoardSchema; -}; - -const Board: FC = ({ board }) => { - const { selectedBoard } = useBoardsContext(); - const isSelected = selectedBoard?.id === board.id; - const [isHovered, setIsHovered] = useState(false); - const { onUpdateBoard } = useBoardsContext(); - - return ( - - - setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)}> - - onUpdateBoard(board.id, { name: value }) - } - inputStyles={{ - input: { - height: 25, - minHeight: 25, - }, - }} - getChildren={startEditing => ( - <> - - {board.name} - - - - )} - modalTitle={"Редактирование доски"} - /> - - - - ); -}; - -export default Board; diff --git a/src/app/deals/components/desktop/Boards/Boards.tsx b/src/app/deals/components/desktop/Boards/Boards.tsx deleted file mode 100644 index b41e9d2..0000000 --- a/src/app/deals/components/desktop/Boards/Boards.tsx +++ /dev/null @@ -1,52 +0,0 @@ -"use client"; - -import React from "react"; -import { Group } from "@mantine/core"; -import Board from "@/app/deals/components/desktop/Board/Board"; -import CreateBoardButton from "@/app/deals/components/desktop/CreateBoardButton/CreateBoardButton"; -import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; -import SortableDnd from "@/components/dnd/SortableDnd"; -import useIsMobile from "@/hooks/useIsMobile"; -import { BoardSchema } from "@/lib/client"; - -const Boards = () => { - const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext(); - const isMobile = useIsMobile(); - - const renderBoard = (board: BoardSchema) => ; - - const onDragEnd = (itemId: number, newLexorank: string) => { - onUpdateBoard(itemId, { lexorank: newLexorank }); - }; - - const selectBoard = (board: BoardSchema) => { - setSelectedBoard(board); - }; - - return ( - - - - - ); -}; - -export default Boards; diff --git a/src/app/deals/components/desktop/CreateBoardButton/CreateBoardButton.tsx b/src/app/deals/components/desktop/CreateBoardButton/CreateBoardButton.tsx deleted file mode 100644 index cf4a234..0000000 --- a/src/app/deals/components/desktop/CreateBoardButton/CreateBoardButton.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { IconPlus } from "@tabler/icons-react"; -import { Box } from "@mantine/core"; -import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; -import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock"; -import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput"; - -const CreateBoardButton = () => { - const { onCreateBoard } = useBoardsContext(); - - return ( - - ( - - - - )} - modalTitle={"Создание доски"} - inputStyles={{ - wrapper: { - padding: 4, - marginLeft: 15, - marginRight: 15, - }, - }} - /> - - ); -}; - -export default CreateBoardButton; diff --git a/src/app/deals/components/mobile/BoardMobile/BoardMobile.tsx b/src/app/deals/components/mobile/BoardMobile/BoardMobile.tsx deleted file mode 100644 index 6083546..0000000 --- a/src/app/deals/components/mobile/BoardMobile/BoardMobile.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React, { FC } from "react"; -import classNames from "classnames"; -import { Box, Text } from "@mantine/core"; -import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; -import { BoardSchema } from "@/lib/client"; -import styles from "./BoardMobile.module.css"; - -type Props = { - board: BoardSchema; -}; - -const BoardMobile: FC = ({ board }) => { - const { selectedBoard } = useBoardsContext(); - - return ( - - {board.name} - - ); -}; - -export default BoardMobile; diff --git a/src/app/deals/components/mobile/BoardMobile/BoardMobile.module.css b/src/app/deals/components/shared/Board/Board.module.css similarity index 84% rename from src/app/deals/components/mobile/BoardMobile/BoardMobile.module.css rename to src/app/deals/components/shared/Board/Board.module.css index 8090d37..9b5029c 100644 --- a/src/app/deals/components/mobile/BoardMobile/BoardMobile.module.css +++ b/src/app/deals/components/shared/Board/Board.module.css @@ -1,5 +1,5 @@ -.board-mobile { +.board { min-width: 50px; flex-wrap: nowrap; gap: 3px; @@ -8,7 +8,7 @@ border-bottom: 2px solid gray; } -.board-mobile-selected { +.board-selected { border: 2px solid gray; border-bottom: 0; } diff --git a/src/app/deals/components/shared/Board/Board.tsx b/src/app/deals/components/shared/Board/Board.tsx new file mode 100644 index 0000000..d721655 --- /dev/null +++ b/src/app/deals/components/shared/Board/Board.tsx @@ -0,0 +1,63 @@ +import React, { FC, useState } from "react"; +import classNames from "classnames"; +import { Box, Group, Text } from "@mantine/core"; +import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu"; +import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; +import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput"; +import useIsMobile from "@/hooks/useIsMobile"; +import { BoardSchema } from "@/lib/client"; +import styles from "./Board.module.css"; + +type Props = { + board: BoardSchema; +}; + +const Board: FC = ({ board }) => { + const { selectedBoard, onUpdateBoard } = useBoardsContext(); + const isMobile = useIsMobile(); + const [isHovered, setIsHovered] = useState(false); + + return ( + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)}> + onUpdateBoard(board.id, { name: value })} + inputStyles={{ + input: { + height: 25, + minHeight: 25, + }, + }} + getChildren={startEditing => ( + <> + + + {board.name} + + + + + )} + modalTitle={"Редактирование доски"} + /> + + ); +}; + +export default Board; diff --git a/src/app/deals/components/mobile/BoardsMobile/BoardsMobile.tsx b/src/app/deals/components/shared/Boards/Boards.tsx similarity index 75% rename from src/app/deals/components/mobile/BoardsMobile/BoardsMobile.tsx rename to src/app/deals/components/shared/Boards/Boards.tsx index a333bba..f056317 100644 --- a/src/app/deals/components/mobile/BoardsMobile/BoardsMobile.tsx +++ b/src/app/deals/components/shared/Boards/Boards.tsx @@ -2,18 +2,18 @@ import React from "react"; import { Group, ScrollArea } from "@mantine/core"; -import BoardMobile from "@/app/deals/components/mobile/BoardMobile/BoardMobile"; -import CreateBoardButtonMobile from "@/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile"; +import Board from "@/app/deals/components/shared/Board/Board"; +import CreateBoardButton from "@/app/deals/components/shared/CreateBoardButton/CreateBoardButton"; import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; import SortableDnd from "@/components/dnd/SortableDnd"; import useIsMobile from "@/hooks/useIsMobile"; import { BoardSchema } from "@/lib/client"; -const BoardsMobile = () => { +const Boards = () => { const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext(); const isMobile = useIsMobile(); - const renderBoard = (board: BoardSchema) => ; + const renderBoard = (board: BoardSchema) => ; const onDragEnd = (itemId: number, newLexorank: string) => { onUpdateBoard(itemId, { lexorank: newLexorank }); @@ -28,8 +28,8 @@ const BoardsMobile = () => { offsetScrollbars={"x"} scrollbars={"x"} scrollbarSize={0} - w={"100vw"} - mt={5} + w={"100%"} + mt={"xs"} mb={"sm"}> { dragHandleStyle={{ cursor: "pointer" }} disabled={isMobile} /> - + ); }; -export default BoardsMobile; +export default Boards; diff --git a/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css b/src/app/deals/components/shared/CreateBoardButton/CreateBoardButton.module.css similarity index 72% rename from src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css rename to src/app/deals/components/shared/CreateBoardButton/CreateBoardButton.module.css index 6e31f0a..36601b3 100644 --- a/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css +++ b/src/app/deals/components/shared/CreateBoardButton/CreateBoardButton.module.css @@ -1,11 +1,11 @@ .create-button { - padding: 8px 10px 9px; + padding: 10px 10px 9px; border-bottom: 2px solid gray; } .spacer { - height: 43px; + height: 45px; border-bottom: 2px solid gray; width: 100%; } diff --git a/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.tsx b/src/app/deals/components/shared/CreateBoardButton/CreateBoardButton.tsx similarity index 84% rename from src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.tsx rename to src/app/deals/components/shared/CreateBoardButton/CreateBoardButton.tsx index 4fe309b..82fa05a 100644 --- a/src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.tsx +++ b/src/app/deals/components/shared/CreateBoardButton/CreateBoardButton.tsx @@ -1,10 +1,10 @@ import { IconPlus } from "@tabler/icons-react"; import { Box, Space } from "@mantine/core"; -import styles from "@/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css"; import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput"; +import styles from "./CreateBoardButton.module.css"; -const CreateBoardButtonMobile = () => { +const CreateBoardButton = () => { const { onCreateBoard } = useBoardsContext(); return ( @@ -32,4 +32,4 @@ const CreateBoardButtonMobile = () => { ); }; -export default CreateBoardButtonMobile; +export default CreateBoardButton; diff --git a/src/app/deals/components/shared/Header/Header.tsx b/src/app/deals/components/shared/Header/Header.tsx index 1c9c87f..ce5ecd0 100644 --- a/src/app/deals/components/shared/Header/Header.tsx +++ b/src/app/deals/components/shared/Header/Header.tsx @@ -2,8 +2,7 @@ import { IconChevronLeft, IconSettings } from "@tabler/icons-react"; import { Box, Group, Stack, Text } from "@mantine/core"; -import Boards from "@/app/deals/components/desktop/Boards/Boards"; -import BoardsMobile from "@/app/deals/components/mobile/BoardsMobile/BoardsMobile"; +import Boards from "@/app/deals/components/shared/Boards/Boards"; import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext"; import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect"; @@ -24,10 +23,9 @@ const Header = () => { return ( - { const getMobileHeader = () => { return ( - - - setIsProjectsDrawerOpened(true)}> - - - {selectedProject?.name} - setIsEditorDrawerOpened(true)}> - - - - - + + setIsProjectsDrawerOpened(true)}> + + + {selectedProject?.name} + setIsEditorDrawerOpened(true)}> + + + ); }; @@ -65,7 +60,12 @@ const Header = () => { - {isMobile ? getMobileHeader() : getDesktopHeader()} + + {isMobile ? getMobileHeader() : getDesktopHeader()} + + ); }; diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx index f1c4db9..15e6cf7 100644 --- a/src/app/deals/page.tsx +++ b/src/app/deals/page.tsx @@ -15,12 +15,8 @@ export default function DealsPage() { - -
- +
diff --git a/src/components/layout/PageBlock/PageBlock.module.css b/src/components/layout/PageBlock/PageBlock.module.css index 3af086e..60b39b3 100644 --- a/src/components/layout/PageBlock/PageBlock.module.css +++ b/src/components/layout/PageBlock/PageBlock.module.css @@ -19,10 +19,7 @@ } .mobile-padding-height { - height: 100% !important; - @media (min-width: 48em) { - height: 89vh; - } + height: 100vh; } .container-full-height { diff --git a/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css b/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css index 59b5a0e..aeec4a0 100644 --- a/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css +++ b/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css @@ -1,5 +1,4 @@ .container { - border-width: 0; @mixin dark { background-color: var(--mantine-color-dark-7); } diff --git a/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx b/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx index f571e53..1b5ba66 100644 --- a/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx +++ b/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx @@ -7,7 +7,6 @@ import { useComputedColorScheme, useMantineColorScheme, } from "@mantine/core"; -import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock"; import style from "./ColorSchemeToggle.module.css"; export function ColorSchemeToggle() { @@ -21,23 +20,21 @@ export function ColorSchemeToggle() { }; return ( - - - - - - + + + + ); }