From 8affa30a9398f10c72a47ec74c4ce01eb389f559 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Mon, 4 Dec 2023 17:47:04 +0100 Subject: [PATCH 1/7] home story tooltip --- client/.env | 28 ++++++++++++ client/next.config.mjs | 2 +- client/src/containers/map/index.tsx | 6 ++- .../map/markers/home-markers/index.tsx | 2 + .../map/tooltips/home-tooltip/index.tsx | 45 +++++++++++++++++++ client/src/styles/mapbox.css | 13 ++++++ 6 files changed, 93 insertions(+), 3 deletions(-) create mode 100644 client/.env create mode 100644 client/src/containers/map/tooltips/home-tooltip/index.tsx diff --git a/client/.env b/client/.env new file mode 100644 index 0000000..5769b06 --- /dev/null +++ b/client/.env @@ -0,0 +1,28 @@ +# Public url. Canonical url of the project. +NEXT_PUBLIC_URL=http://localhost:3000 + +# Environment. Only for development. It will be provided by Vercel otherwise. +NEXT_PUBLIC_ENVIRONMENT=development + +# API Url. +# Development, Preview, Production +# Depending on the environment we will use different urls. It can be the same for the storybook and for the project. +# NEXT_PUBLIC_API_URL=http://localhost:1337/api +NEXT_PUBLIC_API_URL=https://esa-gda-comms-staging-mfafc.ondigitalocean.app/cms/api + +# Mapbox token +# Development, Preview, Production +# corresponding to the account used for this project. It can be the same for the storybook and for the project. +NEXT_PUBLIC_MAPBOX_API_TOKEN=pk.eyJ1Ijoidml6enVhbGl0eWVzYSIsImEiOiJjbHBiNDBiNHcwZWdmMnBybDg1a253eGpoIn0.XYSrGTkz6BoR6NPdx2_tDA + +# Google Analytics tracking ID. +# Development, Preview, Production +# If you're working with an Google Analytics 4 property, you have a Measurement ID instead of a Tracking ID. +NEXT_PUBLIC_GA_TRACKING_ID=UA-000000-2 + +# Recoil: Remove warnings about duplicate atoms due to hot-reloading +# Development +RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false + +NEXT_PUBLIC_PREVIEW_SECRET=preview-secret +``` \ No newline at end of file diff --git a/client/next.config.mjs b/client/next.config.mjs index a038048..6d92e6d 100644 --- a/client/next.config.mjs +++ b/client/next.config.mjs @@ -4,7 +4,7 @@ import('./src/env.mjs'); const nextConfig = { transpilePackages: ['@esa/types'], images: { - domains: ['api.mapbox.com', 'localhost'], + domains: ['api.mapbox.com', 'localhost', 'esa-gda-comms-staging-mfafc.ondigitalocean.app'], }, env: { RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED: 'false', diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx index 2a1c395..941bb39 100644 --- a/client/src/containers/map/index.tsx +++ b/client/src/containers/map/index.tsx @@ -37,9 +37,10 @@ import Map from '@/components/map'; // import Controls from '@/components/map/controls'; // import SettingsControl from '@/components/map/controls/settings'; // import ZoomControl from '@/components/map/controls/zoom'; -import Marker from '@/components/map/layers/marker'; import { CustomMapProps } from '@/components/map/types'; +import HomeTooltip from './tooltips/home-tooltip'; + const LayerManager = dynamic(() => import('@/containers/map/layer-manager'), { ssr: false, }); @@ -230,10 +231,11 @@ export default function MapContainer() { {isHomePage && } {marker && isHomePage && ( - { e.originalEvent.stopPropagation(); setMarker(null); diff --git a/client/src/containers/map/markers/home-markers/index.tsx b/client/src/containers/map/markers/home-markers/index.tsx index 21ba04d..4feaa70 100644 --- a/client/src/containers/map/markers/home-markers/index.tsx +++ b/client/src/containers/map/markers/home-markers/index.tsx @@ -37,9 +37,11 @@ const StoryMarkers = () => { geometry: { type: 'Point', coordinates: [attributes?.longitude, attributes?.latitude] }, properties: { category: attributes?.category?.data?.attributes?.slug, + categoryName: attributes?.category?.data?.attributes?.name, ifi: 'IFAD', status: 'completed', tags: ['nature'], + title: attributes?.title, }, }; }) || [], diff --git a/client/src/containers/map/tooltips/home-tooltip/index.tsx b/client/src/containers/map/tooltips/home-tooltip/index.tsx new file mode 100644 index 0000000..b0ffed2 --- /dev/null +++ b/client/src/containers/map/tooltips/home-tooltip/index.tsx @@ -0,0 +1,45 @@ +import { MarkerProps as RMarkerProps, Popup as RPopup } from 'react-map-gl'; + +import { cn } from '@/lib/classnames'; + +import { Button } from '@/components/ui/button'; +import CategoryIcon from '@/components/ui/category-icon'; + +interface HomeTooltipProps extends RMarkerProps { + properties: GeoJSON.GeoJsonProperties; +} + +const HomeTooltip = (props: HomeTooltipProps) => { + const { properties, onClick } = props; + + return ( + +
+
+ +

