TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-19 22:14:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve Kanban UI

Browse Source
This commit is contained in:
sosokker 2023-11-17 03:21:00 +07:00
parent 297529472d
commit a0ffcbcd19
3 changed files with 20 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/kanbanBoard/columnContainer.jsx
View File

@ -64,16 +64,10 @@ function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks
setEditMode(true); setEditMode(true);
}} }}
className=" className="
bg-mainBackgroundColor ml-3
text-md text-md
h-[60px]
cursor-grab cursor-grab
rounded-md
rounded-b-none
p-3
font-bold font-bold
border-columnBackgroundColor
border-4
flex flex
items-center items-center
justify-between justify-between
@ -113,7 +107,7 @@ function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks
</div> </div>
{/* Column task container */} {/* Column task container */}
<div className="flex flex-grow flex-col gap-4 p-2 overflow-x-hidden overflow-y-auto"> <div className="flex flex-grow flex-col gap-2 p-1 overflow-x-hidden overflow-y-auto">
<SortableContext items={tasksIds}> <SortableContext items={tasksIds}>
{tasks.map(task => ( {tasks.map(task => (
<TaskCard key={task.id} task={task} deleteTask={deleteTask} updateTask={updateTask} /> <TaskCard key={task.id} task={task} deleteTask={deleteTask} updateTask={updateTask} />

2
frontend/src/components/kanbanBoard/columnContainerWrapper.jsx
View File

@ -2,7 +2,7 @@ import ColumnContainer from "./columnContainer";
function ColumnContainerCard({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) { function ColumnContainerCard({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
return ( return (
<div className="card bg-[#f1f2f4] shadow p-4 my-2 border-2"> <div className="card bg-[#f1f2f4] shadow p-1 my-2 border-2">
<ColumnContainer <ColumnContainer
column={column} column={column}
deleteColumn={deleteColumn} deleteColumn={deleteColumn}

33
frontend/src/components/kanbanBoard/kanbanBoard.jsx
View File

@ -4,8 +4,7 @@ import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@
import { SortableContext, arrayMove } from "@dnd-kit/sortable"; import { SortableContext, arrayMove } from "@dnd-kit/sortable";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import TaskCard from "./taskCard"; import TaskCard from "./taskCard";
import { AiOutlinePlusCircle } from "react-icons/ai" import { AiOutlinePlusCircle } from "react-icons/ai";
const defaultCols = [ const defaultCols = [
{ {
@ -142,21 +141,23 @@ function KanbanBoard() {
createNewColumn(); createNewColumn();
}} }}
className=" className="
h-[60px] h-[60px]
w-[350px] w-[350px]
min-w-[350px] min-w-[350px]
cursor-pointer cursor-pointer
rounded-lg rounded-xl
bg-mainBackgroundColor bg-[#f1f2f4]
border-2 border-2
border-columnBackgroundColor p-4
p-4 hover:bg-gray-200
ring-rose-500 flex
hover:ring-2 gap-2
flex my-2
gap-2 bg-opacity-60
"> ">
<div className="my-1">
<AiOutlinePlusCircle /> <AiOutlinePlusCircle />
</div>
Add Column Add Column
</button> </button>
</div> </div>