msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

[offers][fix] fix profile page mobile compatible style (#489)

Browse Source 
* [offers][fix] fix offer profile page mobile compatibility

* [offers][style] style profile offer card
pull/490/head
Zhang Ziqing 3 years ago committed by GitHub
parent 21c9d9410a
commit 6682d81d2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 201 additions and 182 deletions
Show Stats Download Patch File Download Diff File

2
apps/portal/src/components/offers/profile/OfferCard.tsx
Unescape View File

@ -128,7 +128,7 @@ export default function OfferCard({
); );
} }
return ( return (
<div className="mx-8 my-4 block rounded-lg bg-white py-4 shadow-md"> <div className="mx-8 my-4 block rounded-md border-b border-gray-300 bg-white py-4">
<UpperSection /> <UpperSection />
<BottomSection /> <BottomSection />
</div> </div>

19
apps/portal/src/components/offers/profile/ProfileComments.tsx
Unescape View File

@ -110,8 +110,11 @@ export default function ProfileComments({
); );
} }
return ( return (
<div className="m-4 h-full"> <div className="bh-white h-fit px-4 md:h-[calc(100vh-4.5rem)] md:overflow-y-auto">
<div className="flex-end flex justify-end space-x-4"> <div className="bg-white pt-4 md:sticky md:top-0">
<div className="flex justify-end">
<div className="grid w-fit space-y-2 md:grid-cols-1 lg:grid-cols-2 lg:space-y-0 lg:space-x-4">
<div className="col-span-1 flex justify-end">
{isEditable && ( {isEditable && (
<Tooltip tooltipContent="Copy this link to edit your profile later"> <Tooltip tooltipContent="Copy this link to edit your profile later">
<Button <Button
@ -119,7 +122,7 @@ export default function ProfileComments({
disabled={isDisabled} disabled={isDisabled}
icon={ClipboardDocumentIcon} icon={ClipboardDocumentIcon}
isLabelHidden={false} isLabelHidden={false}
label="Copy profile edit link" label="Copy edit link"
size="sm" size="sm"
variant="secondary" variant="secondary"
onClick={() => { onClick={() => {
@ -137,6 +140,8 @@ export default function ProfileComments({
/> />
</Tooltip> </Tooltip>
)} )}
</div>
<div className="col-span-1 flex justify-end">
<Tooltip tooltipContent="Share this profile with your friends"> <Tooltip tooltipContent="Share this profile with your friends">
<Button <Button
addonPosition="start" addonPosition="start"
@ -161,6 +166,9 @@ export default function ProfileComments({
/> />
</Tooltip> </Tooltip>
</div> </div>
</div>
</div>
<h2 className="mt-2 mb-6 text-2xl font-bold">Discussions</h2> <h2 className="mt-2 mb-6 text-2xl font-bold">Discussions</h2>
{isEditable || session?.user?.name ? ( {isEditable || session?.user?.name ? (
<div> <div>
@ -201,8 +209,8 @@ export default function ProfileComments({
variant="tertiary" variant="tertiary"
/> />
)} )}
<div className="h-full overflow-y-auto"> </div>
<div className="h-content mb-96 w-full"> <div className="h-full w-full">
{replies?.map((reply: Reply) => ( {replies?.map((reply: Reply) => (
<ExpandableCommentCard <ExpandableCommentCard
key={reply.id} key={reply.id}
@ -213,6 +221,5 @@ export default function ProfileComments({
))} ))}
</div> </div>
</div> </div>
</div>
); );
} }

39
apps/portal/src/components/offers/profile/ProfileHeader.tsx
Unescape View File

@ -65,7 +65,7 @@ export default function ProfileHeader({
{ profileId: offerProfileId as string, userId: session?.user?.id }, { profileId: offerProfileId as string, userId: session?.user?.id },
], ],
{ {
onSuccess: (res) => { onSuccess: (res: boolean) => {
setSaved(res); setSaved(res);
}, },
}, },
@ -233,29 +233,25 @@ export default function ProfileHeader({
const { experiences, totalYoe, specificYoes, profileName } = background; const { experiences, totalYoe, specificYoes, profileName } = background;
return ( return (
<div className="h-40 bg-white p-4"> <div className="grid-rows-2 bg-white p-4">
<div className="justify-left flex h-1/2"> <div className="flex grid grid-cols-5 md:grid-cols-7">
<div className="mx-4 mt-2 h-16 w-16"> <div className="jsutify-start col-span-5 flex">
<div className="ml-0 mr-2 mt-2 h-16 w-16 md:mx-4">
<ProfilePhotoHolder /> <ProfilePhotoHolder />
</div> </div>
<div className="w-full"> <div>
<div className="justify-left flex flex-1"> <h2 className="flex text-2xl font-bold">
<h2 className="flex w-4/5 text-2xl font-bold">
{profileName ?? 'anonymous'} {profileName ?? 'anonymous'}
</h2> </h2>
{isEditable && (
<div className="flex h-8 w-1/5 justify-end">
{renderActionList()}
</div>
)}
</div>
{(experiences[0]?.companyName || {(experiences[0]?.companyName ||
experiences[0]?.jobLevel || experiences[0]?.jobLevel ||
experiences[0]?.jobTitle) && ( experiences[0]?.jobTitle) && (
<div className="flex flex-row"> <div className="flex flex-row">
<BuildingOffice2Icon className="mr-2.5 h-5" />
<span className="mr-2 font-bold">Current:</span>
<span> <span>
<BuildingOffice2Icon className="mr-2.5 h-5 w-5" />
</span>
<p>
<span className="mr-2 font-bold">Current:</span>
{`${experiences[0].companyName || ''} ${ {`${experiences[0].companyName || ''} ${
experiences[0].jobLevel || '' experiences[0].jobLevel || ''
} ${experiences[0].jobTitle || ''} ${ } ${experiences[0].jobTitle || ''} ${
@ -263,11 +259,12 @@ export default function ProfileHeader({
? `(${JobTypeLabel[experiences[0].jobType]})` ? `(${JobTypeLabel[experiences[0].jobType]})`
: '' : ''
}`} }`}
</span> </p>
</div> </div>
)} )}
<div className="flex flex-row"> <div className="flex flex-row">
<CalendarDaysIcon className="mr-2.5 h-5" /> <CalendarDaysIcon className="mr-2.5 h-5" />
<p>
<span className="mr-2 font-bold">YOE:</span> <span className="mr-2 font-bold">YOE:</span>
<span className="mr-4">{totalYoe}</span> <span className="mr-4">{totalYoe}</span>
{specificYoes && {specificYoes &&
@ -279,11 +276,17 @@ export default function ProfileHeader({
className="mr-4">{`${domain}: ${yoe}`}</span> className="mr-4">{`${domain}: ${yoe}`}</span>
); );
})} })}
</p>
</div> </div>
</div> </div>
</div> </div>
{isEditable && (
<div className="mt-8"> <div className="col-span-2 col-end-6 flex h-8 justify-end md:col-end-8 md:pt-0">
{renderActionList()}
</div>
)}
</div>
<div className="mt-4">
<Tabs <Tabs
label="Profile Detail Navigation" label="Profile Detail Navigation"
tabs={profileDetailTabs} tabs={profileDetailTabs}

2
apps/portal/src/components/offers/table/OffersRow.tsx
Unescape View File

@ -27,7 +27,7 @@ export default function OfferTableRow({
<td className="py-4 px-6">{formatDate(monthYearReceived)}</td> <td className="py-4 px-6">{formatDate(monthYearReceived)}</td>
<td <td
className={clsx( className={clsx(
'sticky right-0 py-4 px-6 drop-shadow md:drop-shadow-none', 'sticky right-0 bg-white px-6 py-4 drop-shadow lg:drop-shadow-none',
)}> )}>
<Link <Link
className="text-primary-600 dark:text-primary-500 font-medium hover:underline" className="text-primary-600 dark:text-primary-500 font-medium hover:underline"

4
apps/portal/src/components/offers/table/OffersTable.tsx
Unescape View File

@ -76,7 +76,7 @@ export default function OffersTable({
function renderFilters() { function renderFilters() {
return ( return (
<div className="m-4 flex items-center justify-between"> <div className="m-4 flex grid grid-cols-1 items-center justify-between gap-6 sm:grid-cols-4">
<DropdownMenu <DropdownMenu
align="start" align="start"
label={ label={
@ -101,7 +101,7 @@ export default function OffersTable({
/> />
))} ))}
</DropdownMenu> </DropdownMenu>
<div className="divide-x-slate-200 flex items-center space-x-4 divide-x"> <div className="divide-x-slate-200 col-span-3 flex items-center justify-end space-x-4 divide-x">
<div className="justify-left flex items-center space-x-2"> <div className="justify-left flex items-center space-x-2">
<span>View all offers in</span> <span>View all offers in</span>
<CurrencySelector <CurrencySelector

19
apps/portal/src/components/offers/table/OffersTablePagination.tsx
Unescape View File

@ -1,3 +1,4 @@
import { useEffect, useState } from 'react';
import { Pagination } from '@tih/ui'; import { Pagination } from '@tih/ui';
import type { Paging } from '~/types/offers'; import type { Paging } from '~/types/offers';
@ -15,11 +16,14 @@ export default function OffersTablePagination({
startNumber, startNumber,
handlePageChange, handlePageChange,
}: OffersTablePaginationProps) { }: OffersTablePaginationProps) {
const [screenWidth, setScreenWidth] = useState(0);
useEffect(() => {
setScreenWidth(window.innerWidth);
}, []);
return ( return (
<nav <nav aria-label="Table navigation" className="p-4">
aria-label="Table navigation" <div className="flex grid grid-cols-1 items-center md:grid-cols-2">
className="flex items-center justify-between p-4"> <div className="mb-2 text-sm font-normal text-slate-500 md:mb-0">
<span className="text-sm font-normal text-slate-500">
Showing Showing
<span className="font-semibold text-slate-900"> <span className="font-semibold text-slate-900">
{` ${startNumber} - ${endNumber} `} {` ${startNumber} - ${endNumber} `}
@ -28,17 +32,20 @@ export default function OffersTablePagination({
<span className="font-semibold text-slate-900"> <span className="font-semibold text-slate-900">
{pagination.totalItems} {pagination.totalItems}
</span> </span>
</span> </div>
<div className="flex md:justify-end">
<Pagination <Pagination
current={pagination.currentPage + 1} current={pagination.currentPage + 1}
end={pagination.numOfPages} end={pagination.numOfPages}
label="Pagination" label="Pagination"
pagePadding={2} pagePadding={screenWidth > 500 ? 2 : 0}
start={1} start={1}
onSelect={(currPage) => { onSelect={(currPage) => {
handlePageChange(currPage - 1); handlePageChange(currPage - 1);
}} }}
/> />
</div>
</div>
</nav> </nav>
); );
} }

6
apps/portal/src/pages/offers/dashboard.tsx
Unescape View File

@ -3,7 +3,7 @@ import { signIn, useSession } from 'next-auth/react';
import { useState } from 'react'; import { useState } from 'react';
import { Button, Spinner } from '@tih/ui'; import { Button, Spinner } from '@tih/ui';
import DashboardOfferCard from '~/components/offers/dashboard/DashboardProfileCard'; import DashboardProfileCard from '~/components/offers/dashboard/DashboardProfileCard';
import { trpc } from '~/utils/trpc'; import { trpc } from '~/utils/trpc';
@ -69,7 +69,7 @@ export default function ProfilesDashboard() {
</div> </div>
)} )}
{!userProfilesQuery.isLoading && ( {!userProfilesQuery.isLoading && (
<div className="mt-8 overflow-y-auto"> <div className="overflow-y-auto py-8">
<h1 className="mx-auto mb-4 w-3/4 text-start text-4xl font-bold text-slate-900"> <h1 className="mx-auto mb-4 w-3/4 text-start text-4xl font-bold text-slate-900">
Your dashboard Your dashboard
</h1> </h1>
@ -83,7 +83,7 @@ export default function ProfilesDashboard() {
<li <li
key={profile.id} key={profile.id}
className="overflow-hidden bg-white px-4 py-4 shadow sm:rounded-md sm:px-6"> className="overflow-hidden bg-white px-4 py-4 shadow sm:rounded-md sm:px-6">
<DashboardOfferCard key={profile.id} profile={profile} /> <DashboardProfileCard key={profile.id} profile={profile} />
</li> </li>
))} ))}
</ul> </ul>

10
apps/portal/src/pages/offers/profile/[offerProfileId].tsx
Unescape View File

@ -202,8 +202,9 @@ export default function OfferProfile() {
</div> </div>
)} )}
{!getProfileQuery.isLoading && !getProfileQuery.isError && ( {!getProfileQuery.isLoading && !getProfileQuery.isError && (
<div className="mb-4 flex flex h-screen w-screen items-center justify-center divide-x"> <div className="h-fuill flex grid w-full grid-cols-1 items-center justify-center divide-x overflow-y-auto md:grid-cols-3">
<div className="h-full w-2/3 divide-y"> <div className="col-span-1 flex h-full flex-col divide-y md:col-span-2 md:overflow-y-auto">
<div className="h-fit md:sticky md:top-0">
<ProfileHeader <ProfileHeader
background={background} background={background}
handleDelete={handleDelete} handleDelete={handleDelete}
@ -212,7 +213,8 @@ export default function OfferProfile() {
selectedTab={selectedTab} selectedTab={selectedTab}
setSelectedTab={setSelectedTab} setSelectedTab={setSelectedTab}
/> />
<div className="h-4/5 w-full overflow-y-scroll pb-32"> </div>
<div className="pb-4">
<ProfileDetails <ProfileDetails
analysis={analysis} analysis={analysis}
background={background} background={background}
@ -224,7 +226,7 @@ export default function OfferProfile() {
/> />
</div> </div>
</div> </div>
<div className="h-full w-1/3 bg-white"> <div className="col-span-1 h-full bg-white">
<ProfileComments <ProfileComments
isDisabled={deleteMutation.isLoading} isDisabled={deleteMutation.isLoading}
isEditable={isEditable} isEditable={isEditable}

Write Preview
Loading…
Cancel
Save