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

[resumes][refactor] make height calculation more robust

Browse Source
pull/509/head
Yangshun Tay 2 years ago
parent 762b55db4f
commit ec1487b33b
6 changed files with 87 additions and 78 deletions
Show Stats Download Patch File Download Diff File

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

@ -35,10 +35,12 @@ export default function ResumePdf({ url }: Props) {
}, [pageWidth]); }, [pageWidth]);
return ( return (
<div className="w-full" id="pdfView"> <div
<div className="group relative bg-slate-100"> className="w-full flex-col overflow-y-auto lg:flex lg:h-full"
id="pdfView">
<div className="group relative grow bg-slate-100 lg:h-0">
<Document <Document
className="flex h-[calc(100vh-16rem)] flex-row justify-center overflow-auto py-8" className="flex flex-row justify-center overflow-auto py-8 lg:h-full"
file={url} file={url}
loading={<Spinner display="block" size="lg" />} loading={<Spinner display="block" size="lg" />}
noData="" noData=""

4
apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
Unescape View File

@ -92,7 +92,7 @@ export default function ResumeCommentListItem({
<> <>
<span className="font-medium text-slate-500">&middot;</span>{' '} <span className="font-medium text-slate-500">&middot;</span>{' '}
<button <button
className="px-1 text-xs font-medium text-slate-500 hover:text-slate-600" className="text-xs font-medium text-slate-500 hover:text-slate-600"
type="button" type="button"
onClick={() => setIsEditingComment(true)}> onClick={() => setIsEditingComment(true)}>
Edit Edit
@ -103,7 +103,7 @@ export default function ResumeCommentListItem({
<> <>
<span className="font-medium text-slate-500">&middot;</span>{' '} <span className="font-medium text-slate-500">&middot;</span>{' '}
<button <button
className="px-1 text-xs font-medium text-slate-500 hover:text-slate-600" className="text-xs font-medium text-slate-500 hover:text-slate-600"
type="button" type="button"
onClick={() => setIsReplyingComment(true)}> onClick={() => setIsReplyingComment(true)}>
Reply Reply

2
apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
Unescape View File

@ -115,7 +115,7 @@ export default function ResumeCommentsForm({
}; };
return ( return (
<div className="overflow-y-auto py-8 px-4 lg:h-[calc(100vh-13rem)]"> <div className="overflow-y-auto py-8 px-4">
<h2 className="text-xl font-medium text-slate-800"> <h2 className="text-xl font-medium text-slate-800">
Contribute a review Contribute a review
</h2> </h2>

2
apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
Unescape View File

@ -55,7 +55,7 @@ export default function ResumeCommentsList({
} }
return ( return (
<div className="flow-root w-full space-y-4 overflow-y-auto overflow-x-hidden px-4 lg:h-[calc(100vh-12rem)] lg:py-8"> <div className="flow-root w-full space-y-4 overflow-y-auto overflow-x-hidden px-4 lg:py-8">
{RESUME_COMMENTS_SECTIONS.map(({ label, value }) => { {RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
const comments = commentsQuery.data const comments = commentsQuery.data
? commentsQuery.data.filter((comment: ResumeComment) => { ? commentsQuery.data.filter((comment: ResumeComment) => {

9
apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
Unescape View File

@ -25,7 +25,7 @@ export default function ResumeExpandableText({
}; };
return ( return (
<div> <div className="space-y-1">
<span <span
ref={ref} ref={ref}
className={clsx( className={clsx(
@ -35,11 +35,12 @@ export default function ResumeExpandableText({
{text} {text}
</span> </span>
{descriptionOverflow && ( {descriptionOverflow && (
<p <button
className="text-primary-500 hover:text-primary-300 mt-1 cursor-pointer text-xs sm:text-sm" className="text-primary-500 hover:text-primary-600 text-xs font-medium"
type="button"
onClick={onSeeActionClicked}> onClick={onSeeActionClicked}>
{isExpanded ? 'See Less' : 'See More'} {isExpanded ? 'See Less' : 'See More'}
</p> </button>
)} )}
</div> </div>
); );

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

@ -235,80 +235,86 @@ export default function ResumeReviewPage() {
<Head> <Head>
<title>{`${detailsQuery.data.title} | Resume Review`}</title> <title>{`${detailsQuery.data.title} | Resume Review`}</title>
</Head> </Head>
<main className="h-full w-full bg-white"> <main className="flex h-[calc(100vh-4rem)] w-full flex-col bg-white">
<div className="mx-auto space-y-4 border-b border-slate-200 px-4 py-6 sm:px-6 lg:space-y-2 lg:px-8"> <div className="mx-auto w-full space-y-4 border-b border-slate-200 px-4 py-6 sm:px-6 lg:px-8">
<div className="flex flex-wrap justify-between space-y-4 lg:space-y-0"> <div className="justify-between gap-4 space-y-4 lg:flex lg:space-y-0">
<h1 className="pr-2 text-xl font-medium leading-7 text-slate-900 sm:text-2xl lg:w-[60%]"> <h1 className="pr-2 text-xl font-medium leading-7 text-slate-900">
{detailsQuery.data.title} {detailsQuery.data.title}
</h1> </h1>
<div className="flex gap-3"> <div className="flex gap-3">
{userIsOwner && ( {userIsOwner && (
<> <>
<Button <div>
addonPosition="start" <Button
icon={PencilSquareIcon} addonPosition="start"
label="Edit" icon={PencilSquareIcon}
variant="tertiary" label="Edit"
onClick={onEditButtonClick} variant="tertiary"
/> onClick={onEditButtonClick}
<button />
className="isolate inline-flex items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white" </div>
disabled={resolveMutation.isLoading} <div>
type="button" <button
onClick={onResolveButtonClick}> className="isolate inline-flex items-center space-x-4 whitespace-nowrap rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white"
<div className="-ml-1 mr-2 h-5 w-5"> disabled={resolveMutation.isLoading}
{resolveMutation.isLoading ? ( type="button"
<Spinner className="mt-0.5" size="xs" /> onClick={onResolveButtonClick}>
) : ( <div className="-ml-1 mr-2 h-5 w-5">
<CheckCircleIcon {resolveMutation.isLoading ? (
aria-hidden="true" <Spinner className="mt-0.5" size="xs" />
className={ ) : (
isResumeResolved <CheckCircleIcon
? 'text-slate-500' aria-hidden="true"
: 'text-success-600' className={
} isResumeResolved
/> ? 'text-slate-500'
)} : 'text-success-600'
</div> }
{isResumeResolved />
? 'Reopen for review' )}
: 'Mark as reviewed'} </div>
</button> {isResumeResolved
? 'Reopen for review'
: 'Mark as reviewed'}
</button>
</div>
</> </>
)} )}
<button <div>
className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white" <button
disabled={ className="isolate inline-flex items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white"
starMutation.isLoading || unstarMutation.isLoading disabled={
} starMutation.isLoading || unstarMutation.isLoading
type="button" }
onClick={onStarButtonClick}> type="button"
<div className="-ml-1 mr-2 h-5 w-5"> onClick={onStarButtonClick}>
{starMutation.isLoading || <div className="-ml-1 mr-2 h-5 w-5">
unstarMutation.isLoading || {starMutation.isLoading ||
detailsQuery.isLoading ? ( unstarMutation.isLoading ||
<Spinner className="mt-0.5" size="xs" /> detailsQuery.isLoading ? (
) : ( <Spinner className="mt-0.5" size="xs" />
<StarIcon ) : (
aria-hidden="true" <StarIcon
className={clsx( aria-hidden="true"
detailsQuery.data?.stars.length className={clsx(
? 'text-orange-400' detailsQuery.data?.stars.length
: 'text-slate-400', ? 'text-orange-400'
)} : 'text-slate-400',
/> )}
)} />
</div> )}
{detailsQuery.data?.stars.length ? 'Starred' : 'Star'} </div>
<span className="relative -ml-px inline-flex"> {detailsQuery.data?.stars.length ? 'Starred' : 'Star'}
{detailsQuery.data?._count.stars} <span className="relative -ml-px inline-flex">
</span> {detailsQuery.data?._count.stars}
</button> </span>
</button>
</div>
<div className="hidden xl:block">{renderReviewButton()}</div> <div className="hidden xl:block">{renderReviewButton()}</div>
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<div className="grid grid-cols-2 gap-2 md:flex md:flex-wrap md:space-x-8"> <div className="grid grid-cols-2 gap-2 lg:flex lg:flex-wrap lg:space-x-8">
<div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm"> <div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm">
<BriefcaseIcon <BriefcaseIcon
aria-hidden="true" aria-hidden="true"
@ -380,7 +386,7 @@ export default function ResumeReviewPage() {
</div> </div>
</div> </div>
{detailsQuery.data.additionalInfo && ( {detailsQuery.data.additionalInfo && (
<div className="col-span-2 flex items-start whitespace-pre-wrap pt-2 text-slate-600 xl:pt-1"> <div className="col-span-2 flex items-start whitespace-pre-wrap text-slate-600 xl:pt-1">
<InformationCircleIcon <InformationCircleIcon
aria-hidden="true" aria-hidden="true"
className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400" className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
@ -393,11 +399,11 @@ export default function ResumeReviewPage() {
)} )}
</div> </div>
</div> </div>
<div className="flex w-full flex-col divide-x divide-slate-200 lg:flex-row xl:py-0"> <div className="flex w-full shrink-0 grow flex-col divide-x divide-slate-200 overflow-hidden lg:h-0 lg:flex-row xl:py-0">
<div className="w-full bg-slate-100 lg:w-1/2"> <div className="w-full bg-slate-100 lg:h-full lg:w-1/2">
<ResumePdf url={detailsQuery.data.url} /> <ResumePdf url={detailsQuery.data.url} />
</div> </div>
<div className="grow border-t border-slate-200 bg-slate-50 pb-4 lg:border-none lg:pb-0"> <div className="grow overflow-y-auto border-t border-slate-200 bg-slate-50 pb-4 lg:h-full lg:border-t-0 lg:pb-0">
<div className="divide-y divide-slate-200 lg:hidden"> <div className="divide-y divide-slate-200 lg:hidden">
<div className="bg-white p-4 lg:p-0"> <div className="bg-white p-4 lg:p-0">
{renderReviewButton()} {renderReviewButton()}

Write Preview
Loading…
Cancel
Save