collapsible card and many more improvements

jobstash · Aug 27, 2024 · 312ea6c · 312ea6c
1 parent f07d1ce
commit 312ea6c
Show file tree

Hide file tree

Showing 13 changed files with 55 additions and 92 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -94,11 +94,6 @@ html {
 }
 
 
-.pinned > div{
-  @apply max-h-[65px];
-}
-
-
 .stack {
 	display: grid;
 	grid-template-columns: 1fr;

diff --git a/src/grants/components/grant-card/client-wrapper.tsx b/src/grants/components/grant-card/client-wrapper.tsx
@@ -20,7 +20,7 @@ export const ClientWrapper = ({ backButton, collapsed, full }: Props) => {
   const handleScroll = useCallback(() => {
     const currentScrollPos = window.scrollY;
 
-    if (currentScrollPos >= 100) {
+    if (currentScrollPos >= 50) {
       setIsCollapsed(true);
     } else if (currentScrollPos < prevScrollPos) {
       setIsCollapsed(false);
@@ -43,7 +43,7 @@ export const ClientWrapper = ({ backButton, collapsed, full }: Props) => {
     <div className="fixed inset-x-0 top-0 z-50 mt-[56px] bg-app-bg md:mt-20 lg:ml-[264px] lg:mr-8 lg:mt-0 lg:rounded-b-20">
       <div className="flex items-center px-5 lg:h-[115px]">{backButton}</div>
       <div
-        className={cn('w-screen overflow-hidden transition-all duration-700 lg:w-full', {
+        className={cn('w-screen transition-all duration-700 lg:w-full', {
           pinned: isCollapsed,
         })}
       >

diff --git a/src/grants/components/grant-card/collapsed-grant-card.tsx b/src/grants/components/grant-card/collapsed-grant-card.tsx
@@ -1,84 +1,54 @@
+import { cn } from '@/shared/utils/cn';
+
 import { Grant } from '@/grants/core/schemas';
-// import { getGrantCardData } from '@/grants/utils/get-grant-card-data';
+import { getGrantCardData } from '@/grants/utils/get-grant-card-data';
+import { DetailItems } from '@/grants/components/ui/base/detail-item';
+import { Title } from '@/grants/components/ui/base/title';
 
 interface Props {
   grant: Grant;
 }
 
 export const CollapsedGrantCard = ({ grant }: Props) => {
-  // const {
-  //   slug,
-  //   logo,
-  //   name,
-  //   url,
-  //   discord,
-  //   twitter,
-  //   topItems,
-  //   hasTopItems,
-  //   midItems,
-  //   lowerItems,
-  //   hasLowerItems,
-  //   hasWebLinks,
-  // } = getGrantCardData(grant);
+  const {
+    topItems,
+    hasTopItems,
+    midItems,
+  } = getGrantCardData(grant);
 
   return (
     // <div>
     //   <pre>{JSON.stringify(grant)}</pre>
     // </div>
     <div
-      className="flex max-h-[500px] items-center justify-between gap-6 overflow-hidden rounded-20 bg-gradient-to-r from-white/15 to-gradient-1  p-5"
+      className="flex max-h-[500px] rounded-20 bg-gradient-to-t from-tertiary/20 p-5 text-13 lg:bg-gradient-to-r  lg:from-white/15"
       data-uuid={grant.slug}
     >
-      {grant.name}
-      {/* <div className="flex grow flex-col gap-4 lg:pr-24">
-        <Title className="text-2xl font-bold lg:text-32">{name}</Title>
-        <div className="flex flex-wrap gap-4">
-          {hasWebLinks && <WebLinks links={{ url, discord, twitter }} />}
+      <div className="flex flex-wrap gap-2">
+        <Title className="text-12 whitespace-nowrap font-semibold">{grant.name}</Title>
+        <div className="flex  gap-6">
+
 
           {hasTopItems && (
             <DetailItems
               items={topItems}
-              classNames={{ container: 'gap-x-4 gap-y-1.5', root: 'text-13' }}
+              classNames={{ container: 'gap-x-4 gap-y-1.5', root: 'text-13 flex-nowrap flex' }}
             />
           )}
         </div>
 
         <DetailItems
           items={midItems}
           classNames={{
-            label: 'w-full pb-2 md:pb-0 md:w-auto lg:w-full lg:pb-2',
-            root: 'w-full md:w-auto first:text-white/75 lg:first:border-0 lg:first:py-0 lg:items-start lg:first:max-w-xl lg:flex-col lg:items-start',
+            label: 'pr-2',
+            root: 'flex-nowrap flex first:hidden',
             container: cn(
-              'gap-y-4 md:gap-x-6 md:border-divider/25 lg:w-full lg:grow lg:border-divider/10 lg:py-4',
-              { 'md:border-t md:pt-4': hasTopItems },
+              'flex grow flex-nowrap gap-6',
+              { '': hasTopItems },
             ),
           }}
         />
-
-        {hasLowerItems && (
-          <div className="border-t border-divider/10 pt-4 lg:border-none lg:pt-0">
-            <DetailItems
-              items={lowerItems}
-              classNames={{
-                label: 'hidden md:flex',
-              }}
-            />
-          </div>
-        )}
       </div>
-
-      <div className="hidden flex-col gap-4 lg:flex">
-        <div className="flex size-[144px] items-center justify-center overflow-hidden rounded-xl">
-          <Avatar
-            classNames={{
-              base: 'bg-black w-8 h-8 rounded h-[144px] w-[144px]',
-            }}
-            showFallback
-            src={logo ?? ''}
-            name={name}
-          />
-        </div>
-      </div> */}
     </div>
   );
 };

diff --git a/src/grants/components/grant-card/full-grant-card.tsx b/src/grants/components/grant-card/full-grant-card.tsx
@@ -34,7 +34,7 @@ export const FullGrantCard = ({ grant }: Props) => {
 
   return (
     <div
-      className="to-base-dark/20 flex max-h-[500px] items-center justify-between gap-6 overflow-hidden rounded-b-lg bg-gradient-to-t  from-tertiary/20 p-6 text-13 transition-all duration-700 lg:rounded-20 lg:bg-gradient-to-t lg:p-5"
+      className="lg:rounded-t-0 flex max-h-[500px] items-center justify-between gap-6 overflow-hidden rounded-b-lg bg-gradient-to-b from-gradient-1/0  to-white/15 p-6 text-13 transition-all duration-700 lg:rounded-b-20  lg:p-5"
       data-uuid={slug}
       data-testid={GRANT_TEST_IDS.GRANT_CARD}
     >

diff --git a/src/grants/components/grant-stat-item/grantee-stat-item.tsx b/src/grants/components/grant-stat-item/grantee-stat-item.tsx
@@ -19,7 +19,7 @@ export const GranteeStatItem = ({ granteeStat, level = 1 }: Props) => {
   return (
     <Container hasGap={hasGap} hasChildren={hasChildren}>
       <Inner hasChildren={hasChildren}>
-        <span className="text-13 font-medium leading-tight text-white md:text-2xl">
+        <span className="text-13 font-medium leading-tight text-white md:text-2xl md:text-white/60">
           {label}
         </span>
         <span className="text-xl font-medium">{value}</span>
@@ -57,7 +57,7 @@ export const Container = ({
   >
     <div
       className={cn(
-        'flex  flex-col rounded-20 bg-gradient-to-r from-gradient-1/25 to-gradient-2/0 p-4',
+        'flex  flex-col rounded-20 bg-gradient-to-r from-gradient-1/25 to-gradient-2/0 p-4 lg:bg-white/10 lg:bg-none',
         {
           'min-h-[130px]': hasGap,
           'min-h-[90px]': !hasGap,

diff --git a/src/grants/components/grantee-card/grantee-card.tsx b/src/grants/components/grantee-card/grantee-card.tsx
@@ -17,7 +17,7 @@ import {
 } from '@/grants/components/ui/grantee-logo-title';
 
 const WRAPPER_CLASSNAME =
-  'to-base-dark/20 flex flex-col gap-y-4 rounded-b-20 bg-gradient-to-t from-tertiary/20 p-6 transition-all duration-300 md:rounded-lg md:p-5';
+  'to-base-dark/20 flex flex-col gap-y-4 rounded-b-20 bg-gradient-to-t from-tertiary/20 p-6 transition-all duration-300 md:rounded-20 md:p-5 lg:bg-none lg:bg-white/10';
 
 export const GranteeCard = () => {
   const { grantId, granteeId } = useParams() as {

diff --git a/src/grants/components/project-stats/project-stats.tsx b/src/grants/components/project-stats/project-stats.tsx
@@ -8,7 +8,7 @@ import {
   GranteeStatsSkeleton,
 } from '@/grants/components/grant-stat-item';
 
-const WRAPPER_CLASSNAME = '-mx-1.5 flex flex-wrap gap-y-5 pb-5';
+const WRAPPER_CLASSNAME = '-mx-1.5 flex flex-wrap gap-y-5 pb-5 lg:mx-0';
 
 export const GranteeProjectStats = () => {
   const { grantId, granteeId, projectId, tab } = useParams() as {

diff --git a/src/grants/components/project-tab-selections/project-tab-selection.tsx b/src/grants/components/project-tab-selections/project-tab-selection.tsx
@@ -9,7 +9,7 @@ import { useGranteeFetch } from '@/grants/hooks/use-grantee-fetch';
 import { TabSelectionsSkeleton } from '@/grants/components/tab-selections-skeleton';
 
 const SHARED_CLASSNAME =
-  'flex bg-white/5 hide-scrollbar gap-4 p-3 rounded-20 mr-3.5';
+  'flex bg-white/5 hide-scrollbar gap-4 p-3 rounded-20 mr-3.5 lg:mr-0 lg:w-full';
 
 export const ProjectTabSelection = () => {
   const { grantId, granteeId, projectId, tab } = useParams() as {
@@ -47,7 +47,7 @@ export const ProjectTabSelection = () => {
   const activeTab = tab || currentProject.tabs[0].tab;
 
   return (
-    <div className="-mr-3.5 overflow-auto">
+    <div className="-mr-3.5 overflow-auto lg:mr-0">
       <div className={cn(SHARED_CLASSNAME, 'w-fit')}>
         {currentProject.tabs.map(({ label, tab }) => (
           <Link

diff --git a/src/grants/data/get-grantee-details.ts b/src/grants/data/get-grantee-details.ts
@@ -3,14 +3,14 @@ import { mwGET } from '@/shared/utils/mw-get';
 import { grantQueryUrls } from '@/grants/core/query-urls';
 import { granteeDtoSchema } from '@/grants/core/schemas';
 
-// import { fakeGrantee } from '@/grants/testutils/fake-grantee';
+import { fakeGrantee } from '@/grants/testutils/fake-grantee';
 
 export const getGranteeDetails = async (grantId: string, granteeId: string) => {
-  // return {
-  //   success: true,
-  //   message: 'Grantee details fetched successfully',
-  //   data: fakeGrantee(),
-  // };
+  return {
+    success: true,
+    message: 'Grantee details fetched successfully',
+    data: fakeGrantee(),
+  };
 
   return mwGET({
     url: `${grantQueryUrls.grantee(grantId, granteeId)}`,

diff --git a/src/grants/data/get-grantee-list.ts b/src/grants/data/get-grantee-list.ts
@@ -8,7 +8,7 @@ import {
   granteeInfiniteListPageSchema,
 } from '@/grants/core/schemas';
 
-// import { fakeGrantees } from '@/grants/testutils/fake-grantee';
+import { fakeGrantees } from '@/grants/testutils/fake-grantee';
 
 interface Props {
   page: number;
@@ -17,18 +17,18 @@ interface Props {
   limit?: number;
 }
 
-// const data = fakeGrantees();
+const data = fakeGrantees();
 
 export const getGranteeList = async ({
   page,
   grantId,
   searchParams = '',
   limit = Number(PAGE_SIZE) || 20,
 }: Props): Promise<GranteeInfiniteListPage> => {
-  // return {
-  //   page: page + 1,
-  //   data,
-  // };
+  return {
+    page: page + 1,
+    data,
+  };
 
   const url = createUrlWithSearchParams(
     `${grantQueryUrls.grantees(grantId)}?page=${page}&limit=${limit}&grantId=${grantId}`,

diff --git a/src/grants/pages/grant-page-layout.tsx b/src/grants/pages/grant-page-layout.tsx
@@ -55,21 +55,21 @@ export const GrantPageLayout = ({ list, grant, children }: Props) => {
     if (element && contentElement) {
       const scrollTriggerInstance = ScrollTrigger.create({
         trigger: triggerElement,
-        start: 'top 140px',
+        start: 'top 220px',
         endTrigger: 'html',
         end: 'bottom top',
         pin: element,
         onEnter: () => {
           contentElement.classList.add(
             'hide-scrollbar',
-            'h-[calc(100svh-140px)]',
+            'h-[calc(100svh-220px)]',
             'overflow-auto',
           );
         },
         onLeaveBack: () => {
           contentElement.classList.remove(
             'hide-scrollbar',
-            'h-[calc(100svh-140px)]',
+            'h-[calc(100svh-220px)]',
             'overflow-auto',
           );
         },
@@ -97,24 +97,22 @@ export const GrantPageLayout = ({ list, grant, children }: Props) => {
   }, [isDesktop]);
 
   return (
-    <div className="flex flex-col gap-6 px-4 pt-[56px] md:pt-20 lg:px-0 lg:pr-8 lg:pt-0">
+    <div className="flex flex-col gap-6 px-4 pt-[56px] md:pt-20 lg:px-0 lg:pt-0">
       <GrantCard
         grant={grant}
         backButton={<GrantBackButton fallbackUrl="/grants" />}
       />
 
-      <div className="mt-[430px] md:mt-[320px] lg:mt-[370px]">
+      <div className="mt-[430px] md:mt-[320px] lg:mt-[370px] lg:pr-8">
+        <div className="px-2 pb-4 text-base">Grantee List</div>
         <div className="flex gap-8">
-          <div className="w-full shrink-0 lg:w-4/12">
-            <div className="px-2 pb-4 text-base">Grantee List</div>
-            {list}
-          </div>
+          <div className="w-full shrink-0 lg:w-4/12">{list}</div>
 
-          <div ref={pinRef} className="flex w-full flex-col gap-4 lg:w-8/12">
+          <div ref={pinRef} className="flex w-full flex-col gap-4">
             <div ref={isDesktop ? contentRef : undefined}>{children}</div>
           </div>
         </div>
       </div>
     </div>
   );
-};
+};
diff --git a/src/grants/pages/grantee-details-section.tsx b/src/grants/pages/grantee-details-section.tsx
@@ -68,16 +68,16 @@ export const GranteeDetailsSection = ({ hasGranteeId }: Props) => {
   return (
     <div
       className={cn(
-        'space-y-4 overflow-auto',
+        'space-y-4 overflow-y-auto',
         { 'hidden lg:block': !hasGranteeId },
         {
-          'fixed top-0 left-0 bottom-0 mt-[95px] md:mt-[125px] z-[999] w-screen bg-[#070708] h-[calc(100vh-95px)] md:h-[calc(100vh-125px)] lg:mt-8 lg:pt-0 lg:relative lg:w-auto lg:h-auto':
+          'fixed top-0 left-0 bottom-0 mt-[95px] md:mt-[125px] z-[999] w-screen bg-[#070708] h-[calc(100vh-95px)] md:h-[calc(100vh-125px)] lg:mt-0 lg:pt-0 lg:relative lg:w-auto lg:h-auto':
             hasGranteeId,
         },
       )}
     >
       <GranteeCard />
-      <div className='space-y-4 px-3.5'>
+      <div className='space-y-4 px-3.5 lg:px-0 lg:pb-6'>
         <ProjectSelections />
         <ProjectTabSelection />
         <GranteeProjectStats />

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -38,8 +38,8 @@ const config: Config = {
       },
       colors: {
         white: 'rgb(var(--color-white) / <alpha-value>)',
-        'base-dark': 'var(--color-base-dark)',
-        'dark-gray': 'var(--color-dark-gray)',
+        'base-dark': 'rgb(var(--color-base-dark / <alpha-value>))',
+        'dark-gray': 'rgb(var(--color-dark-gray  / <alpha-value>))',
         'app-bg': 'rgb(var( --color-bg-app))',
         'light-gray': 'rgb(var(--color-light-gray))',
         'cool-gray': 'rgb(var(--color-cool-gray))',