Merge pull request #971 from Vizzuality/GMW-968-entire-widget-clickable

Gmw 968 entire widget clickable
Vizzuality · Nov 22, 2023 · 9831fc6 · 9831fc6
2 parents 7e2371d + 804f56d
commit 9831fc6
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 28 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}_fill`,
       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/sidebar/index.tsx b/src/containers/sidebar/index.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import Link from 'next/link';
 
 import Helper from 'containers/guide/helper';
 import Menu from 'containers/sidebar/menu';
@@ -11,14 +12,18 @@ const HELPER_ID = 'menu-categories';
 
 const Sidebar = () => (
   <div className="pointer-events-none absolute top-0 bottom-0 left-0 w-full bg-[url('/images/sidebar-bg.png')] bg-[top_left_-16px] bg-no-repeat print:hidden">
-    <div className="absolute top-0 left-0 z-50 print:hidden">
+    <Link
+      href="/"
+      className="pointer-events-auto absolute top-0 left-0 z-50 h-[90px] w-[220px] cursor-pointer print:hidden"
+      data-testid="desktop-logo-link"
+    >
       <Image width={220} height={100} src="/images/logo.svg" alt="Global Mangrove Watch" />
-    </div>
+    </Link>
     <div className="pointer-events-auto relative top-28 inline-flex h-full w-18 flex-col items-start space-y-5 bg-brand-600 pl-2.5">
       <div>
         <Menu />
       </div>
-      <News />
+      {process.env.NEXT_PUBLIC_VERCEL_ENV === 'development' && <News />}
       <MapSettings />
       <Place />
       <Helper

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];

diff --git a/src/layouts/desktop/index.tsx b/src/layouts/desktop/index.tsx
@@ -63,18 +63,6 @@ const DesktopLayout = () => {
             Powered by Global Mangrove Watch. https://www.globalmangrovewatch.org
           </p>
         )}
-        <Link
-          href="/"
-          className="w-[220px]h-[90px]pointer-events-auto absolute top-0 left-0 z-50 cursor-pointer print:hidden"
-          data-testid="desktop-logo-link"
-        >
-          <Image
-            data-testid="desktop-logo"
-            fill={true}
-            src="/images/logo.svg"
-            alt="Global Mangrove Watch"
-          />
-        </Link>
         <MapContainer mapId={`default-desktop-${isPrintingId}`} />
 
         <Sidebar />