Skip to content

Commit

Permalink
fix: fix overlaping in the main layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@CREDO23
CREDO23 committed Sep 10, 2024
1 parent ca133bd commit e41b9a5
Show file tree
Hide file tree
Showing 6 changed files with 199 additions and 213 deletions.
285 changes: 131 additions & 154 deletions apps/web/app/[locale]/kanban/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 {
Expand Down Expand Up @@ -107,163 +105,148 @@ const Kanban = () => {
}, [breadcrumbPath, currentLocale, employee]);
return (
<>
<Head>
<title>
{t('common.KANBAN')} {t('common.BOARD')}
</title>
</Head>
<MainLayout
showTimer={isTrackingEnabled}
footerClassName="hidden"
// footerClassName={clsxm("fixed flex flex-col items-end justify-center bottom-0 z-50 bg-white dark:bg-dark-high",!fullWidth && 'left-0 right-0')}
className="h-[calc(100vh-_22px)]"
>
<div className="h-[263.4px] z-10 bg-white dark:bg-dark-high fixed w-full"></div>
<div
className={
'fixed top-20 flex flex-col border-b-[1px] dark:border-[#26272C] z-10 mx-[0px] w-full bg-white dark:bg-dark-high'
}
>
<Container fullWidth={fullWidth}>
<div className="flex bg-white dark:bg-dark-high flex-row items-start justify-between mt-12">
<div className="flex justify-center items-center gap-8 h-10">
<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
<Breadcrumb paths={breadcrumbPath} className="text-sm" />
</div>
<div className="flex h-10 w-max items-center justify-center gap-1">
<HeaderTabs kanban={true} linkAll={true} />
</div>
<MainLayout showTimer={isTrackingEnabled} className="h-full">
<Container fullWidth={fullWidth}>
<div className="flex dark:bg-dark-high h-14 items-center justify-between">
<div className="flex justify-center items-center gap-8 h-10">
<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
<Breadcrumb paths={breadcrumbPath} className="text-sm flex items-center justify-center" />
</div>
<div className="flex justify-between items-center mt-10 bg-white dark:bg-dark-high">
<h1 className="text-4xl font-semibold ">
{t('common.KANBAN')} {t('common.BOARD')}
</h1>
<div className="flex w-fit items-center space-x-2">
<strong className="text-gray-400">
{`(`}
{timezone.split('(')[1]}
</strong>
<div className="mt-1">
<Separator />
</div>
<div className="flex h-12 w-max items-center justify-center gap-1">
<HeaderTabs kanban={true} linkAll={true} />
</div>
</div>
<div className="flex h-14 justify-between items-center dark:bg-dark-high">
<h1 className="text-4xl font-semibold ">
{t('common.KANBAN')} {t('common.BOARD')}
</h1>
<div className="flex h-full border items-end space-x-2">
<strong className="text-gray-400">
{`(`}
{timezone.split('(')[1]}
</strong>
<div className="">
<Separator />
</div>
<div className="border p-1 border-red-600 flex items-center justify-center bg-red-600">
<ImageComponent onAvatarClickRedirectTo="kanbanTasks" images={teamMembers} />
<div className="mt-1">
<Separator />
</div>

<button
onClick={openModal}
className="p-2 rounded-full border-2 border-[#0000001a] dark:border-white"
>
{/* <AddIcon width={24} height={24} className={'dark:stroke-white'} /> */}
<AddIcon className="w-6 h-6 text-foreground" />
</button>
</div>
<div className="">
<Separator />
</div>

<button
onClick={openModal}
className="p-2 rounded-full border-2 border-[#0000001a] dark:border-white"
>
{/* <AddIcon width={24} height={24} className={'dark:stroke-white'} /> */}
<AddIcon className="w-6 h-6 text-foreground" />
</button>
</div>
<div className="relative flex flex-col lg:flex-row justify-between items-center pt-10 bg-white dark:bg-dark-high">
<div className="flex flex-row">
{tabs.map((tab) => (
<div
key={tab.name}
onClick={() => setActiveTab(tab.value)}
className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-semibold ${activeTab === tab.value
</div>
<div className="relative flex flex-col lg:flex-row justify-between items-center dark:bg-dark-high">
<div className="flex flex-row">
{tabs.map((tab) => (
<div
key={tab.name}
onClick={() => 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}
</div>
))}
}`}
style={{
borderBottomWidth: '3px',
borderBottomStyle: 'solid'
}}
>
{tab.name}
</div>
))}
</div>
<div className="flex space-x-2">
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<EpicPropertiesDropdown
onValueChange={(_, values) => setEpics(values || [])}
className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
multiple={true}
/>
</div>
<div className="flex space-x-2 mt-5 lg:mt-0">
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<EpicPropertiesDropdown
onValueChange={(_, values) => setEpics(values || [])}
className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
multiple={true}
/>
{/* <div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light"> */}
<div className="relative">
<div className="bg-[#F2F2F2] dark:bg-dark--theme-light absolute flex items-center p-2 justify-between w-40 h-11 border input-border rounded-xl">
<span className="flex">
<div
className="h-6 w-6 p-1.5 rounded-md"
style={{
backgroundColor: issues.bgColor ?? 'transparent'
}}
>
{issues.icon ?? <CircleIcon className="h-3 w-3" />}
</div>
<p>{issues.name}</p>
</span>
{issues.value && (
<div
onClick={() =>
setIssues({
name: 'Issues',
icon: null,
bgColor: '',
value: ''
})
}
className="w-5 h-5 z-50 p-0.5 cursor-pointer"
>
<XMarkIcon className="h-4 w-4 dark:text-white" />
</div>
)}
</div>
{/* <div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light"> */}
<div className="relative">
<div className="bg-[#F2F2F2] dark:bg-dark--theme-light absolute flex items-center p-2 justify-between w-40 h-11 border input-border rounded-xl">
<span className="flex">
<div
className="h-6 w-6 p-1.5 rounded-md mr-1"
style={{
backgroundColor: issues.bgColor ?? 'transparent'
}}
>
{issues.icon ?? <CircleIcon className="h-3 w-3" />}
</div>
<p>{issues.name}</p>
</span>
{issues.value && (
<div
onClick={() =>
setIssues({
name: 'Issues',
icon: null,
bgColor: '',
value: ''
})
}
className="w-5 h-5 z-50 p-0.5 cursor-pointer"
>
<XMarkIcon className="h-4 w-4 dark:text-white" />
</div>
)}
</div>

<StatusDropdown
taskStatusClassName={'w-40 bg-red-500 h-10 opacity-0'}
showIssueLabels={true}
items={items}
value={issues}
onChange={(e) => {
setIssues(items.find((v) => v.name == e) as TStatusItem);
}}
issueType="issue"
/>
</div>
{/* </div> */}
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<TaskLabelsDropdown
onValueChange={(_, values) => setLabels(values || [])}
className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
multiple={true}
/>
</div>
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<TaskPropertiesDropdown
onValueChange={(_, values) => setPriority(values || [])}
className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
multiple={true}
/>
</div>
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<TaskSizesDropdown
onValueChange={(_, values) => setSizes(values || [])}
className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
multiple={true}
/>
</div>
<div className="mt-1">
<Separator />
</div>
<KanbanSearch setSearchTasks={setSearchTasks} searchTasks={searchTasks} />
<StatusDropdown
taskStatusClassName={'w-40 bg-red-500 h-10 opacity-0'}
showIssueLabels={true}
items={items}
value={issues}
onChange={(e) => {
setIssues(items.find((v) => v.name == e) as TStatusItem);
}}
issueType="issue"
/>
</div>
{/* </div> */}
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<TaskLabelsDropdown
onValueChange={(_, values) => setLabels(values || [])}
className="lg:min-w-[140px]"
multiple={true}
/>
</div>
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<TaskPropertiesDropdown
onValueChange={(_, values) => setPriority(values || [])}
className="lg:min-w-[140px]"
multiple={true}
/>
</div>
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<TaskSizesDropdown
onValueChange={(_, values) => setSizes(values || [])}
className="lg:min-w-[140px]"
multiple={true}
/>
</div>
<div className="">
<Separator />
</div>
<KanbanSearch setSearchTasks={setSearchTasks} searchTasks={searchTasks} />
</div>
{/* <div className="h-20 w-full bg-red-500/50"></div> */}
</Container>
</div>
<div className="mt-[256px] mb-24 ">
</div>
</Container>
<div className="">
{/** TODO:fetch teamtask based on days */}
{activeTab && ( // add filter for today, yesterday and tomorrow
<div>
<div className="">
{Object.keys(data).length > 0 ? (
<KanbanView isLoading={isLoading} kanbanBoardTasks={data} />
) : (
Expand All @@ -273,12 +256,6 @@ const Kanban = () => {
)}
</div>
</MainLayout>
<div className="bg-white dark:bg-[#1e2025] w-screen z-[5000] fixed bottom-0">
<Divider />
<Footer
className={clsxm(' justify-between w-full px-0 mx-auto', fullWidth ? 'px-8' : 'x-container')}
/>
</div>
<InviteFormModal open={isOpen && !!user?.isEmailVerified} closeModal={closeModal} />
</>
);
Expand Down
6 changes: 5 additions & 1 deletion apps/web/components/pages/main/header-tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@ const HeaderTabs = ({ linkAll, kanban = false }: { linkAll: boolean; kanban?: bo
return (
<>
{options.map(({ label, icon: Icon, view: optionView }, index) => (
<Tooltip key={label} label={t(`common.${label}` as DottedLanguageObjectStringPaths)} placement="top-start">
<Tooltip
key={label}
label={t(`common.${label}` as DottedLanguageObjectStringPaths)}
placement="top-start"
>
<LinkWrapper isRoute={!!links[index]} href={links[index]}>
<button
className={clsxm(
Expand Down
2 changes: 1 addition & 1 deletion apps/web/lib/components/image-overlapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export default function ImageOverlapper({

if ((!hasMembers && item) || hasActiveMembers || assignTaskButtonCall) {
return (
<div className="relative">
<div className="relative bg-blue-500 h-full">
{hasInfo.length > 0 && showInfo && (
<div className="flex w-[200px] justify-center items-center rounded-[3px] text-[12px] absolute left-[-80px] top-[-45px]">
<div className="relative bg-black text-white rounded-[3px]">
Expand Down
Loading

0 comments on commit e41b9a5

Please sign in to comment.