{properties?.categoryName}

+
+

{properties?.title}

+

{properties?.location}

+ +
+ + ); +}; + +export default HomeTooltip; diff --git a/client/src/styles/mapbox.css b/client/src/styles/mapbox.css index f6bdefe..4c4ef7d 100644 --- a/client/src/styles/mapbox.css +++ b/client/src/styles/mapbox.css @@ -632,3 +632,16 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact { #home-globe .mapboxgl-ctrl-logo { display: none; } + + +.home-tooltip { + .mapboxgl-popup-close-button { + display: none; + } + .mapboxgl-popup-content { + background: transparent; + } + .mapboxgl-popup-tip { + display: none; + } +} \ No newline at end of file From 6aabc4d9bfe75cdb8188d5de73f7f3273c600afc Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Mon, 4 Dec 2023 17:55:09 +0100 Subject: [PATCH 2/7] ignore env --- client/.env | 28 ---------------------------- 1 file changed, 28 deletions(-) delete mode 100644 client/.env diff --git a/client/.env b/client/.env deleted file mode 100644 index 5769b06..0000000 --- a/client/.env +++ /dev/null @@ -1,28 +0,0 @@ -# Public url. Canonical url of the project. -NEXT_PUBLIC_URL=http://localhost:3000 - -# Environment. Only for development. It will be provided by Vercel otherwise. -NEXT_PUBLIC_ENVIRONMENT=development - -# API Url. -# Development, Preview, Production -# Depending on the environment we will use different urls. It can be the same for the storybook and for the project. -# NEXT_PUBLIC_API_URL=http://localhost:1337/api -NEXT_PUBLIC_API_URL=https://esa-gda-comms-staging-mfafc.ondigitalocean.app/cms/api - -# Mapbox token -# Development, Preview, Production -# corresponding to the account used for this project. It can be the same for the storybook and for the project. -NEXT_PUBLIC_MAPBOX_API_TOKEN=pk.eyJ1Ijoidml6enVhbGl0eWVzYSIsImEiOiJjbHBiNDBiNHcwZWdmMnBybDg1a253eGpoIn0.XYSrGTkz6BoR6NPdx2_tDA - -# Google Analytics tracking ID. -# Development, Preview, Production -# If you're working with an Google Analytics 4 property, you have a Measurement ID instead of a Tracking ID. -NEXT_PUBLIC_GA_TRACKING_ID=UA-000000-2 - -# Recoil: Remove warnings about duplicate atoms due to hot-reloading -# Development -RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false - -NEXT_PUBLIC_PREVIEW_SECRET=preview-secret -``` \ No newline at end of file From b94b9cceb4942172ddd1c8e558767e1ee399865c Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Mon, 4 Dec 2023 18:39:35 +0100 Subject: [PATCH 3/7] animate tooltip and decrease max zoom --- client/src/containers/map/index.tsx | 2 +- client/src/containers/map/tooltips/home-tooltip/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx index 941bb39..9b8e801 100644 --- a/client/src/containers/map/index.tsx +++ b/client/src/containers/map/index.tsx @@ -56,7 +56,7 @@ const DEFAULT_PROPS: CustomMapProps = { // bounds: [-159.86, 6.31, -65.75, 60.67], }, minZoom: 2, - maxZoom: 20, + maxZoom: 14, }; const FOG = { diff --git a/client/src/containers/map/tooltips/home-tooltip/index.tsx b/client/src/containers/map/tooltips/home-tooltip/index.tsx index b0ffed2..db4bdb0 100644 --- a/client/src/containers/map/tooltips/home-tooltip/index.tsx +++ b/client/src/containers/map/tooltips/home-tooltip/index.tsx @@ -16,7 +16,7 @@ const HomeTooltip = (props: HomeTooltipProps) => { From 2a930af8b26730f6ad748affb1e3fa67a9c4840f Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Mon, 4 Dec 2023 18:58:26 +0100 Subject: [PATCH 4/7] fix click on tooltip --- client/src/containers/map/index.tsx | 3 +-- client/src/containers/map/tooltips/home-tooltip/index.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx index 9b8e801..7f73728 100644 --- a/client/src/containers/map/index.tsx +++ b/client/src/containers/map/index.tsx @@ -236,8 +236,7 @@ export default function MapContainer() { longitude={marker.geometry.coordinates[0]} latitude={marker.geometry.coordinates[1]} properties={marker.properties} - onClick={(e) => { - e.originalEvent.stopPropagation(); + onClick={() => { setMarker(null); push(`/stories/${marker.id}`); }} diff --git a/client/src/containers/map/tooltips/home-tooltip/index.tsx b/client/src/containers/map/tooltips/home-tooltip/index.tsx index db4bdb0..d682bec 100644 --- a/client/src/containers/map/tooltips/home-tooltip/index.tsx +++ b/client/src/containers/map/tooltips/home-tooltip/index.tsx @@ -33,7 +33,7 @@ const HomeTooltip = (props: HomeTooltipProps) => { From b639399bc0f5cf7a3e73882450a2fb063823e314 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Mon, 4 Dec 2023 19:24:30 +0100 Subject: [PATCH 5/7] fix scroll story dots styles --- client/src/containers/story/index.tsx | 4 ++-- client/tailwind.config.js | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/client/src/containers/story/index.tsx b/client/src/containers/story/index.tsx index dee42e1..ce82010 100644 --- a/client/src/containers/story/index.tsx +++ b/client/src/containers/story/index.tsx @@ -108,8 +108,8 @@ const Story = () => { {steps?.map((_, index) => ( Date: Mon, 4 Dec 2023 20:10:10 +0100 Subject: [PATCH 6/7] doots tooltip --- client/src/containers/story/index.tsx | 5 ++-- .../steps/controller/controller-item.tsx | 24 +++++++++++++++++-- .../story/steps/layouts/map-step.tsx | 4 +--- 3 files changed, 26 insertions(+), 7 deletions(-) diff --git a/client/src/containers/story/index.tsx b/client/src/containers/story/index.tsx index ce82010..91c8962 100644 --- a/client/src/containers/story/index.tsx +++ b/client/src/containers/story/index.tsx @@ -104,8 +104,8 @@ const Story = () => { ); })} -
- {steps?.map((_, index) => ( +
+ {steps?.map((s, index) => ( { )} key={index} newStep={index} + title={s.attributes?.layout[0]?.card && s.attributes?.layout[0]?.card[0]?.title} /> ))}
diff --git a/client/src/containers/story/steps/controller/controller-item.tsx b/client/src/containers/story/steps/controller/controller-item.tsx index 3796a52..803f848 100644 --- a/client/src/containers/story/steps/controller/controller-item.tsx +++ b/client/src/containers/story/steps/controller/controller-item.tsx @@ -7,13 +7,15 @@ import { useScrollToItem } from '@/lib/scroll'; import { stepAtom } from '@/store/stories'; import { Button } from '@/components/ui/button'; +import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; type ScrollItemControllerProps = { + title: string; newStep: number | string; className?: string; }; -export const ScrollItemController = ({ newStep, className }: ScrollItemControllerProps) => { +export const ScrollItemController = ({ title, newStep, className }: ScrollItemControllerProps) => { const scrollToItem = useScrollToItem(); const currStep = useRecoilValue(stepAtom); @@ -24,5 +26,23 @@ export const ScrollItemController = ({ newStep, className }: ScrollItemControlle } }, [currStep, newStep, scrollToItem]); - return