Merge pull request #2008 from ever-co/feat/tabletResponsive

Feat/tablet make tables (tasks and team members) responsive on tablets devices
ever-co · Dec 18, 2023 · 027cb3d · 027cb3d
2 parents 2995d10 + 314ca9c
commit 027cb3d
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 28 deletions.
diff --git a/apps/web/lib/features/task/task-item.tsx b/apps/web/lib/features/task/task-item.tsx
@@ -32,17 +32,17 @@ export function TaskItem({ task, selected, onClick, className }: Props) {
 
 	return (
 		<div
-			className={clsxm('flex justify-between items-center', className)}
+			className={clsxm('flex justify-between items-center overflow-y-auto', className)}
 			onClick={() => onClick && task && task.status !== 'closed' && onClick(task)}
 		>
 			<div
 				className={clsxm(
-					'font-normal text-sm',
+					'font-normal min-w-[19rem] text-sm',
 					'overflow-hidden text-ellipsis flex-1',
 					selected && ['font-medium text-primary dark:text-primary-light']
 				)}
 			>
-				<div className="inline-flex items-center mr-2">
+				<div className="inline-flex  items-center mr-2">
 					<div className="mr-2">
 						<TaskIssueStatus
 							showIssueLabels={false}

diff --git a/apps/web/lib/features/team-member-cell.tsx b/apps/web/lib/features/team-member-cell.tsx
@@ -20,7 +20,7 @@ export function TaskCell({ row }: { row: any }) {
 		<TaskInfo
 			edition={taskEdition}
 			memberInfo={memberInfo}
-			className="2xl:w-80 3xl:w-[32rem] w-full lg:w-1/5 lg:px-4 px-2"
+			className="2xl:w-80 3xl:w-[32rem] !w-full lg:w-1/5 lg:px-4 px-2"
 			publicTeam={publicTeam}
 		/>
 	);
@@ -45,7 +45,7 @@ export function WorkedOnTaskCell({ row }: { row: any }) {
 			memberInfo={memberInfo}
 			task={memberInfo?.memberTask}
 			isAuthUser={memberInfo?.isAuthUser}
-			className="2xl:w-32 3xl:w-[8rem] w-52 lg:w-1/5  flex flex-col gap-y-[1.125rem] justify-center"
+			className="2xl:w-32 3xl:w-[8rem] min-w-[15rem] w-52 lg:w-1/5  flex flex-col gap-y-[1.125rem] justify-center"
 		/>
 	);
 }
@@ -60,7 +60,7 @@ export function TaskEstimateInfoCell({ row }: { row: any }) {
 			memberInfo={memberInfo}
 			edition={taskEdition}
 			activeAuthTask={true}
-			className="lg:px-3 2xl:w-52 3xl:w-64 w-52 lg:w-1/5"
+			className="lg:px-3 2xl:w-52 3xl:w-64  min-w-[15rem] w-52 lg:w-1/5"
 		/>
 	);
 }

