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

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

@ -19,8 +19,9 @@ 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">
<div className="sm:col-span-4">
{resumeInfo.title} {resumeInfo.title}
<div className="text-primary-500 mt-2 flex items-center justify-start text-xs"> <div className="text-primary-500 mt-2 flex items-center justify-start text-xs">
<div className="flex"> <div className="flex">
@ -57,7 +58,7 @@ export default function ResumeListItem({ href, resumeInfo }: Props) {
</div> </div>
</div> </div>
</div> </div>
<div className="col-span-3 self-center text-sm text-slate-500"> <div className="self-center text-sm text-slate-500 sm:col-span-3">
<div> <div>
{`Uploaded ${formatDistanceToNow(resumeInfo.createdAt, { {`Uploaded ${formatDistanceToNow(resumeInfo.createdAt, {
addSuffix: true, addSuffix: true,
@ -65,6 +66,7 @@ export default function ResumeListItem({ href, resumeInfo }: Props) {
</div> </div>
<div className="mt-2 text-slate-400">{resumeInfo.location}</div> <div className="mt-2 text-slate-400">{resumeInfo.location}</div>
</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>
</Link> </Link>

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}

45
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,18 +554,12 @@ export default function ResumeHomePage() {
onChange={setSearchValue} onChange={setSearchValue}
/> />
</div> </div>
<Button <div>
className="lg:hidden"
icon={FunnelIcon}
isLabelHidden={true}
label="Filters"
variant="tertiary"
onClick={() => setMobileFiltersOpen(true)}
/>
<DropdownMenu <DropdownMenu
align="end" align="end"
label={ label={
SORT_OPTIONS.find(({ value }) => value === sortOrder)?.label SORT_OPTIONS.find(({ value }) => value === sortOrder)
?.label
}> }>
{SORT_OPTIONS.map(({ label, value }) => ( {SORT_OPTIONS.map(({ label, value }) => (
<DropdownMenu.Item <DropdownMenu.Item
@ -582,12 +569,22 @@ export default function ResumeHomePage() {
onClick={() => setSortOrder(value)}></DropdownMenu.Item> onClick={() => setSortOrder(value)}></DropdownMenu.Item>
))} ))}
</DropdownMenu> </DropdownMenu>
<Button </div>
className="hidden lg:block" <button
label="Submit Resume" className="-m-2 text-slate-400 hover:text-slate-500 lg:hidden"
variant="primary" type="button"
onClick={onSubmitResume} onClick={() => setMobileFiltersOpen(true)}>
/> <span className="sr-only">Filters</span>
<FunnelIcon aria-hidden="true" className="h-6 w-6" />
</button>
<div>
<button
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