From e41b9a53aa80f9d0b1c041f41844d00773e952ba Mon Sep 17 00:00:00 2001 From: CREDO23 Date: Sun, 8 Sep 2024 10:39:13 +0200 Subject: [PATCH 1/2] fix: fix overlaping in the main layout --- apps/web/app/[locale]/kanban/page.tsx | 285 ++++++++---------- .../web/components/pages/main/header-tabs.tsx | 6 +- apps/web/lib/components/image-overlapper.tsx | 2 +- .../lib/features/team-members-kanban-view.tsx | 99 +++--- apps/web/lib/layout/main-layout.tsx | 16 +- apps/web/lib/layout/navbar.tsx | 4 +- 6 files changed, 199 insertions(+), 213 deletions(-) diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx index 4b2aab1d7..14c2f1b2d 100644 --- a/apps/web/app/[locale]/kanban/page.tsx +++ b/apps/web/app/[locale]/kanban/page.tsx @@ -5,9 +5,9 @@ import { useAuthenticateUser, useModal, useOrganizationTeams } from '@app/hooks' import { useKanban } from '@app/hooks/features/useKanban'; import KanbanBoardSkeleton from '@components/shared/skeleton/KanbanBoardSkeleton'; import { withAuthentication } from 'lib/app/authenticator'; -import { Breadcrumb, Container, Divider } from 'lib/components'; +import { Breadcrumb, Container } from 'lib/components'; import { KanbanView } from 'lib/features/team-members-kanban-view'; -import { Footer, MainLayout } from 'lib/layout'; +import { MainLayout } from 'lib/layout'; import { useEffect, useMemo, useState } from 'react'; import { useTranslations } from 'next-intl'; import { useParams, useSearchParams } from 'next/navigation'; @@ -32,8 +32,6 @@ import { useRecoilValue } from 'recoil'; import { fullWidthState } from '@app/stores/fullWidth'; import { CircleIcon } from 'lucide-react'; import { XMarkIcon } from '@heroicons/react/20/solid'; -import Head from 'next/head'; -import { clsxm } from '@app/utils'; const Kanban = () => { const { @@ -107,163 +105,148 @@ const Kanban = () => { }, [breadcrumbPath, currentLocale, employee]); return ( <> - - - {t('common.KANBAN')} {t('common.BOARD')} - - - -
-
- -
-
- - -
-
- -
+ + +
+
+ +
-
-

- {t('common.KANBAN')} {t('common.BOARD')} -

-
- - {`(`} - {timezone.split('(')[1]} - -
- -
+
+ +
+
+
+

+ {t('common.KANBAN')} {t('common.BOARD')} +

+
+ + {`(`} + {timezone.split('(')[1]} + +
+ +
+
-
- -
- -
+
+ +
+ +
-
-
- {tabs.map((tab) => ( -
setActiveTab(tab.value)} - className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-semibold ${activeTab === tab.value +
+
+
+ {tabs.map((tab) => ( +
setActiveTab(tab.value)} + className={`cursor-pointer px-5 text-base font-semibold ${ + activeTab === tab.value ? 'border-b-[#3826A6] text-[#3826A6] dark:text-white dark:border-b-white' : 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]' - }`} - style={{ - borderBottomWidth: '3px', - borderBottomStyle: 'solid' - }} - > - {tab.name} -
- ))} + }`} + style={{ + borderBottomWidth: '3px', + borderBottomStyle: 'solid' + }} + > + {tab.name} +
+ ))} +
+
+
+ setEpics(values || [])} + className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0" + multiple={true} + />
-
-
- setEpics(values || [])} - className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0" - multiple={true} - /> + {/*
*/} +
+
+ +
+ {issues.icon ?? } +
+

{issues.name}

+ + {issues.value && ( +
+ setIssues({ + name: 'Issues', + icon: null, + bgColor: '', + value: '' + }) + } + className="w-5 h-5 z-50 p-0.5 cursor-pointer" + > + +
+ )}
- {/*
*/} -
-
- -
- {issues.icon ?? } -
-

{issues.name}

- - {issues.value && ( -
- setIssues({ - name: 'Issues', - icon: null, - bgColor: '', - value: '' - }) - } - className="w-5 h-5 z-50 p-0.5 cursor-pointer" - > - -
- )} -
- { - setIssues(items.find((v) => v.name == e) as TStatusItem); - }} - issueType="issue" - /> -
- {/*
*/} -
- setLabels(values || [])} - className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0" - multiple={true} - /> -
-
- setPriority(values || [])} - className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0" - multiple={true} - /> -
-
- setSizes(values || [])} - className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0" - multiple={true} - /> -
-
- -
- + { + setIssues(items.find((v) => v.name == e) as TStatusItem); + }} + issueType="issue" + />
+ {/*
*/} +
+ setLabels(values || [])} + className="lg:min-w-[140px]" + multiple={true} + /> +
+
+ setPriority(values || [])} + className="lg:min-w-[140px]" + multiple={true} + /> +
+
+ setSizes(values || [])} + className="lg:min-w-[140px]" + multiple={true} + /> +
+
+ +
+
- {/*
*/} - -
-
+
+ +
{/** TODO:fetch teamtask based on days */} {activeTab && ( // add filter for today, yesterday and tomorrow -
+
{Object.keys(data).length > 0 ? ( ) : ( @@ -273,12 +256,6 @@ const Kanban = () => { )}
-
- -
-
); diff --git a/apps/web/components/pages/main/header-tabs.tsx b/apps/web/components/pages/main/header-tabs.tsx index 00b69117d..2ead49695 100644 --- a/apps/web/components/pages/main/header-tabs.tsx +++ b/apps/web/components/pages/main/header-tabs.tsx @@ -23,7 +23,11 @@ const HeaderTabs = ({ linkAll, kanban = false }: { linkAll: boolean; kanban?: bo return ( <> {options.map(({ label, icon: Icon, view: optionView }, index) => ( - + +
+ +
-
-
+
+
{tabs.map((tab) => (
{
))}
-
+
setEpics(values || [])} @@ -173,8 +174,8 @@ const Kanban = () => { />
{/*
*/} -
-
+
+
{ />
{/*
*/} -
+
setLabels(values || [])} className="lg:min-w-[140px]" multiple={true} />
-
+
setPriority(values || [])} className="lg:min-w-[140px]" multiple={true} />
-
+
setSizes(values || [])} className="lg:min-w-[140px]" @@ -239,14 +240,16 @@ const Kanban = () => {
- +
+ +
-
+
{/** TODO:fetch teamtask based on days */} {activeTab && ( // add filter for today, yesterday and tomorrow -
+
{Object.keys(data).length > 0 ? ( ) : ( diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 70aac0ad4..a00d841c2 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -24,6 +24,8 @@ import { Modal } from './modal'; import CreateTaskModal from '@components/pages/kanban/create-task-modal'; import Image from 'next/image'; import EditStatusModal from '@components/pages/kanban/edit-status-modal'; +import { ScrollArea } from '@components/ui/scroll-bar'; +import { ScrollBar } from '@components/ui/scroll-area'; const grid = 8; @@ -441,7 +443,7 @@ const KanbanDraggable = ({ // return ( - <> +
{title && ( {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( @@ -450,11 +452,11 @@ const KanbanDraggable = ({ {...provided.draggableProps} {...provided.dragHandleProps} // style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)} - className="relative flex flex-col px-2 h-fit w-[355px]" + className="relative h-full flex flex-col px-2 overflow-hidden w-[355px]" > {title ? ( - <> -
+
+
-
- - +
+ + + + +
- +
) : null}
)} @@ -492,7 +497,7 @@ const KanbanDraggable = ({ - +
); }; diff --git a/apps/web/lib/components/image-overlapper.tsx b/apps/web/lib/components/image-overlapper.tsx index 0e9d30913..441f686b5 100644 --- a/apps/web/lib/components/image-overlapper.tsx +++ b/apps/web/lib/components/image-overlapper.tsx @@ -121,7 +121,7 @@ export default function ImageOverlapper({ if ((!hasMembers && item) || hasActiveMembers || assignTaskButtonCall) { return ( -
+
{hasInfo.length > 0 && showInfo && (
@@ -232,13 +232,13 @@ export default function ImageOverlapper({ width: imageLength == 1 ? 40 : isMoreThanDisplay ? widthCalculate.length * 33 : widthCalculate.length * 35 }} - className="relative " + className="relative h-10 " > {firstArray.map((image, index) => (
- - {Array.isArray(columns) && columns.length > 0 && ( - - {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ( -
-
- {/* {columns.length > 0 ? ( - <> */} - {columns?.map((column: any, index: number) => { - return ( - -
- {isColumnCollapse(column.name) ? ( - - ) : ( - <> - - - )} -
- - ); - })} - {/* - ) : null} */} - <>{provided.placeholder} -
+ + {Array.isArray(columns) && columns.length > 0 && ( + + {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ( +
+
+ {columns?.map((column: any, index: number) => { + return ( +
+ {isColumnCollapse(column.name) ? ( + + ) : ( + + )} +
+ ); + })} + <>{provided.placeholder}
- )} - - )} - - +
+ )} + + )} + ); }; diff --git a/apps/web/lib/layout/main-layout.tsx b/apps/web/lib/layout/main-layout.tsx index 441215b13..9c2ac6a4a 100644 --- a/apps/web/lib/layout/main-layout.tsx +++ b/apps/web/lib/layout/main-layout.tsx @@ -30,7 +30,7 @@ export function MainLayout({ }: Props) { const fullWidth = useRecoilValue(fullWidthState); return ( -
+
-
- -
+
-
{children}
+
{children}
-
+
diff --git a/apps/web/lib/layout/navbar.tsx b/apps/web/lib/layout/navbar.tsx index 22a1c7b1f..9827c826b 100644 --- a/apps/web/lib/layout/navbar.tsx +++ b/apps/web/lib/layout/navbar.tsx @@ -63,7 +63,7 @@ export function Navbar({ }, [pathname]); return ( -
+
{!user && !notFound && !publicTeam ? ( ) : ( @@ -74,7 +74,7 @@ export function Navbar({ )} > -
+
{!notFound && (