static height removed

Vizzuality · Apr 25, 2024 · a2d1c91 · a2d1c91
1 parent a5fe32a
commit a2d1c91
Show file tree

Hide file tree

Showing 13 changed files with 608 additions and 581 deletions.
diff --git a/client/src/app/(landing)/countries/page.tsx b/client/src/app/(landing)/countries/page.tsx
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 export default function Countries() {
   return (
     <Panel>
-      <div className="space-y-5 py-7">
+      <div className="h-full space-y-5 overflow-hidden py-7">
         <h2 className="px-5 text-3xl font-normal">Country Profile</h2>
         <CountriesList />
       </div>

diff --git a/client/src/app/(landing)/datasets/page.tsx b/client/src/app/(landing)/datasets/page.tsx
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 export default function DatasetsPage() {
   return (
     <Panel>
-      <div className="space-y-4 py-8">
+      <div className="h-full space-y-4 overflow-hidden py-8">
         <h2 className="px-6 text-3xl font-normal">Datasets</h2>
 
         <DatasetsList />

diff --git a/client/src/app/(landing)/projects/page.tsx b/client/src/app/(landing)/projects/page.tsx
@@ -14,7 +14,7 @@ import ProjectsTabs from '@/containers/projects/tabs';
 export default function Projects() {
   return (
     <Panel>
-      <div className="space-y-5 py-7">
+      <div className="h-full space-y-5 overflow-hidden py-7">
         <div className="px-5">
           <h2 className="text-3xl font-normal">Projects</h2>
 

diff --git a/client/src/components/ui/loader.tsx b/client/src/components/ui/loader.tsx
@@ -27,7 +27,7 @@ const ContentLoader = ({
   isError,
 }: ContentLoaderProps) => {
   return (
-    <div className="relative">
+    <div className="relative h-full">
       {isFetching && !isFetched && (
         <div
           role="status"

diff --git a/client/src/components/ui/scroll-area.tsx b/client/src/components/ui/scroll-area.tsx
@@ -12,10 +12,10 @@ const ScrollArea = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
-    className={cn('relative overflow-hidden', className)}
+    className={cn('relative flex grow flex-col overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport className="h-full w-full grow rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />

diff --git a/client/src/containers/countries/detail/panel.tsx b/client/src/containers/countries/detail/panel.tsx
diff --git a/client/src/containers/countries/list.tsx b/client/src/containers/countries/list.tsx
@@ -26,7 +26,7 @@ export default function CountriesList() {
   });
 
   return (
-    <div className="flex flex-col space-y-8">
+    <div className="flex h-full flex-col space-y-8">
       {/* <div className="relative px-5">
         <Input
           type="search"
@@ -55,15 +55,19 @@ export default function CountriesList() {
         isError={isError}
         loaderClassName="mt-52"
       >
-        <div className="flex flex-col space-y-2">
+        <div className="relative flex h-full flex-col space-y-2">
           <p className="px-5 text-xs text-gray-500">Select a country</p>
-          <ScrollArea className="h-[70vh] px-5 2xl:h-[75vh]">
-            <div className="flex flex-col space-y-1">
-              {data?.data?.map((country) => (
-                <CountryItem key={country.id} data={country} />
-              ))}
+          <div className="relative h-full">
+            <div className="absolute bottom-0 top-0 h-full w-full overflow-hidden">
+              <ScrollArea className="h-full px-5 pb-10">
+                <div className="flex flex-col space-y-1">
+                  {data?.data?.map((country) => (
+                    <CountryItem key={country.id} data={country} />
+                  ))}
+                </div>
+              </ScrollArea>
             </div>
-          </ScrollArea>
+          </div>
         </div>
       </ContentLoader>
     </div>

diff --git a/client/src/containers/datasets/list.tsx b/client/src/containers/datasets/list.tsx
@@ -25,21 +25,25 @@ export default function DatasetsList() {
       isError={isError}
       loaderClassName="mt-40"
     >
-      <ScrollArea className="h-[84vh] px-6">
-        <h3 className="text-xs text-gray-500">Activate data layers on the map</h3>
-        <div className="mb-10 mt-2 flex flex-col">
-          {layers
-            .sort((a, b) => {
-              if (a?.attributes?.slug === 'projects') return -1;
-              if (b?.attributes?.slug === 'projects') return 1;
-              return 0;
-            })
-            .map((l) => {
-              if (!l.id || !l.attributes) return null;
-              return <DatasetsItem key={l.id} {...l} />;
-            })}
+      <div className="relative h-full">
+        <div className="absolute bottom-0 top-0 overflow-hidden">
+          <ScrollArea className="h-full px-6">
+            <h3 className="text-xs text-gray-500">Activate data layers on the map</h3>
+            <div className="mb-10 mt-2 flex flex-col">
+              {layers
+                .sort((a, b) => {
+                  if (a?.attributes?.slug === 'projects') return -1;
+                  if (b?.attributes?.slug === 'projects') return 1;
+                  return 0;
+                })
+                .map((l) => {
+                  if (!l.id || !l.attributes) return null;
+                  return <DatasetsItem key={l.id} {...l} />;
+                })}
+            </div>
+          </ScrollArea>
         </div>
-      </ScrollArea>
+      </div>
     </ContentLoader>
   );
 }
diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
@@ -6,7 +6,7 @@ import { LngLatBoundsLike, MapLayerMouseEvent, useMap, Marker } from 'react-map-
 
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
-import { useParams, usePathname, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 
 import bbox from '@turf/bbox';
 import { useAtomValue, useSetAtom, useAtom } from 'jotai';
@@ -68,8 +68,6 @@ export default function MapContainer() {
 
   const { [id]: map } = useMap();
   const { push } = useRouter();
-  const params = useParams<{ id: string }>();
-  const pathname = usePathname();
 
   const layersInteractiveIds = useAtomValue(layersInteractiveIdsAtom);
   const setHoveredProjectMap = useSetAtom(hoveredProjectMapAtom);
@@ -262,7 +260,7 @@ export default function MapContainer() {
   );
 
   return (
-    <div className="absolute left-0 top-0 h-screen w-screen">
+    <div className="relative left-0 top-0 h-screen w-screen">
       <Map
         id={id}
         data-cy="map"

diff --git a/client/src/containers/map/legend/index.tsx b/client/src/containers/map/legend/index.tsx
@@ -34,14 +34,11 @@ const MapLegends = ({ className = '' }) => {
   const sortable = layers?.length > 1;
 
   return (
-    <div className="absolute bottom-12 right-6 z-10 flex w-full max-w-xs space-x-2">
+    <div className="absolute bottom-12 right-6 flex w-full max-w-xs overflow-hidden align-bottom">
       {openLegend && (
-        <ScrollArea className="flex h-72 w-full max-w-xs flex-col xl:h-full">
+        <ScrollArea className="flex w-full max-w-xs align-bottom">
           <Legend
-            className={cn(
-              'animate-in fade-in-50 max-h-[calc(100vh_-_theme(space.16)_-_theme(space.6)_-_theme(space.48))] duration-300',
-              className
-            )}
+            className={cn('animate-in fade-in-50 duration-300', className)}
             sortable={{
               enabled: sortable,
               handle: true,
@@ -59,6 +56,7 @@ const MapLegends = ({ className = '' }) => {
           </Legend>
         </ScrollArea>
       )}
+
       {layers.length > 0 && (
         <Button
           variant="primary"

diff --git a/client/src/containers/projects/detail/panel.tsx b/client/src/containers/projects/detail/panel.tsx
@@ -139,7 +139,7 @@ export default function ProjectDetailPanel() {
   }
 
   return (
-    <div className="h-full rounded-3xl bg-neutral-50 py-6">
+    <div className="relative h-full rounded-3xl bg-neutral-50">
       <div className="absolute left-0 top-0 w-full">
         {data && indicators && (
           <div className="relative">
@@ -218,93 +218,97 @@ export default function ProjectDetailPanel() {
         isError={isError || indicatorIsFetched}
         loaderClassName="mt-52"
       >
-        <ScrollArea className="mt-40 flex h-[67vh] flex-col space-y-8 px-5 2xl:h-[74vh]">
-          {data?.description && (
-            <p className="pt-2 text-sm text-gray-500">
-              <DescriptionWithoutMarkdown description={data?.description} />
-            </p>
-          )}
+        <div className="relative h-full">
+          <div className="absolute bottom-0 top-0 h-full w-full overflow-hidden">
+            <ScrollArea className="mt-52 flex h-full flex-col space-y-8 px-5 pb-52">
+              {data?.description && (
+                <p className="pt-2 text-sm text-gray-500">
+                  <DescriptionWithoutMarkdown description={data?.description} />
+                </p>
+              )}
 
-          <div>
-            <div className="flex justify-between border-b-2 border-dotted border-gray-400 py-4">
-              <p className="text-xs font-medium uppercase text-gray-500">Status</p>
-              <p className="text-sm text-yellow-900">{data?.status}</p>
-            </div>
-            <div className="flex justify-between border-b-2 border-dotted border-gray-400 py-4">
-              <p className="text-xs font-medium uppercase text-gray-500">Location</p>
-              <p className="text-sm text-yellow-900">
-                {data?.countries?.data?.map((d) => d?.attributes?.name).join(', ')}
-              </p>
-            </div>
-            <div className="flex justify-between border-b-2 border-dotted border-gray-400 py-4">
-              <p className="text-xs font-medium uppercase text-gray-500">Duration</p>
-              <p className="text-sm text-yellow-900">{data?.duration}</p>
-            </div>
-            <div className="flex justify-between border-b-2 border-dotted border-gray-400 py-4">
-              <p className="text-xs font-medium uppercase text-gray-500">Donors</p>
-              <p className="text-sm text-yellow-900">{data?.donors}</p>
-            </div>
-            <div className="flex justify-between border-b-2 border-dotted border-gray-400 py-4">
-              <p className="text-xs font-medium uppercase text-gray-500">Investment</p>
-              <p className="text-sm text-yellow-900">
-                {formatCompactNumber(indicators?.project_funding?.total_funding)}
-              </p>
-            </div>
-          </div>
-          <div className="flex flex-col space-y-1 pt-6">
-            {!!data?.gallery?.data?.length && (
-              <>
-                <h4 className="pb-1 text-xs font-medium uppercase text-yellow-900">
-                  Project Gallery
-                </h4>
-                <div className="flex w-full space-x-1">
-                  <div className="flex w-1/2 flex-col space-y-[1px]">
-                    {data.gallery.data.map((img, index) => (
-                      <div key={index}>
-                        {index >= 0 && index % 5 === 0 && (
-                          <div className="flex h-[132px] space-x-1">
-                            <Image
-                              src={img?.attributes?.url ?? '/images/projects/placeholder.png'}
-                              alt="AFOCO"
-                              width={165}
-                              height={170}
-                              className="h-full w-full object-cover"
-                            />
+              <div>
+                <div className="flex justify-between border-b-2 border-dotted border-gray-400 py-4">
+                  <p className="text-xs font-medium uppercase text-gray-500">Status</p>
+                  <p className="text-sm text-yellow-900">{data?.status}</p>
+                </div>
+                <div className="flex justify-between border-b-2 border-dotted border-gray-400 py-4">
+                  <p className="text-xs font-medium uppercase text-gray-500">Location</p>
+                  <p className="text-sm text-yellow-900">
+                    {data?.countries?.data?.map((d) => d?.attributes?.name).join(', ')}
+                  </p>
+                </div>
+                <div className="flex justify-between border-b-2 border-dotted border-gray-400 py-4">
+                  <p className="text-xs font-medium uppercase text-gray-500">Duration</p>
+                  <p className="text-sm text-yellow-900">{data?.duration}</p>
+                </div>
+                <div className="flex justify-between border-b-2 border-dotted border-gray-400 py-4">
+                  <p className="text-xs font-medium uppercase text-gray-500">Donors</p>
+                  <p className="text-sm text-yellow-900">{data?.donors}</p>
+                </div>
+                <div className="flex justify-between border-b-2 border-dotted border-gray-400 py-4">
+                  <p className="text-xs font-medium uppercase text-gray-500">Investment</p>
+                  <p className="text-sm text-yellow-900">
+                    {formatCompactNumber(indicators?.project_funding?.total_funding)}
+                  </p>
+                </div>
+              </div>
+              <div className="flex flex-col space-y-1 pt-6">
+                {!!data?.gallery?.data?.length && (
+                  <>
+                    <h4 className="pb-1 text-xs font-medium uppercase text-yellow-900">
+                      Project Gallery
+                    </h4>
+                    <div className="flex w-full space-x-1">
+                      <div className="flex w-1/2 flex-col space-y-[1px]">
+                        {data.gallery.data.map((img, index) => (
+                          <div key={index}>
+                            {index >= 0 && index % 5 === 0 && (
+                              <div className="flex h-[132px] space-x-1">
+                                <Image
+                                  src={img?.attributes?.url ?? '/images/projects/placeholder.png'}
+                                  alt="AFOCO"
+                                  width={165}
+                                  height={170}
+                                  className="h-full w-full object-cover"
+                                />
+                              </div>
+                            )}
                           </div>
-                        )}
+                        ))}
                       </div>
-                    ))}
-                  </div>
 
-                  <div className="mb-auto grid w-1/2 grid-cols-2 gap-1">
-                    {data.gallery.data.map(
-                      (img, index) =>
-                        index > 0 &&
-                        index % 5 != 0 && (
-                          <div key={index} className="flex h-16 w-full space-x-1">
-                            <Image
-                              src={img?.attributes?.url ?? '/images/projects/placeholder.png'}
-                              alt="AFOCO"
-                              width={165}
-                              height={165}
-                              className="h-full w-full object-cover"
-                            />
-                          </div>
-                        )
-                    )}
-                  </div>
-                </div>
-              </>
-            )}
+                      <div className="mb-auto grid w-1/2 grid-cols-2 gap-1">
+                        {data.gallery.data.map(
+                          (img, index) =>
+                            index > 0 &&
+                            index % 5 != 0 && (
+                              <div key={index} className="flex h-16 w-full space-x-1">
+                                <Image
+                                  src={img?.attributes?.url ?? '/images/projects/placeholder.png'}
+                                  alt="AFOCO"
+                                  width={165}
+                                  height={165}
+                                  className="h-full w-full object-cover"
+                                />
+                              </div>
+                            )
+                        )}
+                      </div>
+                    </div>
+                  </>
+                )}
 
-            <p className="pb-16 text-sm text-gray-500">
-              If you have pictures of this project to share, please sent them to{' '}
-              <a className="underline hover:no-underline" href="mailto:contact@afocosec.org">
-                contact@afocosec.org
-              </a>
-            </p>
+                <p className="pb-16 text-sm text-gray-500">
+                  If you have pictures of this project to share, please sent them to{' '}
+                  <a className="underline hover:no-underline" href="mailto:contact@afocosec.org">
+                    contact@afocosec.org
+                  </a>
+                </p>
+              </div>
+            </ScrollArea>
           </div>
-        </ScrollArea>
+        </div>
         <Drawer>
           <DrawerTrigger asChild className="group">
             <Button