ui of card is fixed

ever-co · Feb 17, 2024 · 990f666 · 990f666
1 parent fdea8d7
commit 990f666
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 24 deletions.
diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx
@@ -73,7 +73,7 @@ const Kanban = () => {
 			<MainLayout showTimer={true}>
 				<div
 					className={
-						' overflow-auto fixed flex flex-col bg-white dark:bg-dark--theme  z-10 px-[32px] mx-[0px] w-full'
+						'overflow-auto fixed flex flex-col bg-white dark:bg-dark--theme  z-10 px-[32px] mx-[0px] w-full'
 					}
 				>
 					<div className="flex flex-row items-start justify-between mt-12">

diff --git a/apps/web/app/hooks/features/useKanban.ts b/apps/web/app/hooks/features/useKanban.ts
@@ -11,7 +11,7 @@ export function useKanban() {
 	const [kanbanBoard, setKanbanBoard] = useRecoilState(kanbanBoardState);
 	const taskStatusHook = useTaskStatus();
 	const { tasks, tasksFetching, updateTask } = useTeamTasks();
-
+	console.log('taskStatusHook', kanbanBoard);
 	/**
 	 * format data for kanban board
 	 */

diff --git a/apps/web/components/ui/svgs/circular-progress.tsx b/apps/web/components/ui/svgs/circular-progress.tsx
@@ -15,7 +15,7 @@ export default function CircularProgress({
 		<>
 			<div
 				x-data="scrollProgress"
-				className="relative -rotate-90 inline-flex items-center justify-center overflow-hidden rounded-full"
+				className="relative max-h-12 h-12 w-12 max-w-12 min-w-12 max-w-12 -rotate-90 inline-flex items-center justify-center overflow-hidden rounded-full"
 			>
 				<svg className="w-12 h-12">
 					<circle

diff --git a/apps/web/lib/components/image-overlapper.tsx b/apps/web/lib/components/image-overlapper.tsx
@@ -44,7 +44,7 @@ export default function ImageOverlapper({
 						if (index < numberOfImagesDisplayed) {
 							return (
 								<Link href={`/profile/${image.id}`} className="relative w-[40px] h-[40px]" key={index}>
-									<Tooltip label={image.alt} placement="bottom-end">
+									<Tooltip label={image.alt}>
 										<Image
 											src={image.url}
 											alt={`${image.alt} avatar`}

diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx
@@ -11,12 +11,12 @@ import {
 } from '@app/hooks';
 import ImageComponent, { ImageOverlapperProps } from './image-overlapper';
 import { TaskInput, TaskIssueStatus } from 'lib/features';
-import Link from 'next/link';
 import CircularProgress from '@components/ui/svgs/circular-progress';
 import { HorizontalSeparator } from './separator';
 import { pad } from '@app/helpers';
 import { TaskStatus } from '@app/constants';
 import { UserTeamCardMenu } from 'lib/features/team/user-team-card/user-team-card-menu';
+import Link from 'next/link';
 
 function getStyle(provided: DraggableProvided, style: any) {
 	if (!style) {
@@ -86,9 +86,24 @@ function Priority({ level }: { level: number }) {
 
 	return (
 		<>
-			<div className="flex flex-col">
+			<div
+				style={{
+					marginTop: -4.5 * level
+				}}
+				className="flex flex-col relative "
+			>
 				{numberArray.map((item: any, index: number) => {
-					return <PriorityIcon key={index} />;
+					return (
+						<span
+							key={index}
+							style={{
+								top: `${index * 4}px`
+							}}
+							className="absolute"
+						>
+							<PriorityIcon />
+						</span>
+					);
 				})}
 			</div>
 		</>
@@ -144,28 +159,43 @@ export default function Item(props: ItemProps) {
 			data-index={index}
 			aria-label={item.label}
 		>
-			<div className=" w-full justify-between h-40">
+			<div className=" w-full justify-between h-fit">
 				<div className="w-full flex justify-between">
-					<span>{<TagList tags={[]} />}</span>
+					<span>{<TagList tags={item.tags} />}</span>
 					{menu}
 				</div>
 				<div className="w-full flex justify-between my-3">
-					<div className="flex items-center ">
+					<div className="flex items-center w-64">
 						{!taskEdition.editMode ? (
 							<>
-								<TaskIssueStatus
-									showIssueLabels={false}
-									task={item}
-									className="rounded-sm mr-1 h-6 w-6"
-								/>
-								<span className="text-grey text-normal mr-1">#{item.number}</span>
-								<Link
-									href={`/task/${item.id}`}
-									className="text-black dark:text-white text-normal capitalize mr-2 bg-blue line-clamp-2"
-								>
-									{item.title}
+								<Link href={`/task/${item.id}`}>
+									<div className="w-64 relative overflow-hidden">
+										<span className="h-5 w-6 inline-block ">
+											<span className="absolute top-1">
+												<TaskIssueStatus
+													showIssueLabels={true}
+													task={item}
+													className="rounded-sm mr-1 h-6 w-6"
+												/>
+											</span>
+										</span>
+										<span className="text-grey text-normal mx-1">#{item.number}</span>
+										{item.title}
+										<span className="inline-block ml-1">
+											<Priority
+												level={
+													item.priority == 'Low'
+														? 1
+														: item.priority == 'Medium'
+														? 2
+														: item.priority == 'High'
+														? 3
+														: 4
+												}
+											/>
+										</span>
+									</div>
 								</Link>
-								<Priority level={1} />
 							</>
 						) : (
 							<div className="w-56">
@@ -192,7 +222,7 @@ export default function Item(props: ItemProps) {
 					<HorizontalSeparator />
 				</div>
 				<div className="w-full flex items-center justify-between">
-					<div className="mt-1">
+					<div className="mt-1 ">
 						{item.status === TaskStatus.INPROGRESS ? (
 							<div className="flex items-center gap-2">
 								<small className="text-grey text-xs text-normal">Live:</small>
@@ -209,7 +239,9 @@ export default function Item(props: ItemProps) {
 							</div>
 						)}
 					</div>
-					<ImageComponent images={taskAssignee} />
+					<div className="w-56 flex justify-end">
+						<ImageComponent radius={30} images={taskAssignee} />
+					</div>
 					{item.issueType && (
 						<div className="flex flex-row items-center justify-center rounded-full w-5 h-5 z-10 bg-[#e5e7eb] dark:bg-[#181920] absolute top-0 right-0">
 							<div

diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx
@@ -175,6 +175,7 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban })
 	}, []);
 
 	if (!enabled) return null;
+	console.log("show-list",items,columns)
 	return (
 		<>
 			{/* <div className="flex flex-col justify-between"> */}