fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: layouts and styles for desktop and mobile

Browse Source
This commit is contained in:
AlexSserb
2025-08-12 14:23:55 +04:00
parent 6715e4bd38
commit 5144c83e93
27 changed files with 324 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

7
src/app/deals/components/Board/Board.module.css Normal file
View File

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

77
src/app/deals/components/Board/Board.tsx
View File

@ -1,53 +1,58 @@
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 (
<Group
miw={130}
px={"md"}
py={"xs"}
justify={"space-between"}
wrap={"nowrap"}
style={{ ...containerStyle, borderWidth: 1 }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}>
<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={isHovered}
board={board}
startEditing={startEditing}
/>
</>
)}
modalTitle={"Редактирование доски"}
/>
</Group>
<SmallPageBlock active={selectedBoard?.id === board.id}>
<Group
px={"md"}
py={"xs"}
bdrs={"lg"}
justify={"space-between"}
className={styles.board}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}>
<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={isHovered}
board={board}
startEditing={startEditing}
/>
</>
)}
modalTitle={"Редактирование доски"}
/>
</Group>
</SmallPageBlock>
);
};

5
src/app/deals/components/Board/BoardMenu.tsx
View File

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

50
src/app/deals/components/BoardMobile/BoardMobile.tsx Normal file
View File

@ -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;

16
src/app/deals/components/Boards/Boards.tsx
View File

@ -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) => {
return <Board board={board} />;
};
const renderBoard = (board: BoardSchema) => <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 />

17
src/app/deals/components/CreateBoardButton/CreateBoardButton.tsx
View File

@ -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
style={{ cursor: "pointer" }}
pr={"md"}>
<SmallPageBlock style={{ cursor: "pointer" }}>
<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>
);
};

2
src/app/deals/components/CreateStatusButton/CreateStatusButton.tsx
View File

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

8
src/app/deals/components/DealCard/DealCard.module.css Normal file
View File

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

3
src/app/deals/components/DealCard/DealCard.tsx
View File

@ -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;

40
src/app/deals/components/Header/Header.tsx
View File

@ -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,32 +17,39 @@ 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 (
<Group
justify={"space-between"}
w={"100%"}>
<Box p={"md"}>
<IconChevronLeft />
</Box>
<Text>{selectedProject?.name}</Text>
<Box
p={"md"}
onClick={() => setIsEditorDrawerOpened(true)}>
<IconSettings />
</Box>
</Group>
<Stack>
<Group
justify={"space-between"}
w={"100%"}>
<Box p={"md"}>
<IconChevronLeft />
</Box>
<Text>{selectedProject?.name}</Text>
<Box
p={"md"}
onClick={() => setIsEditorDrawerOpened(true)}>
<IconSettings />
</Box>
</Group>
<Boards />
</Stack>
);
};

9
src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.module.css Normal file
View File

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

14
src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.tsx
View File

@ -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"}
style={{
borderWidth: 1,
borderColor: "gray",
width: "15vw",
minWidth: 150,
}}>
mx={7}
className={styles.container}>
<Group
wrap={"nowrap"}
justify={"space-between"}
ml={"xs"}
mb={"xs"}>
className={"flex-nowrap border-b-3 border-blue-500 mb-3 p-3"}>
<InPlaceInput
defaultValue={status.name}
onComplete={value => handleSave(value)}

24
src/app/deals/components/StatusColumnWrapper/StatusMenu.tsx
View File

@ -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,16 +52,18 @@ const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
<Text>Удалить</Text>
</Group>
</Menu.Item>
<Menu.Item
onClick={e => {
e.stopPropagation();
setIsEditorDrawerOpened(true);
}}>
<Group wrap={"nowrap"}>
<IconExchange />
<Text>Изменить порядок</Text>
</Group>
</Menu.Item>
{isMobile && (
<Menu.Item
onClick={e => {
e.stopPropagation();
setIsEditorDrawerOpened(true);
}}>
<Group wrap={"nowrap"}>
<IconExchange />
<Text>Изменить порядок</Text>
</Group>
</Menu.Item>
)}
</Menu.Dropdown>
</Menu>
);

14
src/app/deals/hooks/useSensors.ts
View File

@ -6,12 +6,20 @@ 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: {
distance: 5,
},
activationConstraint: isMobile
? {
delay: 500,
tolerance: 5,
}
: {
distance: 5,
},
};
return useSensors(

24
src/app/deals/page.tsx
View File

@ -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>
<ProjectsContextProvider>
<BoardsContextProvider>
<PageContainer>
<PageBlock
transparent
style={{ padding: 0, paddingRight: 15 }}>
<Header />
<Boards />
<Divider my={"xl"} />
</PageBlock>
<PageBlock className={"mobile-padding-height"}>
<StatusesContextProvider>
<DealsContextProvider>
<Funnel />
@ -27,9 +27,9 @@ export default function DealsPage() {
<BoardStatusesEditorDrawer />
</StatusesContextProvider>
<ProjectBoardsEditorDrawer />
</BoardsContextProvider>
</ProjectsContextProvider>
</PageBlock>
</PageContainer>
</PageBlock>
</PageContainer>
</BoardsContextProvider>
</ProjectsContextProvider>
);
}

2
src/app/global.css
View File

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

5
src/components/dnd/FunnelDnd/FunnelDnd.tsx
View File

@ -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()}

2
src/components/dnd/SortableDnd/SortableDnd.tsx
View File

@ -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}

17
src/components/layout/PageBlock/PageBlock.module.css
View File

@ -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;
}
}

10
src/components/layout/PageBlock/PageBlock.tsx
View File

@ -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>

7
src/components/layout/PageContainer/PageContainer.module.css
View File

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

36
src/components/layout/SmallPageBlock/SmallPageBlock.module.css Normal file
View File

@ -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);
}
}

23
src/components/layout/SmallPageBlock/SmallPageBlock.tsx Normal file
View File

@ -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;

3
src/hooks/useIsMobile.ts
View File

@ -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;

7
src/theme.ts
View File

@ -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,
}
}
},
});

14
yarn.lock
View File

@ -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"