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

[resumes][feat] mobile responsive resume rows on browse

Browse Source
pull/434/head
peirong.wu 3 years ago
parent 75c07e92aa
commit 7189916481
4 changed files with 77 additions and 78 deletions
Show Stats Download Patch File Download Diff File

82
apps/portal/src/components/resumes/browse/ResumeListItem.tsx
Unescape View File

@ -19,51 +19,53 @@ type Props = Readonly<{
export default function ResumeListItem({ href, resumeInfo }: Props) { export default function ResumeListItem({ href, resumeInfo }: Props) {
return ( return (
<Link href={href}> <Link href={href}>
<div className="grid grid-cols-8 gap-4 border-b border-slate-200 p-4 hover:bg-slate-100"> <div className="grid grid-cols-8">
<div className="col-span-4"> <div className="col-span-7 grid gap-4 border-b border-slate-200 p-4 hover:bg-slate-100 sm:grid-cols-7">
{resumeInfo.title} <div className="sm:col-span-4">
<div className="text-primary-500 mt-2 flex items-center justify-start text-xs"> {resumeInfo.title}
<div className="flex"> <div className="text-primary-500 mt-2 flex items-center justify-start text-xs">
<BriefcaseIcon <div className="flex">
aria-hidden="true" <BriefcaseIcon
className="mr-1.5 h-4 w-4 flex-shrink-0" aria-hidden="true"
/> className="mr-1.5 h-4 w-4 flex-shrink-0"
{resumeInfo.role} />
{resumeInfo.role}
</div>
<div className="ml-4 flex">
<AcademicCapIcon
aria-hidden="true"
className="mr-1.5 h-4 w-4 flex-shrink-0"
/>
{resumeInfo.experience}
</div>
</div> </div>
<div className="ml-4 flex"> <div className="mt-4 flex justify-start text-xs text-slate-500">
<AcademicCapIcon <div className="flex gap-2 pr-4">
aria-hidden="true" <ChatBubbleLeftIcon className="w-4" />
className="mr-1.5 h-4 w-4 flex-shrink-0" {`${resumeInfo.numComments} comment${
/> resumeInfo.numComments === 1 ? '' : 's'
{resumeInfo.experience} }`}
</div>
<div className="flex gap-2">
{resumeInfo.isStarredByUser ? (
<ColouredStarIcon className="w-4 text-yellow-400" />
) : (
<StarIcon className="w-4" />
)}
{`${resumeInfo.numStars} star${
resumeInfo.numStars === 1 ? '' : 's'
}`}
</div>
</div> </div>
</div> </div>
<div className="mt-4 flex justify-start text-xs text-slate-500"> <div className="self-center text-sm text-slate-500 sm:col-span-3">
<div className="flex gap-2 pr-4"> <div>
<ChatBubbleLeftIcon className="w-4" /> {`Uploaded ${formatDistanceToNow(resumeInfo.createdAt, {
{`${resumeInfo.numComments} comment${ addSuffix: true,
resumeInfo.numComments === 1 ? '' : 's' })} by ${resumeInfo.user}`}
}`}
</div> </div>
<div className="flex gap-2"> <div className="mt-2 text-slate-400">{resumeInfo.location}</div>
{resumeInfo.isStarredByUser ? (
<ColouredStarIcon className="w-4 text-yellow-400" />
) : (
<StarIcon className="w-4" />
)}
{`${resumeInfo.numStars} star${
resumeInfo.numStars === 1 ? '' : 's'
}`}
</div>
</div>
</div>
<div className="col-span-3 self-center text-sm text-slate-500">
<div>
{`Uploaded ${formatDistanceToNow(resumeInfo.createdAt, {
addSuffix: true,
})} by ${resumeInfo.user}`}
</div> </div>
<div className="mt-2 text-slate-400">{resumeInfo.location}</div>
</div> </div>
<ChevronRightIcon className="col-span-1 w-8 self-center justify-self-center text-slate-400" /> <ChevronRightIcon className="col-span-1 w-8 self-center justify-self-center text-slate-400" />
</div> </div>

2
apps/portal/src/pages/resumes/[resumeId].tsx
Unescape View File

@ -213,7 +213,7 @@ export default function ResumeReviewPage() {
<Head> <Head>
<title>{detailsQuery.data.title}</title> <title>{detailsQuery.data.title}</title>
</Head> </Head>
<main className="h-[calc(100vh-2rem)] flex-1 space-y-2 overflow-y-auto py-4 px-8 xl:px-12 2xl:pr-16"> <main className="h-full flex-1 space-y-2 overflow-y-auto py-4 px-8 xl:px-12 2xl:pr-16">
<div className="flex justify-between"> <div className="flex justify-between">
<h1 className="pr-2 text-2xl font-semibold leading-7 text-slate-900 sm:truncate sm:text-3xl sm:tracking-tight"> <h1 className="pr-2 text-2xl font-semibold leading-7 text-slate-900 sm:truncate sm:text-3xl sm:tracking-tight">
{detailsQuery.data.title} {detailsQuery.data.title}

69
apps/portal/src/pages/resumes/browse.tsx
Unescape View File

@ -10,7 +10,6 @@ import {
XMarkIcon, XMarkIcon,
} from '@heroicons/react/24/outline'; } from '@heroicons/react/24/outline';
import { import {
Button,
CheckboxInput, CheckboxInput,
CheckboxList, CheckboxList,
DropdownMenu, DropdownMenu,
@ -432,7 +431,7 @@ export default function ResumeHomePage() {
</Transition.Root> </Transition.Root>
</div> </div>
<main className="h-[calc(100vh-4rem)] flex-auto px-8 pb-4"> <main className="h-full flex-auto px-8 pb-4">
<div className="flex justify-start"> <div className="flex justify-start">
<div className="fixed top-0 bottom-0 mt-24 hidden w-64 overflow-auto lg:block"> <div className="fixed top-0 bottom-0 mt-24 hidden w-64 overflow-auto lg:block">
<h3 className="text-md font-medium tracking-tight text-gray-900"> <h3 className="text-md font-medium tracking-tight text-gray-900">
@ -518,7 +517,7 @@ export default function ResumeHomePage() {
</div> </div>
</div> </div>
<div className="relative lg:left-64 lg:w-[calc(100%-16rem)]"> <div className="relative lg:left-64 lg:w-[calc(100%-16rem)]">
<div className="lg:border-grey-200 sticky top-0 z-0 flex flex-wrap items-center justify-between pt-6 pb-2 lg:border-b"> <div className="lg:border-grey-200 sticky top-0 z-10 flex flex-wrap items-center justify-between pt-6 pb-2 lg:border-b">
<div className="border-grey-200 mb-4 flex w-full justify-between border-b pb-2 lg:mb-0 lg:w-auto lg:border-none lg:pb-0"> <div className="border-grey-200 mb-4 flex w-full justify-between border-b pb-2 lg:mb-0 lg:w-auto lg:border-none lg:pb-0">
<div> <div>
<Tabs <Tabs
@ -541,12 +540,6 @@ export default function ResumeHomePage() {
onChange={onTabChange} onChange={onTabChange}
/> />
</div> </div>
<Button
className="whitespace-pre-wrap px-2 lg:hidden"
label="Submit Resume"
variant="primary"
onClick={onSubmitResume}
/>
</div> </div>
<div className="flex flex-wrap items-center justify-start gap-6"> <div className="flex flex-wrap items-center justify-start gap-6">
<div className="w-64"> <div className="w-64">
@ -561,33 +554,37 @@ export default function ResumeHomePage() {
onChange={setSearchValue} onChange={setSearchValue}
/> />
</div> </div>
<Button <div>
className="lg:hidden" <DropdownMenu
icon={FunnelIcon} align="end"
isLabelHidden={true} label={
label="Filters" SORT_OPTIONS.find(({ value }) => value === sortOrder)
variant="tertiary" ?.label
onClick={() => setMobileFiltersOpen(true)} }>
/> {SORT_OPTIONS.map(({ label, value }) => (
<DropdownMenu <DropdownMenu.Item
align="end" key={value}
label={ isSelected={sortOrder === value}
SORT_OPTIONS.find(({ value }) => value === sortOrder)?.label label={label}
}> onClick={() => setSortOrder(value)}></DropdownMenu.Item>
{SORT_OPTIONS.map(({ label, value }) => ( ))}
<DropdownMenu.Item </DropdownMenu>
key={value} </div>
isSelected={sortOrder === value} <button
label={label} className="-m-2 text-slate-400 hover:text-slate-500 lg:hidden"
onClick={() => setSortOrder(value)}></DropdownMenu.Item> type="button"
))} onClick={() => setMobileFiltersOpen(true)}>
</DropdownMenu> <span className="sr-only">Filters</span>
<Button <FunnelIcon aria-hidden="true" className="h-6 w-6" />
className="hidden lg:block" </button>
label="Submit Resume" <div>
variant="primary" <button
onClick={onSubmitResume} className="bg-primary-500 block w-36 rounded-md py-2 px-3 text-sm font-medium text-white"
/> type="button"
onClick={onSubmitResume}>
Submit Resume
</button>
</div>
</div> </div>
</div> </div>
{isFetchingResumes ? ( {isFetchingResumes ? (

2
apps/portal/src/pages/resumes/index.tsx
Unescape View File

@ -11,7 +11,7 @@ export default function Home() {
<title>Resume Review</title> <title>Resume Review</title>
</Head> </Head>
<main className="h-[calc(100vh-2rem)] w-full overflow-y-auto"> <main className="h-full w-full overflow-y-auto">
<Hero /> <Hero />
<PrimaryFeatures /> <PrimaryFeatures />
<CallToAction /> <CallToAction />

Write Preview
Loading…
Cancel
Save