feat: layouts and styles for desktop and mobile

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@mantine/core": "8.1.2",
     "@mantine/form": "^8.1.3",

src/app/deals/components/Board/Board.module.css

@@ -0,0 +1,7 @@
+
+.board {
+    min-width: 130px;
+    flex-wrap: nowrap;
+    gap: 3px;
+}
+

src/app/deals/components/Board/Board.tsx

@@ -1,32 +1,36 @@
-import React, { CSSProperties, FC, useState } from "react";
+import React, { FC, useState } from "react";
 import { Box, Group, Text } from "@mantine/core";
+import styles from "@/app/deals/components/Board/Board.module.css";
 import BoardMenu from "@/app/deals/components/Board/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";
 
 type Props = {
     board: BoardSchema;
-    containerStyle?: CSSProperties;
 };
 
-const Board: FC<Props> = ({ board, containerStyle }) => {
+const Board: FC<Props> = ({ board }) => {
+    const { selectedBoard } = useBoardsContext();
     const [isHovered, setIsHovered] = useState(false);
     const { onUpdateBoard } = useBoardsContext();
 
     return (
+        <SmallPageBlock active={selectedBoard?.id === board.id}>
             <Group
-            miw={130}
                 px={"md"}
                 py={"xs"}
+                bdrs={"lg"}
                 justify={"space-between"}
-            wrap={"nowrap"}
+                className={styles.board}
-            style={{ ...containerStyle, borderWidth: 1 }}
                 onMouseEnter={() => setIsHovered(true)}
                 onMouseLeave={() => setIsHovered(false)}>
                 <InPlaceInput
                     defaultValue={board.name}
-                onComplete={value => onUpdateBoard(board.id, { name: value })}
+                    onComplete={value =>
+                        onUpdateBoard(board.id, { name: value })
+                    }
                     inputStyles={{
                         input: {
                             height: 25,
@@ -48,6 +52,7 @@ const Board: FC<Props> = ({ board, containerStyle }) => {
                     modalTitle={"Редактирование доски"}
                 />
             </Group>
+        </SmallPageBlock>
     );
 };
 

src/app/deals/components/Board/BoardMenu.tsx

@@ -27,9 +27,8 @@ const BoardMenu: FC<Props> = ({
                 <Box
                     style={{
                         opacity:
-                            isMobile ||
+                            !isMobile &&
-                            isHovered ||
+                            (isHovered || selectedBoard?.id === board.id)
-                            selectedBoard?.id === board.id
                                 ? 1
                                 : 0,
                         cursor: "pointer",

src/app/deals/components/BoardMobile/BoardMobile.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from "react";
+import { Box, Group, Text } from "@mantine/core";
+import BoardMenu from "@/app/deals/components/Board/BoardMenu";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
+import { BoardSchema } from "@/lib/client";
+
+type Props = {
+    board: BoardSchema;
+};
+
+const BoardMobile: FC<Props> = ({ board }) => {
+    const { selectedBoard } = useBoardsContext();
+    const { onUpdateBoard } = useBoardsContext();
+
+    return (
+        <Group
+            px={"md"}
+            py={"xs"}
+            bdrs={"lg"}
+            wrap={"nowrap"}
+            justify={"space-between"}>
+            <InPlaceInput
+                defaultValue={board.name}
+                onComplete={value => onUpdateBoard(board.id, { name: value })}
+                inputStyles={{
+                    input: {
+                        height: 25,
+                        minHeight: 25,
+                    },
+                }}
+                getChildren={startEditing => (
+                    <>
+                        <Box>
+                            <Text>{board.name}</Text>
+                        </Box>
+                        <BoardMenu
+                            isHovered
+                            board={board}
+                            startEditing={startEditing}
+                        />
+                    </>
+                )}
+                modalTitle={"Редактирование доски"}
+            />
+        </Group>
+    );
+};
+
+export default BoardMobile;

src/app/deals/components/Boards/Boards.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import { Group, ScrollArea } from "@mantine/core";
 import Board from "@/app/deals/components/Board/Board";
+import BoardMobile from "@/app/deals/components/BoardMobile/BoardMobile";
 import CreateBoardButton from "@/app/deals/components/CreateBoardButton/CreateBoardButton";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import SortableDnd from "@/components/dnd/SortableDnd";
@@ -13,9 +14,11 @@ const Boards = () => {
     const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext();
     const isMobile = useIsMobile();
 
-    const renderBoard = (board: BoardSchema) => {
+    const renderBoard = (board: BoardSchema) => <Board board={board} />;
-        return <Board board={board} />;
+
-    };
+    const renderBoardMobile = (board: BoardSchema) => (
+        <BoardMobile board={board} />
+    );
 
     const onDragEnd = (itemId: number, newLexorank: string) => {
         onUpdateBoard(itemId, { lexorank: newLexorank });
@@ -31,13 +34,16 @@ const Boards = () => {
             scrollbars={"x"}
             scrollbarSize={0}
             w={"100%"}>
-            <Group wrap={"nowrap"}>
+            <Group
+                wrap={"nowrap"}
+                gap={0}>
                 <SortableDnd
                     initialItems={boards}
-                    renderItem={renderBoard}
+                    renderItem={isMobile ? renderBoardMobile : renderBoard}
                     onDragEnd={onDragEnd}
                     onItemClick={selectBoard}
                     containerStyle={{ flexWrap: "nowrap" }}
+                    dragHandleStyle={{ cursor: "pointer" }}
                     disabled={isMobile}
                 />
                 <CreateBoardButton />

src/app/deals/components/CreateBoardButton/CreateBoardButton.tsx

@@ -1,26 +1,33 @@
 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 (
-        <Box
+        <SmallPageBlock style={{ cursor: "pointer" }}>
-            style={{ cursor: "pointer" }}
-            pr={"md"}>
             <InPlaceInput
                 placeholder={"Название доски"}
                 onComplete={onCreateBoard}
                 getChildren={startEditing => (
-                    <Box onClick={startEditing}>
+                    <Box
+                        p={"sm"}
+                        onClick={startEditing}>
                         <IconPlus />
                     </Box>
                 )}
                 modalTitle={"Создание доски"}
+                inputStyles={{
+                    wrapper: {
+                        marginLeft: 15,
+                        marginRight: 15,
+                    },
+                }}
             />
-        </Box>
+        </SmallPageBlock>
     );
 };
 

src/app/deals/components/CreateStatusButton/CreateStatusButton.tsx

@@ -17,7 +17,7 @@ const CreateStatusButton = () => {
                 cursor: "pointer",
             }}>
             <InPlaceInput
-                placeholder={"Название доски"}
+                placeholder={"Название колонки"}
                 onComplete={onCreateStatus}
                 getChildren={startEditing => (
                     <Box

src/app/deals/components/DealCard/DealCard.module.css

@@ -0,0 +1,8 @@
+
+.container {
+    background-color: #e0f0f4;
+
+    @mixin dark {
+        background-color: var(--mantine-color-dark-7);
+    }
+}

src/app/deals/components/DealCard/DealCard.tsx

@@ -1,12 +1,13 @@
 import { Card } from "@mantine/core";
 import { DealSchema } from "@/lib/client";
+import styles from "./DealCard.module.css";
 
 type Props = {
     deal: DealSchema;
 };
 
 const DealCard = ({ deal }: Props) => {
-    return <Card>{deal.name}</Card>;
+    return <Card className={styles.container}>{deal.name}</Card>;
 };
 
 export default DealCard;

src/app/deals/components/Header/Header.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
-import { Box, Group, Text } from "@mantine/core";
+import { Box, Group, Stack, Text } from "@mantine/core";
+import Boards from "@/app/deals/components/Boards/Boards";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
@@ -16,19 +17,24 @@ const Header = () => {
 
     const getDesktopHeader = () => {
         return (
-            <>
+            <Group
+                w={"100%"}
+                justify={"space-between"}
+                wrap={"nowrap"}>
+                <Boards />
                 <ColorSchemeToggle />
                 <ProjectSelect
                     data={projects}
                     value={selectedProject}
                     onChange={value => value && setSelectedProject(value)}
                 />
-            </>
+            </Group>
         );
     };
 
     const getMobileHeader = () => {
         return (
+            <Stack>
                 <Group
                     justify={"space-between"}
                     w={"100%"}>
@@ -42,6 +48,8 @@ const Header = () => {
                         <IconSettings />
                     </Box>
                 </Group>
+                <Boards />
+            </Stack>
         );
     };
 

src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.module.css

@@ -0,0 +1,9 @@
+
+.container {
+    min-width: 150px;
+    width: 15vw;
+
+    @media (max-width: 48em) {
+        width: auto;
+    }
+}

src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { Box, Group, Text } from "@mantine/core";
+import styles from "@/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.module.css";
 import StatusMenu from "@/app/deals/components/StatusColumnWrapper/StatusMenu";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
 import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
@@ -27,18 +28,11 @@ const StatusColumnWrapper = ({
 
     return (
         <Box
-            p={"xs"}
+            mx={7}
-            style={{
+            className={styles.container}>
-                borderWidth: 1,
-                borderColor: "gray",
-                width: "15vw",
-                minWidth: 150,
-            }}>
             <Group
-                wrap={"nowrap"}
                 justify={"space-between"}
-                ml={"xs"}
+                className={"flex-nowrap border-b-3 border-blue-500 mb-3 p-3"}>
-                mb={"xs"}>
                 <InPlaceInput
                     defaultValue={status.name}
                     onComplete={value => handleSave(value)}

src/app/deals/components/StatusColumnWrapper/StatusMenu.tsx

@@ -7,6 +7,7 @@ import {
 } from "@tabler/icons-react";
 import { Box, Group, Menu, Text } from "@mantine/core";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import useIsMobile from "@/hooks/useIsMobile";
 import { StatusSchema } from "@/lib/client";
 
 type Props = {
@@ -15,6 +16,7 @@ type Props = {
 };
 
 const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
+    const isMobile = useIsMobile();
     const { onDeleteStatus, setIsEditorDrawerOpened } = useStatusesContext();
 
     return (
@@ -50,6 +52,7 @@ const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
                         <Text>Удалить</Text>
                     </Group>
                 </Menu.Item>
+                {isMobile && (
                     <Menu.Item
                         onClick={e => {
                             e.stopPropagation();
@@ -60,6 +63,7 @@ const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
                             <Text>Изменить порядок</Text>
                         </Group>
                     </Menu.Item>
+                )}
             </Menu.Dropdown>
         </Menu>
     );

src/app/deals/hooks/useSensors.ts

@@ -6,10 +6,18 @@ import {
     useSensors,
 } from "@dnd-kit/core";
 import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import useIsMobile from "@/hooks/useIsMobile";
 
 const useDndSensors = () => {
+    const isMobile = useIsMobile();
+
     const sensorOptions = {
-        activationConstraint: {
+        activationConstraint: isMobile
+            ? {
+                  delay: 500,
+                  tolerance: 5,
+              }
+            : {
                   distance: 5,
               },
     };

src/app/deals/page.tsx

@@ -1,5 +1,3 @@
-import { Divider } from "@mantine/core";
-import Boards from "@/app/deals/components/Boards/Boards";
 import Funnel from "@/app/deals/components/Funnel/Funnel";
 import Header from "@/app/deals/components/Header/Header";
 import { BoardsContextProvider } from "@/app/deals/contexts/BoardsContext";
@@ -13,13 +11,15 @@ import { DealsContextProvider } from "./contexts/DealsContext";
 
 export default function DealsPage() {
     return (
-        <PageContainer>
-            <PageBlock>
         <ProjectsContextProvider>
             <BoardsContextProvider>
+                <PageContainer>
+                    <PageBlock
+                        transparent
+                        style={{ padding: 0, paddingRight: 15 }}>
                         <Header />
-                        <Boards />
+                    </PageBlock>
-                        <Divider my={"xl"} />
+                    <PageBlock className={"mobile-padding-height"}>
                         <StatusesContextProvider>
                             <DealsContextProvider>
                                 <Funnel />
@@ -27,9 +27,9 @@ export default function DealsPage() {
                             <BoardStatusesEditorDrawer />
                         </StatusesContextProvider>
                         <ProjectBoardsEditorDrawer />
-                    </BoardsContextProvider>
-                </ProjectsContextProvider>
                     </PageBlock>
                 </PageContainer>
+            </BoardsContextProvider>
+        </ProjectsContextProvider>
     );
 }

src/app/global.css

@@ -2,6 +2,6 @@
 
 body {
     @mixin light {
-        background-color: whitesmoke;
+        background-color: #f4f7fd;
     }
 }

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -68,11 +68,12 @@ const FunnelDnd = <
         dots: true,
         infinite: false,
         speed: 500,
-        slidesToShow: 1,
+        slidesToShow: 1.1,
         slidesToScroll: 1,
         draggable: !activeItem && !activeContainer,
         swipe: !activeItem && !activeContainer,
         arrows: false,
+        swipeToSlide: true,
     };
 
     const renderContainers = () =>
@@ -145,7 +146,7 @@ const FunnelDnd = <
                     renderBody()
                 ) : (
                     <Group
-                        gap="xs"
+                        gap={0}
                         wrap="nowrap"
                         align="start">
                         {renderBody()}

src/components/dnd/SortableDnd/SortableDnd.tsx

@@ -8,6 +8,7 @@ import React, {
     useState,
 } from "react";
 import { Active, DndContext, DragEndEvent } from "@dnd-kit/core";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { SortableContext } from "@dnd-kit/sortable";
 import { LexoRank } from "lexorank";
 import { Box, Flex } from "@mantine/core";
@@ -100,6 +101,7 @@ const SortableDnd = <T extends BaseItem>({
 
     return (
         <DndContext
+            modifiers={[restrictToHorizontalAxis]}
             sensors={sensors}
             onDragStart={({ active }) => setActive(active)}
             onDragEnd={onDragEndLocal}

src/components/layout/PageBlock/PageBlock.module.css

@@ -9,7 +9,15 @@
     }
     @media (min-width: 48em) {
         padding: rem(35);
-        border-radius: rem(40);
+        border-radius: rem(20);
+    }
+}
+
+.mobile-padding-height {
+    height: 100% !important;
+    @media (min-width: 48em) {
+        padding: rem(40);
+        height: 89vh;
     }
 }
 
@@ -41,3 +49,10 @@
         overflow-y: auto;
     }
 }
+
+.transparent {
+    @media (min-width: 48em) {
+        box-shadow: none !important;
+        background-color: transparent !important;
+    }
+}

src/components/layout/PageBlock/PageBlock.tsx

@@ -1,23 +1,27 @@
 import { CSSProperties, FC, ReactNode } from "react";
 import classNames from "classnames";
 import styles from "./PageBlock.module.css";
-5
+
 type Props = {
     children: ReactNode;
     style?: CSSProperties;
+    className?: string;
     fullHeight?: boolean;
     fullHeightFixed?: boolean;
     noBorderRadius?: boolean;
     fullScreenMobile?: boolean;
+    transparent?: boolean;
 };
 
 const PageBlock: FC<Props> = ({
     children,
     style,
+    className = "",
     fullHeight = false,
     fullHeightFixed = false,
     noBorderRadius = false,
     fullScreenMobile = false,
+    transparent = false,
 }) => {
     return (
         <div
@@ -27,7 +31,9 @@ const PageBlock: FC<Props> = ({
                 fullHeight && styles["container-full-height"],
                 fullHeightFixed && styles["container-full-height-fixed"],
                 noBorderRadius && styles["container-no-border-radius"],
-                fullScreenMobile && styles["container-full-screen-mobile"]
+                fullScreenMobile && styles["container-full-screen-mobile"],
+                transparent && styles.transparent,
+                styles[className]
             )}>
             {children}
         </div>

src/components/layout/PageContainer/PageContainer.module.css

@@ -1,7 +1,10 @@
 .container {
     display: flex;
     flex-direction: column;
-    gap: rem(10);
+    min-height: 100vh;
-    min-height: 86vh;
     background-color: transparent;
+
+    @media (min-width: 48em) {
+        gap: rem(10);
+    }
 }

src/components/layout/SmallPageBlock/SmallPageBlock.module.css

@@ -0,0 +1,36 @@
+
+.container {
+    border-radius: 20px;
+    margin: 18px;
+
+    @mixin dark {
+        background-color: #212121;
+        box-shadow: 1px 1px 10px 1px var(--mantine-color-dark-6);
+    }
+    @mixin light {
+        background-color: #fcfdff;
+        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.04);
+    }
+}
+
+.container-active {
+    @mixin dark {
+        background-color: var(--mantine-color-dark-8);
+        box-shadow: 5px 5px 20px 1px var(--mantine-color-dark-6);
+    }
+    @mixin light {
+        background-color: white;
+        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.16);
+    }
+}
+
+.container:hover {
+    @mixin dark {
+        background-color: var(--mantine-color-dark-8);
+        box-shadow: 5px 5px 20px 1px var(--mantine-color-dark-6);
+    }
+    @mixin light {
+        background-color: white;
+        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.16);
+    }
+}

src/components/layout/SmallPageBlock/SmallPageBlock.tsx

@@ -0,0 +1,23 @@
+import { CSSProperties, FC, ReactNode } from "react";
+import classNames from "classnames";
+import styles from "@/components/layout/SmallPageBlock/SmallPageBlock.module.css";
+
+type Props = {
+    children: ReactNode;
+    style?: CSSProperties;
+    active?: boolean;
+};
+
+const SmallPageBlock: FC<Props> = ({ children, style, active = false }) => {
+    return (
+        <div
+            className={classNames(
+                styles.container,
+                active && styles["container-active"]
+            )}
+            style={style}>
+            {children}
+        </div>
+    );
+};
+export default SmallPageBlock;

src/hooks/useIsMobile.ts

@@ -1,8 +1,7 @@
-import { em } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 
 const useIsMobile = () => {
-    return useMediaQuery(`(max-width: ${em(750)})`);
+    return useMediaQuery("(max-width: 48em)");
 };
 
 export default useIsMobile;

src/theme.ts

@@ -1,7 +1,7 @@
 import { createTheme, MantineColorsTuple } from "@mantine/core";
 
 export const myColor: MantineColorsTuple = [
-    "#e2faff",
+    "#e0f0f4",
     "#d4eff8",
     "#afdce9",
     "#87c8db",
@@ -39,5 +39,10 @@ export const theme = createTheme({
                 radius,
             },
         },
+        Card: {
+            defaultProps: {
+                radius,
+            }
+        }
     },
 });

yarn.lock

@@ -1558,6 +1558,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@dnd-kit/modifiers@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "@dnd-kit/modifiers@npm:9.0.0"
+  dependencies:
+    "@dnd-kit/utilities": "npm:^3.2.2"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@dnd-kit/core": ^6.3.0
+    react: ">=16.8.0"
+  checksum: 10c0/ca8cc9da8296df10774d779c1611074dc327ccc3c49041c102111c98c7f2b2b73b6af5209c0eef6b2fe978ac63dc2a985efa87c85a8d786577304bd2e64cee1d
+  languageName: node
+  linkType: hard
+
 "@dnd-kit/sortable@npm:^10.0.0":
   version: 10.0.0
   resolution: "@dnd-kit/sortable@npm:10.0.0"
@@ -6087,6 +6100,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.27.4"
     "@dnd-kit/core": "npm:^6.3.1"
+    "@dnd-kit/modifiers": "npm:^9.0.0"
     "@dnd-kit/sortable": "npm:^10.0.0"
     "@eslint/js": "npm:^9.29.0"
     "@hey-api/client-axios": "npm:^0.9.1"