Merge pull request #28 from Vizzuality/fixes/layers-and-ui-fixes

fixed timeline layer on step 2
Vizzuality · Dec 4, 2023 · b26c36c · b26c36c
2 parents e94d7ee + 1306a92
commit b26c36c
Show file tree

Hide file tree

Showing 9 changed files with 6,735 additions and 29 deletions.
diff --git a/client/src/components/map/layers/animated-tile-layer/index.tsx b/client/src/components/map/layers/animated-tile-layer/index.tsx
@@ -78,7 +78,7 @@ const AnimatedTileLayer = <T,>({ id = '', c }: DeckLayerProps<T>) => {
           if (!tile || !data) return null;
 
           const {
-            z,
+            zoom,
             bbox: { west, south, east, north },
           } = tile;
 
@@ -93,7 +93,7 @@ const AnimatedTileLayer = <T,>({ id = '', c }: DeckLayerProps<T>) => {
               getPolygonOffset: () => {
                 return [0, 5000];
               },
-              zoom: z,
+              zoom,
               visible,
               opacity,
             });

diff --git a/client/src/constants/mapbox-style-globe.json b/client/src/constants/mapbox-style-globe.json
diff --git a/client/src/constants/mapbox-style.json b/client/src/constants/mapbox-style.json
diff --git a/client/src/constants/mapbox.ts b/client/src/constants/mapbox.ts
diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
@@ -8,7 +8,7 @@ import dynamic from 'next/dynamic';
 import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/navigation';
 
-import { LngLatBoundsLike } from 'mapbox-gl';
+import { LngLatBoundsLike, Style } from 'mapbox-gl';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { cn } from '@/lib/classnames';
@@ -27,7 +27,8 @@ import {
 import { Bbox } from '@/types/map';
 
 import { DEFAULT_MAP_STATE } from '@/constants/map';
-import { MAPBOX_STYLES } from '@/constants/mapbox';
+import MAPBOX_STYLE_GLOBE from '@/constants/mapbox-style-globe.json';
+import MAPBOX_STYLE_DEFAULT from '@/constants/mapbox-style.json';
 
 import HomeMarkers from '@/containers/map/markers/home-markers';
 import StoryMarkers from '@/containers/map/markers/story-markers';
@@ -206,7 +207,7 @@ export default function MapContainer() {
         }}
         minZoom={minZoom}
         maxZoom={maxZoom}
-        mapStyle={MAPBOX_STYLES.default}
+        mapStyle={(isHomePage ? MAPBOX_STYLE_GLOBE : MAPBOX_STYLE_DEFAULT) as Style}
         // fog={FOG}
         interactiveLayerIds={layersInteractiveIds}
         // onClick={handleMapClick}
@@ -216,6 +217,7 @@ export default function MapContainer() {
         dragPan={isHomePage}
         onMapViewStateChange={handleMapViewStateChange}
         className={cn(isHomePage ? 'cursor-pointer' : 'pointer-events-none cursor-default')}
+        padding={{ top: 50, bottom: 50, left: 200, right: 300 }}
       >
         {/* <Controls className="absolute right-5 top-12 z-40 sm:right-6 sm:top-6">
           <ZoomControl />

diff --git a/client/src/containers/story/index.tsx b/client/src/containers/story/index.tsx
@@ -87,14 +87,16 @@ const Story = () => {
 
   return (
     <div className="text-primary flex flex-col justify-between">
-      <div className="fixed z-30 mt-6 flex w-full items-center justify-between px-12 text-center text-2xl font-bold">
-        <Button value="icon" className={headerButtonClassName} onClick={handleGoHome}>
-          <ArrowLeft className="h-6 w-6" />
-        </Button>
-        <h1>{story?.title}</h1>
-        <Button value="icon" className={headerButtonClassName}>
-          <Share2 className="h-6 w-6" />
-        </Button>
+      <div className="fixed left-0 top-0 z-30 w-full bg-gradient-to-b from-[#0C3E54] to-transparent">
+        <div className="flex items-center justify-between px-12 py-6 text-center text-2xl font-bold">
+          <Button value="icon" className={headerButtonClassName} onClick={handleGoHome}>
+            <ArrowLeft className="h-6 w-6" />
+          </Button>
+          <h1 className="font-notes font-normal">{story?.title}</h1>
+          <Button value="icon" className={headerButtonClassName}>
+            <Share2 className="h-6 w-6" />
+          </Button>
+        </div>
       </div>
       <ScrollProvider>
         {steps?.map((mapStep, index) => {

diff --git a/client/src/containers/story/steps/layouts/map-step.tsx b/client/src/containers/story/steps/layouts/map-step.tsx
@@ -11,9 +11,9 @@ import {
   StoryCategoryDataAttributes,
 } from '@/types/generated/strapi.schemas';
 
+import Chart from '@/components/chart';
 import CategoryIcon from '@/components/ui/category-icon';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import Chart from '@/components/chart';
 
 const Legend = dynamic(() => import('@/containers/map/legend'), {
   ssr: false,
@@ -52,7 +52,7 @@ const MapStepLayout = ({ step, category, showContent, stepIndex }: MapStepLayout
                 {story_summary?.map((item) => (
                   <div className="space-y-1" key={item.id}>
                     <div className="text-enlight-yellow-400 flex items-center gap-2">
-                      <h3 className=" tetx-sm font-bold uppercase">{item.title}</h3>
+                      <h2 className="tetx-sm font-bold uppercase">{item.title}</h2>
                       <Tooltip>
                         <TooltipTrigger>
                           <InfoIcon className="h-4 w-4" />
@@ -86,12 +86,12 @@ const MapStepLayout = ({ step, category, showContent, stepIndex }: MapStepLayout
                   showContent ? 'opacity-100' : 'opacity-0'
                 )}
               >
-                <div className="w-[500px] space-y-1">
-                  {item?.title && <h3 className="text-2xl font-bold">{item?.title}</h3>}
+                <div className="w-[400px] space-y-1">
+                  {item?.title && <h2 className="font-notes text-2xl font-bold">{item?.title}</h2>}
                   {!!item?.content && (
-                    <div className="space-y-4">
+                    <div className="font-open-sans space-y-4">
                       {item.content.split('\n').map((p, i) => (
-                        <p key={i} className="font-inter text-sm">
+                        <p key={i} className="text-sm">
                           {p}
                         </p>
                       ))}

diff --git a/client/src/styles/fonts.ts b/client/src/styles/fonts.ts
@@ -5,7 +5,7 @@ export const openSans = Open_Sans({
   subsets: ['latin'],
   variable: '--font-open-sans',
   fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
-  weight: ['300'],
+  weight: ['300', '400'],
   style: ['italic', 'normal'],
   display: 'block',
 });

diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css
@@ -73,6 +73,6 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased font-open-sans;
   }
 }