collapsable area increased

Vizzuality · Nov 22, 2023 · 58c775d · 58c775d
1 parent 480d2cb
commit 58c775d
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 13 deletions.
diff --git a/src/containers/datasets/habitat-extent/hooks.tsx b/src/containers/datasets/habitat-extent/hooks.tsx
@@ -220,10 +220,9 @@ export function useSource(): SourceProps {
 }
 
 export function useLayers({ year, id }: { year: number; id: LayerProps['id'] }): LayerProps[] {
-  console.log(year);
   return [
     {
-      id: `${id}_${year}`,
+      id: `${id}_${year}_line`,
       type: 'fill',
       source: 'habitat_extent',
       'source-layer': `mng_mjr_${year}`,
@@ -236,7 +235,7 @@ export function useLayers({ year, id }: { year: number; id: LayerProps['id'] }):
       },
     },
     {
-      id: `${id}_${year}`,
+      id: `${id}_${year}_fil`,
       type: 'line',
       source: 'habitat_extent',
       'source-layer': `mng_mjr_${year}`,

diff --git a/src/containers/guide/helper/index.tsx b/src/containers/guide/helper/index.tsx
@@ -15,6 +15,7 @@ export const Helper = ({
   message,
 }: PropsWithChildren<{
   className?: {
+    container?: string;
     button?: string;
     tooltip?: string;
     active?: string;
@@ -45,7 +46,7 @@ export const Helper = ({
   }, [childrenRef, popOver]);
 
   return (
-    <div>
+    <div className={cn({ [className.container]: !!className.container })}>
       {isActive && (
         <div className="relative">
           <button
@@ -67,7 +68,9 @@ export const Helper = ({
         </div>
       )}
 
-      <div ref={childrenRef}>{children}</div>
+      <div ref={childrenRef} className={cn({ [className.container]: !!className.container })}>
+        {children}
+      </div>
 
       {typeof window !== 'undefined' &&
         popOver &&

diff --git a/src/containers/widget/index.tsx b/src/containers/widget/index.tsx
@@ -37,7 +37,6 @@ const WidgetWrapper: FC<WidgetLayoutProps> = (props: WidgetLayoutProps) => {
 
   const [widgetsCollapsed, setWidgetsCollapsed] = useRecoilState(widgetsCollapsedAtom);
   const widgets = useWidgets();
-  const HELPER_ID = widgets[0].slug;
 
   const handleWidgetCollapsed = useCallback(() => {
     const updatedWidgetsCollapsed = {
@@ -58,7 +57,9 @@ const WidgetWrapper: FC<WidgetLayoutProps> = (props: WidgetLayoutProps) => {
   };
 
   if (Boolean(children.type() === null)) return null;
-
+  const filteredWidgets = widgets.find((w) => w.slug !== 'mangrove_national_dashboard');
+  const HELPER_ID =
+    id === 'mangrove_national_dashboard' ? 'mangrove_national_dashboard' : filteredWidgets?.slug;
   return (
     <AnimatePresence>
       <motion.div
@@ -83,10 +84,11 @@ const WidgetWrapper: FC<WidgetLayoutProps> = (props: WidgetLayoutProps) => {
           <header className="flex items-center justify-between ">
             <Helper
               className={{
-                button: HELPER_ID === id && !showWidget ? '-bottom-7.5 -right-6 z-[20]' : 'hidden',
+                container: 'w-full',
+                button: HELPER_ID === id && !showWidget ? '-top-0 -right-4 z-[20]' : 'hidden',
                 tooltip: 'w-fit-content',
               }}
-              tooltipPosition={{ top: 60, left: 0 }}
+              tooltipPosition={{ top: 40, left: 0 }}
               message="Click to expand/collapse widgets"
             >
               <h2

diff --git a/src/containers/widgets/index.tsx b/src/containers/widgets/index.tsx
@@ -116,20 +116,20 @@ const WidgetsContainer: React.FC = () => {
       {isBlogActive && process.env.NEXT_PUBLIC_VERCEL_ENV === 'development' && (
         <Blog closeBlogBanner={closeBlogBanner} />
       )}
-      {screenWidth < breakpoints.md && (
+      {screenWidth > 0 && screenWidth < breakpoints.md && (
         <div>
-          {widgets.map(({ slug, name, applicability }) => {
+          {widgets.map(({ slug, name, applicability }, index) => {
             const Widget = WIDGETS[slug];
             return (
               <WidgetWrapper key={slug} title={name} id={slug} applicability={applicability}>
-                {WIDGETS[slug] && <Widget />}
+                {WIDGETS[slug] && <Widget index={index} />}
               </WidgetWrapper>
             );
           })}
         </div>
       )}
 
-      {screenWidth >= breakpoints.md && (
+      {screenWidth > 0 && screenWidth >= breakpoints.md && (
         <div className="print:m-auto print:grid print:w-screen print:grid-cols-2 print:gap-1">
           {widgets.map(({ slug, name, applicability }) => {
             const Widget = WIDGETS[slug];