Skip to content

Commit

Permalink
Merge pull request #1994 from ever-co/feat/responsive
Browse files Browse the repository at this point in the history 
Feat/responsive navbar responsive
  • Loading branch information
@evereq
evereq authored Dec 12, 2023
2 parents aa49461 + ac4154d commit 802c495
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 73 deletions.
30 changes: 18 additions & 12 deletions apps/web/lib/features/task/task-filters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,8 +184,13 @@ export type I_TaskFilter = ReturnType<typeof useTaskFilter>;
type Props = { hook: I_TaskFilter; profile: I_UserProfilePage };
export function TaskFilter({ className, hook, profile }: IClassName & Props) {
return (
<div className="relative z-10">
<div className={clsxm('flex justify-between xs:flex-row flex-col items-center', className)}>
<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',
className
)}
>
<TabsNav hook={hook} />
<InputFilters profile={profile} hook={hook} />
</div>
Expand All @@ -200,7 +205,7 @@ export function TaskFilter({ className, hook, profile }: IClassName & Props) {
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0 ease-out"
// className="pb-3"
className="w-full"
ref={hook.outclickFilterCard.targetEl}
>
{/* {hook.filterType !== undefined && <Divider className="mt-4" />} */}
Expand Down Expand Up @@ -291,22 +296,23 @@ function InputFilters({ hook, profile }: Props) {
/* It's a function that returns a nav element. */
function TabsNav({ hook }: { hook: I_TaskFilter }) {
return (
<nav className="flex mt-4 space-x-1 md:space-x-4 md:mt-0">
<nav className="flex justify-center md:justify-start items-center mt-4 space-x-1 w-full md:space-x-4 md:mt-0">
{hook.tabs.map((item, i) => {
const active = item.tab === hook.tab;

return (
<Tooltip key={i} placement="top-start" label={item.description}>
<Tooltip key={i} placement="top-start" label={item.description} className="">
<button
onClick={() => hook.setTab(item.tab)}
className={clsxm(
'md:text-lg text-xs text-gray-500 font-normal outline-none py-[1.5rem] px-[2.5rem] relative mt-4 md:mt-0 min-w-[10.625rem]',
`md:text-lg text-xs text-gray-500 font-normal outline-none md:py-[1.5rem] px-[2.5rem] relative mt-4 md:mt-0 w-full md:min-w-[10.625rem] flex flex-col md:flex-row gap-1 items-center `,
active && ['text-primary dark:text-white']
)}
>
{item.name}{' '}
<span
className={clsxm(
'bg-gray-lighter p-1 px-2 text-xs rounded-md',
'bg-gray-lighter p-1 px-2 text-xs rounded-md m-1',
active && ['bg-primary dark:bg-[#47484D] text-white']
)}
>
Expand Down Expand Up @@ -342,28 +348,28 @@ function TaskStatusFilter({ hook }: { hook: I_TaskFilter }) {
<TaskStatusDropdown
key={key + 1}
onValueChange={(_, values) => hook.onChangeStatusFilter('status', values || [])}
className="lg:min-w-[170px] mt-4 lg:mt-0"
className="lg:min-w-[170px] mt-4 mb-2 lg:mt-0"
multiple={true}
/>

<TaskPropertiesDropdown
key={key + 2}
onValueChange={(_, values) => hook.onChangeStatusFilter('priority', values || [])}
className="lg:min-w-[170px] mt-4 lg:mt-0"
className="lg:min-w-[170px] mt-4 mb-2 lg:mt-0"
multiple={true}
/>

<TaskSizesDropdown
key={key + 3}
onValueChange={(_, values) => hook.onChangeStatusFilter('size', values || [])}
className="lg:min-w-[170px] mt-4 lg:mt-0"
className="lg:min-w-[170px] mt-4 mb-2 lg:mt-0"
multiple={true}
/>

<TaskLabelsDropdown
key={key + 4}
onValueChange={(_, values) => hook.onChangeStatusFilter('label', values || [])}
className="lg:min-w-[170px] mt-4 lg:mt-0"
className="lg:min-w-[170px] mt-4 mb-2 lg:mt-0"
multiple={true}
/>

Expand Down Expand Up @@ -428,7 +434,7 @@ export function TaskNameFilter({
};

return (
<div className={clsxm('flex flex-row w-1/2 gap-2 mt-3 ml-auto', fullWidth && '!w-full')}>
<div className={clsxm('flex flex-row w-full md:w-1/2 gap-2 mt-3 ml-auto', fullWidth && '!w-full')}>
<InputField
value={tempValue}
autoFocus={true}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/lib/features/timer/timer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export function Timer({ className }: IClassName) {
useHotkeys(HostKeys.START_STOP_TIMER, handleStartSTOPTimer);

return (
<div className={clsxm('flex flex-row mb-12 2xl:mb-0', className)}>
<div className={clsxm('flex flex-row mb-6 md:mb-12 2xl:mb-0', className)}>
<div className="flex items-start justify-between border-r-[2px] dark:border-r-[#28292F] pr-5">
<div className="w-[11rem]">
<Text.Heading
Expand Down
21 changes: 20 additions & 1 deletion apps/web/lib/features/user-nav-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ import stc from 'string-to-color';
import gauzyDark from '../../public/assets/themeImages/gauzyDark.png';
import gauzyLight from '../../public/assets/themeImages/gauzyLight.png';
import { TimerStatus, getTimerStatusValue } from './timer/timer-status';
import Collaborate from '@components/shared/collaborate';
import { TeamsDropDown } from './team/teams-dropdown';
import { KeyboardShortcuts } from 'lib/components/keyboard-shortcuts';
import { useRouter } from 'next/router';

export function UserNavAvatar() {
const { user } = useAuthenticateUser();
Expand Down Expand Up @@ -125,13 +129,20 @@ function UserNavMenu() {
const imageUrl = user?.image?.thumbUrl || user?.image?.fullUrl || user?.imageUrl;
const name = user?.name || user?.firstName || user?.lastName || user?.username;
const { timerStatus } = useTimer();
const { activeTeam } = useOrganizationTeams();
const { activeTeam, isTeamMember } = useOrganizationTeams();
const publicTeam = useRecoilValue(publicState);
const members = activeTeam?.members || [];
const currentMember = members.find((m) => {
return m.employee.userId === user?.id;
});

const router = useRouter();

const isTeamDropdownAllowed = useMemo(() => {
const notAllowedList = ['/task/[id]', '/profile/[memberId]'];
return !notAllowedList.includes(router.route);
}, [router.route]);

const timerStatusValue: ITimerStatusEnum = useMemo(() => {
return getTimerStatusValue(timerStatus, currentMember, publicTeam);
}, [timerStatus, currentMember, publicTeam]);
Expand Down Expand Up @@ -258,6 +269,14 @@ function UserNavMenu() {
</li>
</ul>
<Divider className="mt-4 mb-3" />
<ul className="md:hidden flex flex-col gap-2 justify-start items-center">
{!publicTeam && <Collaborate />}

{isTeamMember && isTeamDropdownAllowed ? <TeamsDropDown publicTeam={publicTeam || false} /> : null}

<KeyboardShortcuts />
<Divider className="mt-1 mb-3 w-full" />
</ul>
<ul className="w-full">
{/* Logout menu */}
<li>
Expand Down
13 changes: 7 additions & 6 deletions apps/web/lib/layout/navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,14 +81,15 @@ export function Navbar({
)}
{showTimer && <MinTimerFrame />}

{!publicTeam && <Collaborate />}
<div className="hidden md:flex gap-4 items-center">
{!publicTeam && <Collaborate />}

{isTeamMember && isTeamDropdownAllowed ? (
<TeamsDropDown publicTeam={publicTeam || false} />
) : null}

<KeyboardShortcuts />
{isTeamMember && isTeamDropdownAllowed ? (
<TeamsDropDown publicTeam={publicTeam || false} />
) : null}

<KeyboardShortcuts />
</div>
{!publicTeam && <UserNavAvatar />}
</div>
)}
Expand Down
95 changes: 45 additions & 50 deletions apps/web/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from 'react';
import { useOrganizationTeams } from '@app/hooks';
import { clsxm } from '@app/utils';
import NoTeam from '@components/pages/main/no-team';
Expand Down Expand Up @@ -47,58 +48,46 @@ function MainPage() {

{/* <Collaborative /> */}
<div className="flex items-end gap-1">
<Tooltip
label={'Cards'}
placement="top-start"
>
<button
className={clsxm(
'rounded-md px-3 py-1 text-sm font-medium',
view === IssuesView.CARDS
? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
: 'text-gray-700 dark:text-gray-300'
)}
onClick={() => setView(IssuesView.CARDS)}
>
<QueueListIcon className="w-5 h-5 inline" />
</button>
<Tooltip label={'Cards'} placement="top-start">
<button
className={clsxm(
'rounded-md px-3 py-1 text-sm font-medium',
view === IssuesView.CARDS
? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
: 'text-gray-700 dark:text-gray-300'
)}
onClick={() => setView(IssuesView.CARDS)}
>
<QueueListIcon className="w-5 h-5 inline" />
</button>
</Tooltip>
<Tooltip
label={'Table'}
placement="top-start"
>
<button
className={clsxm(
'rounded-md px-3 py-1 text-sm font-medium',
view === IssuesView.TABLE
? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
: 'text-gray-700 dark:text-gray-300'
)}
onClick={() => setView(IssuesView.TABLE)}
>
<TableCellsIcon className="w-5 h-5 inline" />
</button>
<Tooltip label={'Table'} placement="top-start">
<button
className={clsxm(
'rounded-md px-3 py-1 text-sm font-medium',
view === IssuesView.TABLE
? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
: 'text-gray-700 dark:text-gray-300'
)}
onClick={() => setView(IssuesView.TABLE)}
>
<TableCellsIcon className="w-5 h-5 inline" />
</button>
</Tooltip>
<Tooltip
label={'Blocks'}
placement="top-start"
>
<button
className={clsxm(
'rounded-md px-3 py-1 text-sm font-medium',
view === IssuesView.BLOCKS
? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
: 'text-gray-700 dark:text-gray-300'
)}
onClick={() => setView(IssuesView.BLOCKS)}
>
<Squares2X2Icon className="w-5 h-5 inline" />
</button>
<Tooltip label={'Blocks'} placement="top-start">
<button
className={clsxm(
'rounded-md px-3 py-1 text-sm font-medium',
view === IssuesView.BLOCKS
? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
: 'text-gray-700 dark:text-gray-300'
)}
onClick={() => setView(IssuesView.BLOCKS)}
>
<Squares2X2Icon className="w-5 h-5 inline" />
</button>
</Tooltip>
<Tooltip
label={'Kanban'}
placement="top-start"
>
<Tooltip label={'Kanban'} placement="top-start">
<button
className={clsxm(
'rounded-md px-3 py-1 text-sm font-medium',
Expand Down Expand Up @@ -147,6 +136,7 @@ function MainPage() {
}

function TaskTimerSection({ isTrackingEnabled }: { isTrackingEnabled: boolean }) {
const [showInput, setShowInput] = React.useState(false);
return (
<Card
shadow="bigger"
Expand All @@ -156,8 +146,13 @@ function TaskTimerSection({ isTrackingEnabled }: { isTrackingEnabled: boolean })
)}
>
{/* Task inputs */}
<AuthUserTaskInput className="w-4/5 md:w-1/2 2xl:w-full " />
{/* {showInput && ( */}
<AuthUserTaskInput className={clsxm('w-4/5 md:w-1/2 2xl:w-full ', !showInput && '!hidden md:!flex')} />
{/* )} */}

<button className="border rounded py-1 px-2 md:hidden" onClick={() => setShowInput((p) => !p)}>
{showInput ? 'hide the issue input' : 'show the issue input'}
</button>
{/* Timer */}
{isTrackingEnabled ? <Timer /> : null}
</Card>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/pages/profile/[memberId].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const Profile = () => {
</div>

{/* User Profile Detail */}
<div className="flex flex-col items-center justify-between py-10 xs:flex-row">
<div className="flex flex-col items-center justify-between py-5 md:py-10 md:flex-row">
<UserProfileDetail member={profile.member} />

{profileIsAuthUser && isTrackingEnabled && (
Expand Down Expand Up @@ -86,7 +86,7 @@ function UserProfileDetail({ member }: { member?: OT_Member }) {
<div className="flex items-center mb-4 space-x-4 md:mb-0">
<div
className={clsx(
`w-[100px] h-[100px]`, // removed the size variable from width and height, as passing variables is not supported by tailwind
` w-[100px] h-[100px]`, // removed the size variable from width and height, as passing variables is not supported by tailwind
'flex justify-center items-center relative',
'rounded-full text-white',
'shadow-md text-7xl dark:text-6xl font-thin font-PlusJakartaSans ',
Expand Down Expand Up @@ -123,7 +123,7 @@ function UserProfileDetail({ member }: { member?: OT_Member }) {
</div>

<div className="flex flex-col gap-3.5">
<Text.Heading as="h3" className="text-4xl">
<Text.Heading as="h3" className="text-2xl md:text-4xl">
{user?.firstName} {user?.lastName}
</Text.Heading>
<Text className="text-lg text-gray-500">{user?.email}</Text>
Expand Down

0 comments on commit 802c495

Please sign in to comment.