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

3 years ago · 7189916481
parent 75c07e92aa
commit 7189916481
4 changed files with 77 additions and 78 deletions
--- a/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
+++ b/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
@ -19,8 +19,9 @@ type Props = Readonly<{
 export default function ResumeListItem({ href, resumeInfo }: Props) {
  return (
    <Link href={href}>
-      <div className="grid grid-cols-8 gap-4 border-b border-slate-200 p-4 hover:bg-slate-100">
-        <div className="col-span-4">
+      <div className="grid grid-cols-8">
+        <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}
            <div className="text-primary-500 mt-2 flex items-center justify-start text-xs">
              <div className="flex">
@ -57,7 +58,7 @@ export default function ResumeListItem({ href, resumeInfo }: Props) {
              </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>
              {`Uploaded ${formatDistanceToNow(resumeInfo.createdAt, {
                addSuffix: true,
@ -65,6 +66,7 @@ export default function ResumeListItem({ href, resumeInfo }: Props) {
            </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" />
      </div>
    </Link>
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/apps/portal/src/pages/resumes/[resumeId].tsx
@ -213,7 +213,7 @@ export default function ResumeReviewPage() {
          <Head>
            <title>{detailsQuery.data.title}</title>
          </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">
              <h1 className="pr-2 text-2xl font-semibold leading-7 text-slate-900 sm:truncate sm:text-3xl sm:tracking-tight">
                {detailsQuery.data.title}
--- a/apps/portal/src/pages/resumes/browse.tsx
+++ b/apps/portal/src/pages/resumes/browse.tsx
@ -10,7 +10,6 @@ import {
  XMarkIcon,
 } from '@heroicons/react/24/outline';
 import {
-  Button,
  CheckboxInput,
  CheckboxList,
  DropdownMenu,
@ -432,7 +431,7 @@ export default function ResumeHomePage() {
        </Transition.Root>
      </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="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">
@ -518,7 +517,7 @@ export default function ResumeHomePage() {
            </div>
          </div>
          <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>
                  <Tabs
@ -541,12 +540,6 @@ export default function ResumeHomePage() {
                    onChange={onTabChange}
                  />
                </div>
-                <Button
-                  className="whitespace-pre-wrap px-2 lg:hidden"
-                  label="Submit Resume"
-                  variant="primary"
-                  onClick={onSubmitResume}
-                />
              </div>
              <div className="flex flex-wrap items-center justify-start gap-6">
                <div className="w-64">
@ -561,18 +554,12 @@ export default function ResumeHomePage() {
                    onChange={setSearchValue}
                  />
                </div>
-                <Button
-                  className="lg:hidden"
-                  icon={FunnelIcon}
-                  isLabelHidden={true}
-                  label="Filters"
-                  variant="tertiary"
-                  onClick={() => setMobileFiltersOpen(true)}
-                />
+                <div>
                  <DropdownMenu
                    align="end"
                    label={
-                    SORT_OPTIONS.find(({ value }) => value === sortOrder)?.label
+                      SORT_OPTIONS.find(({ value }) => value === sortOrder)
+                        ?.label
                    }>
                    {SORT_OPTIONS.map(({ label, value }) => (
                      <DropdownMenu.Item
@ -582,12 +569,22 @@ export default function ResumeHomePage() {
                        onClick={() => setSortOrder(value)}></DropdownMenu.Item>
                    ))}
                  </DropdownMenu>
-                <Button
-                  className="hidden lg:block"
-                  label="Submit Resume"
-                  variant="primary"
-                  onClick={onSubmitResume}
-                />
+                </div>
+                <button
+                  className="-m-2 text-slate-400 hover:text-slate-500 lg:hidden"
+                  type="button"
+                  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>
            {isFetchingResumes ? (
--- a/apps/portal/src/pages/resumes/index.tsx
+++ b/apps/portal/src/pages/resumes/index.tsx
@ -11,7 +11,7 @@ export default function Home() {
        <title>Resume Review</title>
      </Head>

-      <main className="h-[calc(100vh-2rem)] w-full overflow-y-auto">
+      <main className="h-full w-full overflow-y-auto">
        <Hero />
        <PrimaryFeatures />
        <CallToAction />