responsive task manager

2026-06-20 09:21:13 +03:30
parent 19d60a9225
commit f836abd8f4
8 changed files with 80 additions and 71 deletions
@@ -3,7 +3,7 @@ import { type FC } from "react";

 const AddNewColumn: FC = () => {
  return (
-    <button type="button" className="bg-[#F0F3F7BF] bg-opacity-75 rounded-full px-6 py-4 flex items-center gap-2 shrink-0 self-start cursor-pointer">
+    <button type="button" className="bg-[#F0F3F7BF] bg-opacity-75 rounded-full px-4 sm:px-6 py-3 sm:py-4 flex items-center gap-2 shrink-0 self-start cursor-pointer w-[272px] sm:w-[288px] xl:w-[310px] justify-center">
      <AddCircle size={16} color="black" />
      <span className="text-xs text-black">اضافه کردن ستون جدید</span>
    </button>
@@ -46,7 +46,7 @@ const Column: FC<Props> = ({

  return (
    <div
-      className={`bg-[#F0F3F7] rounded-xl p-6 max-w-[310px] w-full flex flex-col self-start transition-colors ${
+      className={`bg-[#F0F3F7] rounded-xl p-3 sm:p-4 xl:p-6 w-[272px] sm:w-[288px] xl:w-[310px] shrink-0 flex flex-col max-h-[calc(100dvh-140px)] sm:max-h-[calc(100dvh-152px)] xl:max-h-[calc(100dvh-220px)] transition-colors ${
        isDragOver ? "ring-2 ring-primary/40" : ""
      }`}
      onDragOver={handleDragOver}
@@ -54,35 +54,33 @@ const Column: FC<Props> = ({
      onDrop={(e) => handleDrop(e, tasks.length)}
    >
      <div className="flex justify-between items-center shrink-0">
-        <div className="font-bold text-sm">{column.title}</div>
-        <More size={20} color="black" />
+        <div className="font-bold text-sm truncate">{column.title}</div>
+        <More size={20} color="black" className="shrink-0" />
      </div>

-      {tasks.length > 0 && (
-        <div className="mt-5 flex flex-col gap-4">
-          {tasks.map((task, index) => (
-            <div
-              key={task.id}
-              onDragOver={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              }}
-              onDrop={(e) => handleDrop(e, index)}
-            >
-              <Task
-                task={task}
-                isDragging={draggedTaskId === task.id}
-                onDragStart={onDragStart}
-                onDragEnd={onDragEnd}
-                onClick={onTaskClick}
-              />
-            </div>
-          ))}
-        </div>
-      )}
+      <div className="mt-3 sm:mt-4 xl:mt-5 flex-1 min-h-0 overflow-y-auto overscroll-y-contain flex flex-col gap-3 sm:gap-4">
+        {tasks.map((task, index) => (
+          <div
+            key={task.id}
+            onDragOver={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            onDrop={(e) => handleDrop(e, index)}
+          >
+            <Task
+              task={task}
+              isDragging={draggedTaskId === task.id}
+              onDragStart={onDragStart}
+              onDragEnd={onDragEnd}
+              onClick={onTaskClick}
+            />
+          </div>
+        ))}
+      </div>

      {isAdding ? (
-        <div className="mt-5 shrink-0 flex flex-col gap-3">
+        <div className="mt-3 sm:mt-4 xl:mt-5 shrink-0 flex flex-col gap-3">
          <input
            type="text"
            placeholder="عنوان تسک"
@@ -111,7 +109,7 @@ const Column: FC<Props> = ({
        <button
          type="button"
          onClick={() => setIsAdding(true)}
-          className="mt-5 flex gap-2 items-center shrink-0 cursor-pointer"
+          className="mt-3 sm:mt-4 xl:mt-5 flex gap-2 items-center shrink-0 cursor-pointer"
        >
          <AddCircle size={18} color="#888888" />
          <span className="text-description text-[13px] mt-0.5">اضافه کردن تسک</span>
@@ -2,19 +2,19 @@ import { InfoCircle, Setting2, UserAdd } from "iconsax-react";

 const HeaderWorkspace = () => {
  return (
-    <div className="flex justify-between items-center bg-primary h-[102px] px-8">
-      <div className="flex gap-4 items-center">
-        <div className="text-white text-xl">طراحی Dpage</div>
-        <InfoCircle size={20} color="white" />
+    <div className="flex justify-between items-center bg-primary h-14 sm:h-16 xl:h-[102px] px-3 sm:px-6 xl:px-8 shrink-0 gap-3">
+      <div className="flex gap-2 sm:gap-4 items-center min-w-0">
+        <div className="text-white text-base sm:text-lg xl:text-xl truncate">طراحی Dpage</div>
+        <InfoCircle size={18} color="white" />
      </div>

-      <div className="flex gap-4 items-center">
-        <div className="flex gap-1 items-center px-2 rounded-lg bg-white h-8">
+      <div className="flex gap-2 sm:gap-4 items-center shrink-0">
+        <div className="flex gap-1 items-center px-2 sm:px-3 rounded-lg bg-white h-8">
          <UserAdd size={18} color="black" />
-          <div className="text-black text-xs">اشتراک گذاری</div>
+          <div className="text-black text-xs hidden sm:block">اشتراک گذاری</div>
        </div>

-        <Setting2 size={20} color="white" />
+        <Setting2 size={18} color="white" />
      </div>
    </div>
  );
@@ -41,17 +41,17 @@ const Task: FC<Props> = ({ task, isDragging, onDragStart, onDragEnd, onClick })
        {task.tag}
      </div>
      <div className="font-bold text-xs mt-2">{task.title}</div>
-      <div className="mt-2 flex items-center gap-4 text-xs">
-        <div className="flex items-center gap-1 text-[10px]">
-          <Calendar size={16} color="#292D32" />
-          <div>{task.dateRange}</div>
+      <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs">
+        <div className="flex items-center gap-1 text-[10px] min-w-0">
+          <Calendar size={16} color="#292D32" className="shrink-0" />
+          <div className="truncate">{task.dateRange}</div>
        </div>

-        <div className="flex gap-1">
+        <div className="flex gap-1 shrink-0">
          <AttachCircle size={16} color="#292D32" />
          <div>{task.attachments}</div>
        </div>
-        <div className="flex gap-1">
+        <div className="flex gap-1 shrink-0">
          <TickSquare size={16} color="#292D32" />
          <div>
            {task.checklistDone}/{task.checklistTotal}
@@ -71,7 +71,7 @@ const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover,
                className={`flex items-center gap-1.5 border rounded-lg px-3 py-2 text-[11px] cursor-pointer transition-colors ${isActive ? "bg-[#4A4A4A] text-white border-transparent" : "bg-white/50 text-[#292D32] border-white"}`}
              >
                <Icon size={16} color={isActive ? "#FFFFFF" : "#292D32"} />
-                <span>{t(labelKey)}</span>
+                <span className="hidden sm:inline">{t(labelKey)}</span>
              </button>
            </div>
          );
@@ -19,8 +19,8 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, s
  const dateLabel = formatDateRange(startDate, endDate);

  return (
-    <div className="mt-7 flex gap-10">
-      <div>
+    <div className="mt-5 sm:mt-7 grid grid-cols-[auto_auto] gap-x-6 gap-y-4 sm:flex sm:flex-wrap sm:gap-x-10 sm:gap-y-4">
+      <div className="min-w-0">
        <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.labels")}</div>
        <div className="flex items-center gap-2 flex-wrap">
          {selectedLabels.map((label) => (
@@ -34,7 +34,7 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, s
          ))}
          <button
            type="button"
-            className="size-7 rounded-lg border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer"
+            className="size-7 rounded-lg border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer shrink-0"
            aria-label={t("taskmanager.task_detail.new_label")}
          >
            <Add
@@ -45,13 +45,13 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, s
        </div>
      </div>

-      <div>
+      <div className="min-w-0">
        <div className="text-xs font-medium mb-2">{t("taskmanager.users")}</div>
        <div className="flex items-center gap-2 flex-wrap">
          {selectedUsers.map((user) => (
            <div
              key={user.id}
-              className="size-8 rounded-full bg-[#D0D0D0] overflow-hidden"
+              className="size-8 rounded-full bg-[#D0D0D0] overflow-hidden shrink-0"
            >
              <img
                src={user.avatar ?? AvatarImage}
@@ -62,7 +62,7 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, s
          ))}
          <button
            type="button"
-            className="size-7 rounded-full border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer"
+            className="size-7 rounded-full border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer shrink-0"
            aria-label={t("taskmanager.users")}
          >
            <Add
@@ -73,9 +73,13 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, s
        </div>
      </div>

-      <div>
+      <div className="col-span-2 sm:col-span-1 min-w-0">
        <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.date")}</div>
-        {dateLabel ? <span className="inline-flex items-center h-7 px-3 rounded-lg text-xs font-medium bg-[#E8E8E8] text-[#292D32]">{dateLabel}</span> : null}
+        {dateLabel ? (
+          <span className="inline-flex items-center min-h-7 px-3 py-1 rounded-lg text-xs font-medium bg-[#E8E8E8] text-[#292D32] whitespace-nowrap">
+            {dateLabel}
+          </span>
+        ) : null}
      </div>
    </div>
  );
@@ -41,23 +41,25 @@ const Workspace: FC = () => {
    : null;

  return (
-    <div className="bg-[#01347A] h-full rounded-[32px] overflow-hidden flex flex-col">
+    <div className="bg-[#01347A] h-full rounded-none xl:rounded-[32px] overflow-hidden flex flex-col">
      <HeaderWorkspace />
-      <div className="px-8 flex gap-7 mt-6 flex-1 min-h-0 overflow-auto pb-6 items-start">
-        {columns.map((column) => (
-          <Column
-            key={column.id}
-            column={column}
-            tasks={tasksByColumn[column.id] ?? []}
-            draggedTaskId={draggedTaskId}
-            onDragStart={handleDragStart}
-            onDragEnd={handleDragEnd}
-            onDrop={handleDrop}
-            onTaskClick={setSelectedTask}
-          />
-        ))}
+      <div className="flex-1 min-h-0 overflow-x-auto overflow-y-hidden overscroll-x-contain">
+        <div className="flex gap-3 sm:gap-4 xl:gap-7 px-3 sm:px-4 xl:px-8 pt-4 xl:pt-6 pb-4 xl:pb-6 h-full items-start w-max min-w-full">
+          {columns.map((column) => (
+            <Column
+              key={column.id}
+              column={column}
+              tasks={tasksByColumn[column.id] ?? []}
+              draggedTaskId={draggedTaskId}
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+              onDrop={handleDrop}
+              onTaskClick={setSelectedTask}
+            />
+          ))}

-        <AddNewColumn />
+          <AddNewColumn />
+        </div>
      </div>

      <TaskDetailModal
@@ -106,12 +106,17 @@ const MainRouter: FC = () => {
  const isWorkspace = pathname.startsWith(Pages.taskmanager.workspace);

  return (
-    <div className="p-4 overflow-hidden">
+    <div className={clx("overflow-hidden", isWorkspace ? "p-0 xl:p-4" : "p-4")}>
      {!isWorkspace && <SideBar />}
      <Header />
      <div className={clx("flex-1 mt-[68px] xl:mt-[81px]", !isWorkspace && "xl:ms-[269px]", !isWorkspace && hasSubMenu && "xl:ms-[305px]")}>
-        <div className={clx(`overflow-auto w-[${window.innerWidth}] h-[calc(100vh-113px)] flex flex-col`)}>
-          <div className="flex-1 min-h-0">
+        <div
+          className={clx(
+            "flex flex-col",
+            isWorkspace ? "h-[calc(100dvh-68px)] xl:h-[calc(100dvh-97px)] overflow-hidden" : "overflow-auto h-[calc(100vh-113px)]",
+          )}
+        >
+          <div className={clx("flex-1 min-h-0", isWorkspace && "overflow-hidden")}>
            <Routes>
              <Route path={Pages.dashboard} element={<Home />} />
              <Route path={Pages.services.mine} element={<MyServices />} />
@@ -215,10 +220,10 @@ const MainRouter: FC = () => {
              <Route path={Pages.taskmanager.projectList} element={<ProjectList />} />
            </Routes>
          </div>
-          <div className="h-20 shrink-0 xl:hidden" />
+          {!isWorkspace && <div className="h-20 shrink-0 xl:hidden" />}
        </div>
      </div>
-      <Footer />
+      {!isWorkspace && <Footer />}
    </div>
  );
 };