feat: navbar and footer
This commit is contained in:
@ -44,14 +44,15 @@ const Board: FC<Props> = ({ board }) => {
|
||||
{board.name}
|
||||
</Text>
|
||||
</Box>
|
||||
<BoardMenu
|
||||
isHovered={
|
||||
!isMobile &&
|
||||
(selectedBoard?.id === board.id || isHovered)
|
||||
}
|
||||
board={board}
|
||||
startEditing={startEditing}
|
||||
/>
|
||||
{!isMobile && (
|
||||
<BoardMenu
|
||||
isHovered={
|
||||
selectedBoard?.id === board.id || isHovered
|
||||
}
|
||||
board={board}
|
||||
startEditing={startEditing}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
modalTitle={"Редактирование доски"}
|
||||
|
||||
@ -11,15 +11,14 @@ type Props = {
|
||||
};
|
||||
|
||||
const BoardMenu: FC<Props> = ({ board, startEditing, isHovered = true }) => {
|
||||
const { selectedBoard, onDeleteBoard } = useBoardsContext();
|
||||
const { onDeleteBoard } = useBoardsContext();
|
||||
|
||||
return (
|
||||
<Menu>
|
||||
<Menu.Target>
|
||||
<Box
|
||||
style={{
|
||||
opacity:
|
||||
isHovered || selectedBoard?.id === board.id ? 1 : 0,
|
||||
opacity: isHovered ? 1 : 0,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={e => e.stopPropagation()}>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
.container {
|
||||
cursor: pointer;
|
||||
height: calc(100vh - 150px);
|
||||
height: 100%;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
width: 80vw;
|
||||
|
||||
@ -6,7 +6,6 @@ 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";
|
||||
import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle";
|
||||
import useIsMobile from "@/hooks/useIsMobile";
|
||||
|
||||
const Header = () => {
|
||||
@ -26,14 +25,11 @@ const Header = () => {
|
||||
justify={"end"}
|
||||
wrap={"nowrap"}
|
||||
pr={"md"}>
|
||||
<Group wrap={"nowrap"}>
|
||||
<ColorSchemeToggle />
|
||||
<ProjectSelect
|
||||
data={projects}
|
||||
value={selectedProject}
|
||||
onChange={value => value && setSelectedProject(value)}
|
||||
/>
|
||||
</Group>
|
||||
<ProjectSelect
|
||||
data={projects}
|
||||
value={selectedProject}
|
||||
onChange={value => value && setSelectedProject(value)}
|
||||
/>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
|
||||
.container {
|
||||
height: calc(100vh - 150px);
|
||||
|
||||
@media (max-width: 48em) {
|
||||
width: 80vw;
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,6 +10,10 @@
|
||||
border-radius: var(--mantine-spacing-md);
|
||||
gap: 0;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
max-height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
@mixin light {
|
||||
background-color: var(--color-light-aqua);
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ const StatusColumnWrapper = ({ renderHeader, children }: Props) => {
|
||||
scrollbarSize={10}
|
||||
type={"always"}
|
||||
scrollbars={"y"}>
|
||||
<Stack mah={"calc(100vh - 220px)"}>{children}</Stack>
|
||||
<Stack mah={"calc(100vh - 250px)"}>{children}</Stack>
|
||||
</ScrollArea>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
@ -15,7 +15,7 @@ export default function DealsPage() {
|
||||
<ProjectsContextProvider>
|
||||
<BoardsContextProvider>
|
||||
<PageContainer>
|
||||
<PageBlock className={"mobile-padding-height"}>
|
||||
<PageBlock className={"mobile-margin-height"}>
|
||||
<Header />
|
||||
<StatusesContextProvider>
|
||||
<DealsContextProvider>
|
||||
|
||||
Reference in New Issue
Block a user