Merge pull request #2003 from ever-co/feat/profileResponsive

Feat/profile responsive on phone and tablet
ever-co · Dec 13, 2023 · 5aaf5f8 · 5aaf5f8
2 parents bc0e49a + e68e0e2
commit 5aaf5f8
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 46 deletions.
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
@@ -106,7 +106,7 @@ export function TaskCard(props: Props) {
 			<Card
 				shadow="bigger"
 				className={clsxm(
-					'md:flex items-center justify-between py-3 px-4 md:px-4 hidden min-h-[7rem] dark:bg-[#101217] border-[0.125rem] dark:border-[#FFFFFF0D] relative',
+					'lg:flex items-center justify-between py-3 px-4 md:px-4 hidden min-h-[7rem] dark:bg-[#101217] border-[0.125rem] dark:border-[#FFFFFF0D] relative',
 					active && ['border-primary-light dark:bg-[#1E2025]'],
 					'gap-5',
 					className
@@ -189,7 +189,7 @@ export function TaskCard(props: Props) {
 			<Card
 				shadow="bigger"
 				className={clsxm(
-					'relative md:hidden flex justify-between py-3 flex-col',
+					'relative lg:hidden flex justify-between py-3 flex-col',
 					active && ['border-primary-light border-[2px]'],
 					className
 				)}
@@ -221,7 +221,7 @@ export function TaskCard(props: Props) {
 						<UsersTaskAssigned className="px-3 w-52" task={task} />
 					</>
 				)}
-				<div className="flex justify-between mt-8 mb-8 space-x-5">
+				<div className="flex justify-between items-center mt-4 mb-4 space-x-5">
 					<div className="flex space-x-4">
 						{todayWork}
 						{isTrackingEnabled && isAuthUser && task && (
@@ -230,11 +230,11 @@ export function TaskCard(props: Props) {
 					</div>
 
 					<ActiveTaskStatusDropdown task={task || null} onChangeLoading={(load) => setLoading(load)} />
-				</div>
 
-				{task && memberInfo && currentMember && (
-					<TaskCardMenu task={task} loading={loading} memberInfo={memberInfo} viewType={viewType} />
-				)}
+					{task && memberInfo && currentMember && (
+						<TaskCardMenu task={task} loading={loading} memberInfo={memberInfo} viewType={viewType} />
+					)}
+				</div>
 			</Card>
 		</>
 	);

diff --git a/apps/web/lib/features/task/task-filters.tsx b/apps/web/lib/features/task/task-filters.tsx
@@ -187,7 +187,7 @@ export function TaskFilter({ className, hook, profile }: IClassName & Props) {
 		<div className="relative w-full z-10">
 			<div
 				className={clsxm(
-					'flex justify-between flex-col xs:flex-row  items-center w-full flex-wrap-reverse md:flex-nowrap',
+					'flex justify-between flex-col xs:flex-row  items-center w-full flex-wrap-reverse lg:flex-nowrap',
 					className
 				)}
 			>

diff --git a/apps/web/lib/features/task/task-times.tsx b/apps/web/lib/features/task/task-times.tsx
@@ -89,7 +89,7 @@ function TimeInfo({
 					}m`}
 				>
 					<div className="flex items-center space-x-2 text-base font-normal">
-						<span className="text-[#7B8089] text-center">{t('common.TODAY')}:</span>
+						<span className="text-[#7B8089] text-center capitalize">{t('common.TODAY')}</span>
 						<Text>
 							{daily.h}h : {daily.m}m
 						</Text>
@@ -110,7 +110,7 @@ function TimeInfo({
 							// showDaily && ['text-sm']
 						)}
 					>
-						<span className="text-[#7B8089] text-center">{t('common.TOTAL')}:</span>
+						<span className="text-[#7B8089] text-center capitalize">{t('common.TOTAL')}</span>
 						<Text>
 							{total.h}h : {total.m}m
 						</Text>
@@ -147,8 +147,8 @@ function TimeBlockInfo({
 					}m`}
 				>
 					<div className=" text-base font-normal flex flex-col items-center ">
-						<span className="text-[#7B8089] text-center text-xs">
-							{t('common.WORKED_ON_TASK')} {t('common.TODAY')}:
+						<span className="text-[#7B8089] text-center text-xs capitalize">
+							{t('common.WORKED_ON_TASK')} {t('common.TODAY')}
 						</span>
 						<Text className="text-lg font-semibold">
 							{daily.h}h : {daily.m}m
@@ -170,8 +170,8 @@ function TimeBlockInfo({
 							// showDaily && ['text-sm']
 						)}
 					>
-						<span className="text-[#7B8089] text-center text-xs">
-							{t('common.WORKED_ON_TASK')} {t('common.TOTAL')}:
+						<span className="text-[#7B8089] text-center text-xs capitalize">
+							{t('common.WORKED_ON_TASK')} {t('common.TOTAL')}
 						</span>
 						<Text className="text-lg font-semibold">
 							{total.h}h : {total.m}m

diff --git a/apps/web/lib/features/team/user-team-block/index.tsx b/apps/web/lib/features/team/user-team-block/index.tsx
@@ -44,27 +44,22 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }:
 		return getTimerStatusValue(timerStatus, member, publicTeam);
 	}, [timerStatus, member, publicTeam]);
 
-	let totalWork = <></>;
-	if (memberInfo.isAuthUser) {
-		const { h, m } = secondsToTime(
-			((member?.totalTodayTasks &&
-				member?.totalTodayTasks.reduce(
-					(previousValue, currentValue) => previousValue + currentValue.duration,
-					0
-				)) ||
-				activeTaskTotalStat?.duration ||
-				0) + addSeconds
-		);
-
-		totalWork = (
-			<div className={clsxm('flex space-x-2 items-center justify-center  font-normal flex-col mr-4')}>
-				<span className="text-xs text-gray-500 text-center	">{t('common.TOTAL_WORKED_TODAY')}:</span>
-				<Text className="text-sm">
-					{h}h : {m}m
-				</Text>
-			</div>
-		);
-	}
+	const { h, m } = secondsToTime(
+		((member?.totalTodayTasks &&
+			member?.totalTodayTasks.reduce(
+				(previousValue, currentValue) => previousValue + currentValue.duration,
+				0
+			)) ||
+			activeTaskTotalStat?.duration ||
+			0) + addSeconds
+	);
+
+	const totalWork = (
+		<div className={clsxm('flex space-x-2 items-center justify-center  font-normal flex-col mr-4')}>
+			<span className="text-xs text-gray-500 text-center	capitalize">{t('common.TOTAL_WORKED_TODAY')}</span>
+			<Text className="text-sm">{memberInfo.isAuthUser ? `${h}h : ${m}m` : `0h : 0m`}</Text>
+		</div>
+	);
 
 	const menu = (
 		<>
@@ -105,12 +100,14 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }:
 				<HorizontalSeparator />
 
 				{/* Task information */}
-				<TaskBlockInfo
-					edition={taskEdition}
-					memberInfo={memberInfo}
-					className=" w-full px-1 py-2 overflow-hidden"
-					publicTeam={publicTeam}
-				/>
+
+					<TaskBlockInfo
+						edition={taskEdition}
+						memberInfo={memberInfo}
+						className=" w-full px-1 py-2 overflow-hidden"
+						publicTeam={publicTeam}
+					/>
+
 
 				<HorizontalSeparator />
 

diff --git a/apps/web/lib/features/team/user-team-block/task-info.tsx b/apps/web/lib/features/team/user-team-block/task-info.tsx
@@ -36,11 +36,15 @@ export function TaskBlockInfo({ className, memberInfo, edition, publicTeam }: Pr
 				{edition.task && (
 					<TaskDetailAndEdition memberInfo={memberInfo} edition={edition} publicTeam={publicTeam} />
 				)}
-				{!edition.task && <div className="text-center">--</div>}
+				{!edition.task && (
+					<div className="text-center">
+						<p>There is no task assigned </p>
+					</div>
+				)}
 			</div>
 
 			{edition.task && <TaskAllStatusTypes showStatus={true} task={edition.task} toBlockCard={true} />}
-			{!edition.task && <div className="text-center self-center">--</div>}
+			{!edition.task && <div className="text-center self-center text-white dark:text-dark">_</div>}
 		</div>
 	);
 }

diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
@@ -40,14 +40,14 @@ function MainPage() {
 	return (
 		<MainLayout>
 			<MainHeader className="pb-1">
-				<div className="flex items-start justify-between h-5">
-					<div className="flex items-center gap-8">
+				<div className="flex flex-col md:flex-row items-start justify-between h-12 md:h-5">
+					<div className="flex  items-center gap-8">
 						<PeopleIcon className="stroke-dark dark:stroke-[#6b7280] h-6 w-6" />
 						<Breadcrumb paths={breadcrumb} className="text-sm" />
 					</div>
 
 					{/* <Collaborative /> */}
-					<div className="flex items-end gap-1">
+					<div className="flex w-full md:w-max items-center justify-center py-4 md:py-0 md:items-end gap-1">
 						<Tooltip label={'Cards'} placement="top-start">
 							<button
 								className={clsxm(