diff --git a/apps/web/lib/features/team/user-team-card/index.tsx b/apps/web/lib/features/team/user-team-card/index.tsx
@@ -123,7 +123,7 @@ export function UserTeamCard({ className, active, member, publicTeam = false }:
 				<TaskInfo
 					edition={taskEdition}
 					memberInfo={memberInfo}
-					className="2xl:w-80 3xl:w-[32rem] w-1/5 lg:px-4 px-2"
+					className="2xl:w-80 3xl:w-[32rem] w-1/5 lg:px-4 px-2 overflow-y-auto"
 					publicTeam={publicTeam}
 				/>
 				<VerticalSeparator className="ml-2" />

diff --git a/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx b/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 
 function UserTeamTableHeader() {
 	return (
-		<div className="flex px-4 text-center items-center pt-4">
-			<p className="w-1/3 ">Name</p>
-			<p className="w-2/5 ">Task</p>
-			<p className="w-1/12 ">Worked on Task</p>
-			<p className="w-1/4 ">Estimate</p>
-			<p className="w-28 ">Action</p>
+		<div className="flex overflow-y-auto px-4 text-center items-center pt-4">
+			<p className="min-w-[8rem]  w-1/3 ">Name</p>
+			<p className="min-w-[8rem] w-2/5 ">Task</p>
+			<p className="min-w-[8rem] w-1/12 ">Worked on Task</p>
+			<p className="min-w-[8rem] w-1/4 ">Estimate</p>
+			<p className="min-w-[8rem] w-28 ">Action</p>
 		</div>
 	);
 }

diff --git a/apps/web/lib/settings/invitation-table.tsx b/apps/web/lib/settings/invitation-table.tsx
@@ -23,33 +23,51 @@ export const InvitationTable = ({ invitations }: { invitations: (IInvitation | I
 				<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
 					<thead className="text-xs text-gray-700 uppercase border-b">
 						<tr>
-							<th scope="col" className="pl-5 py-3 text-sm font-normal capitalize text-[#B1AEBC]">
+							<th
+								scope="col"
+								className="pl-5 min-w-[20rem] py-3 text-sm font-normal capitalize text-[#B1AEBC]"
+							>
 								{t('pages.invite.invitationTable.NAME_AND_EMAIL')}
 							</th>
-							<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
+							<th
+								scope="col"
+								className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
+							>
 								{t('pages.invite.invitationTable.POSITION')}
 							</th>
-							<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
+							<th
+								scope="col"
+								className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
+							>
 								{t('pages.invite.invitationTable.DATE_AND_TIME_REQUEST')}
 							</th>
-							<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
+							<th
+								scope="col"
+								className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
+							>
 								{t('pages.invite.invitationTable.CV_OR_ATTACHMENT')}
 							</th>
-							<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
+							<th
+								scope="col"
+								className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
+							>
 								{t('common.LINK')}
 							</th>
-							<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
+							<th
+								scope="col"
+								className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
+							>
 								{t('common.STATUS')}
 							</th>
-							<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]"></th>
+							<th scope="col" className="text-sm  font-normal capitalize py-3 text-[#B1AEBC]"></th>
 						</tr>
 					</thead>
 					<tbody className="dark:bg-dark--theme-light">
 						{currentItems.map((invitation, index) => (
 							<tr className="bg-white dark:bg-dark--theme-light dark:border-gray-700" key={index}>
 								<th
 									scope="row"
-									className="flex items-center py-4 pl-0 text-gray-900 whitespace-nowrap dark:text-white"
+									className="flex items-center  py-4 pl-0 text-gray-900 whitespace-nowrap dark:text-white"
 								>
 									<div
 										className={clsxm(

diff --git a/apps/web/lib/settings/member-table.tsx b/apps/web/lib/settings/member-table.tsx
@@ -80,37 +80,37 @@ export const MemberTable = ({ members }: { members: OT_Member[] }) => {
 						<tr>
 							<th
 								scope="col"
-								className="pl-0 py-3 text-sm font-normal capitalize text-[#B1AEBC] dark:text-white w-56"
+								className="pl-0 py-3 text-sm font-normal capitalize min-w-[15rem] text-[#B1AEBC] dark:text-white w-56"
 							>
 								{t('common.NAME')}
 							</th>
 							<th
 								scope="col"
-								className="text-sm font-normal capitalize text-[#B1AEBC] dark:text-white w-40"
+								className="text-sm font-normal capitalize min-w-[15rem] text-[#B1AEBC] dark:text-white w-40"
 							>
 								{t('common.POSITION')}
 							</th>
 							<th
 								scope="col"
-								className="text-sm font-normal capitalize text-[#B1AEBC] dark:text-white w-44"
+								className="text-sm font-normal capitalize min-w-[15rem] text-[#B1AEBC] dark:text-white w-44"
 							>
 								{t('common.ROLES')}
 							</th>
 							<th
 								scope="col"
-								className="text-sm font-normal capitalize text-[#B1AEBC] dark:text-white w-48"
+								className="text-sm font-normal capitalize min-w-[15rem] text-[#B1AEBC] dark:text-white w-48"
 							>
 								{t('common.JOIN_OR_LEFT')}
 							</th>
 							<th
 								scope="col"
-								className="text-sm font-normal capitalize text-[#B1AEBC] dark:text-white w-32"
+								className="text-sm font-normal capitalize min-w-[15rem] text-[#B1AEBC] dark:text-white w-32"
 							>
 								{t('common.STATUS')}
 							</th>
 							<th
 								scope="col"
-								className="text-sm font-normal capitalize text-[#B1AEBC] dark:text-white w-6"
+								className="text-sm font-normal capitalize  text-[#B1AEBC] dark:text-white w-6"
 							></th>
 						</tr>
 					</thead>

diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
@@ -148,7 +148,7 @@ function TaskTimerSection({ isTrackingEnabled }: { isTrackingEnabled: boolean })
 			{/* Task inputs */}
 			{/* {showInput && ( */}
 			<AuthUserTaskInput
-				className={clsxm('mx-auto w-full md:w-1/2 2xl:w-full ', !showInput && '!hidden md:!flex')}
+				className={clsxm('mx-auto w-full md:w-1/2 2xl:w-full lg:mr-10', !showInput && '!hidden md:!flex')}
 			/>
 			{/* )}  */}
 

diff --git a/apps/web/pages/settings/personal.tsx b/apps/web/pages/settings/personal.tsx
@@ -43,6 +43,11 @@ const Personal = () => {
 						<div className="flex flex-col w-full sm:flex-row">
 							<LeftSideSettingMenu />
 							<div className="flex flex-col w-full mr-[20px] lg:mr-0">
+								<Link href={'/settings/team'} className="w-full">
+									<button className="w-full lg:hidden hover:bg-white rounded-xl border border-dark text-dark p-4 mt-2">
+										Go to Team settings
+									</button>
+								</Link>
 								<Accordian
 									title={t('pages.settingsPersonal.HEADING_TITLE')}
 									className=" max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"

diff --git a/apps/web/pages/settings/team.tsx b/apps/web/pages/settings/team.tsx
@@ -48,6 +48,11 @@ const Team = () => {
 							<LeftSideSettingMenu />
 							{isTeamMember ? (
 								<div className="flex flex-col w-full sm:mr-[20px] lg:mr-0">
+									<Link href={'/settings/personal'} className="w-full">
+										<button className="w-full lg:hidden hover:bg-white rounded-xl border border-dark text-dark p-4 mt-2">
+											Go to Personnal settings
+										</button>
+									</Link>
 									{/* General Settings */}
 									<Accordian
 										title={t('pages.settingsTeam.HEADING_TITLE')}