Merge pull request #49 from Vizzuality/develop-layout-fixes

Attempt to fix initial data-tool layout fixes
Vizzuality · Nov 10, 2023 · 848f79b · 848f79b
2 parents 040aad6 + 6afd60b
commit 848f79b
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 25 deletions.
diff --git a/frontend/src/containers/data-tool/content/details/index.tsx b/frontend/src/containers/data-tool/content/details/index.tsx
@@ -30,7 +30,7 @@ const DataToolDetails: React.FC = () => {
   }, [location]);
 
   return (
-    <div className="overflow-none absolute h-full w-full bg-white px-4 py-4 md:px-6">
+    <div className="absolute h-full w-full overflow-x-hidden overflow-y-scroll bg-white px-4 py-4 md:px-6">
       <div className="mb-8 flex gap-8 md:justify-between">
         <span className="max-w-lg">
           <h2 className="text-4xl font-extrabold">{table.title}</h2>

diff --git a/frontend/src/containers/data-tool/content/index.tsx b/frontend/src/containers/data-tool/content/index.tsx
@@ -7,7 +7,7 @@ const DataToolContent: React.FC = () => {
   const [{ showDetails }] = useSyncDataToolContentSettings();
 
   return (
-    <div className="absolute h-full w-full">
+    <div className="relative h-full w-full">
       <Map />
       {showDetails && <Details />}
     </div>

diff --git a/frontend/src/containers/data-tool/content/map/index.tsx b/frontend/src/containers/data-tool/content/map/index.tsx
@@ -10,13 +10,11 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useAtomValue, useSetAtom } from 'jotai';
 
 import Map, { ZoomControls, Attributions, DrawControls, Drawing } from '@/components/map';
-import SidebarContent from '@/components/sidebar-content';
 // import Popup from '@/containers/map/popup';
 import LabelsManager from '@/containers/data-tool/content/map/labels-manager';
 import LayersToolbox from '@/containers/data-tool/content/map/layers-toolbox';
 import { useSyncMapSettings } from '@/containers/data-tool/content/map/sync-settings';
 import { cn } from '@/lib/classnames';
-import { sidebarAtom } from '@/store/data-tool';
 import {
   drawStateAtom,
   layersInteractiveAtom,
@@ -39,7 +37,6 @@ const DataToolMap: React.FC = () => {
   const setPopup = useSetAtom(popupAtom);
   const queryClient = useQueryClient();
   const { locationCode } = useParams();
-  const isSidebarOpen = useAtomValue(sidebarAtom);
   const hoveredPolygonId = useRef<string | number | null>(null);
 
   const locationData = queryClient.getQueryData<LocationResponseDataObject>([
@@ -133,18 +130,6 @@ const DataToolMap: React.FC = () => {
 
   const bounds = customBbox ?? (locationData?.attributes?.bounds as LngLatBoundsLike);
 
-  useEffect(() => {
-    map?.easeTo({
-      padding: {
-        top: 0,
-        bottom: 0,
-        left: isSidebarOpen ? 430 : 0,
-        right: 0,
-      },
-      duration: 500,
-    });
-  }, [isSidebarOpen, map]);
-
   useEffect(() => {
     const { queryKey } = getGetLocationsQueryOptions();
     const d = queryClient.getQueryData<LocationListResponse>(queryKey);
@@ -155,17 +140,16 @@ const DataToolMap: React.FC = () => {
         padding: {
           top: 0,
           bottom: 0,
-          left: isSidebarOpen ? 430 : 0,
+          left: 0,
           right: 0,
         },
       });
     }
-  }, [queryClient, locationCode, isSidebarOpen, map]);
+  }, [queryClient, locationCode, map]);
 
   return (
-    <div className="absolute left-0 flex h-full w-full flex-col md:flex-row">
+    <div className="absolute left-0 h-full w-full">
       <Map
-        className="absolute left-0 w-full"
         initialViewState={{
           bounds,
           fitBoundsOptions: {
@@ -202,9 +186,6 @@ const DataToolMap: React.FC = () => {
           <Attributions />
         </>
       </Map>
-      <div className="h-1/2 flex-shrink-0 bg-white p-6 pb-3 md:hidden">
-        <SidebarContent />
-      </div>
     </div>
   );
 };

diff --git a/frontend/src/containers/data-tool/sidebar/details-button/index.tsx b/frontend/src/containers/data-tool/sidebar/details-button/index.tsx
@@ -12,7 +12,7 @@ const DetailsButton: React.FC = () => {
 
   return (
     <Button
-      className="flex justify-between"
+      className="flex justify-between px-5 md:px-8"
       variant="sidebar-details"
       size="full"
       onClick={handleButtonClick}