From 5cfbf06d465662022b6d3623158e2f2b52bcfc14 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 13 Nov 2024 14:37:50 +0100 Subject: [PATCH 1/6] Hide not displayed tooltip --- frontend/src/components/ToolTip/ToolTip.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/ToolTip/ToolTip.tsx b/frontend/src/components/ToolTip/ToolTip.tsx index ab6f13a93..87ca1d18a 100644 --- a/frontend/src/components/ToolTip/ToolTip.tsx +++ b/frontend/src/components/ToolTip/ToolTip.tsx @@ -29,8 +29,8 @@ const ToolTipGT: FC = ({ className={cn( 'tooltipSpan', 'relative absolute left-1/2 -translate-x-1/2 p-1.5 text-center rounded-md z-1', - 'w-0 invisible', - 'group-hover:w-max group-hover:visible', + 'w-0 hidden', + 'group-hover:w-max group-hover:inline', "after:content-[''] after:block after:absolute after:left-1/2 after:-ml-1 after:border-4 after:border-transparent", invertPosition ? 'top-full after:bottom-full after:border-b-primary1' From eb1bcee87f222e5de570a69bcac08b53ee35cf62 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 30 Oct 2024 17:29:47 +0100 Subject: [PATCH 2/6] Increase z-index loader --- frontend/tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index abb07d3ba..2e4900c7d 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -79,10 +79,10 @@ module.exports = { 20: 20, leafletSvg: 200, text: 200, - loader: 300, floatingButton: 300, header: 500, subHeader: 450, + loader: 460, headerDetails: 300, sliderMenu: 900, map: 1000, From 5f4f1825c8cc795a02111b95abc2105974073b11 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 30 Oct 2024 16:35:10 +0100 Subject: [PATCH 3/6] Define previousRouter state --- frontend/src/hooks/useBrowserNavigationDetection.ts | 9 +++++++-- frontend/src/modules/map/ListAndMapContext.tsx | 6 +++++- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/frontend/src/hooks/useBrowserNavigationDetection.ts b/frontend/src/hooks/useBrowserNavigationDetection.ts index 33b78e8ce..c84645b76 100644 --- a/frontend/src/hooks/useBrowserNavigationDetection.ts +++ b/frontend/src/hooks/useBrowserNavigationDetection.ts @@ -1,4 +1,4 @@ -import { useRouter } from 'next/router'; +import { NextRouter, useRouter } from 'next/router'; import { useEffect, useRef, useState } from 'react'; // Returns “true” if the page is displayed using the browser's "back" or "forward" buttons @@ -6,6 +6,7 @@ const useBrowserNavigationDetection = () => { const router = useRouter(); const isNavigatedByBrowserRef = useRef(false); const [isNavigatedByBrowser, setNavigatedByBrowser] = useState(false); + const [previousRouter, setPreviousRouter] = useState(null); useEffect(() => { router.beforePopState(() => { @@ -22,6 +23,7 @@ const useBrowserNavigationDetection = () => { } else { setNavigatedByBrowser(false); } + setPreviousRouter(router); }; router.events.on('routeChangeStart', handleRouteChangeStart); @@ -32,7 +34,10 @@ const useBrowserNavigationDetection = () => { }; }, [router]); - return isNavigatedByBrowser; + return { + isNavigatedByBrowser, + previousRouter, + }; }; export default useBrowserNavigationDetection; diff --git a/frontend/src/modules/map/ListAndMapContext.tsx b/frontend/src/modules/map/ListAndMapContext.tsx index 958581bc5..d0f9873e0 100644 --- a/frontend/src/modules/map/ListAndMapContext.tsx +++ b/frontend/src/modules/map/ListAndMapContext.tsx @@ -1,6 +1,7 @@ import { createContext, useContext, useState } from 'react'; import { LatLngBounds } from 'leaflet'; import useBrowserNavigationDetection from 'hooks/useBrowserNavigationDetection'; +import { NextRouter } from 'next/router'; import { MapResults } from '../mapResults/interface'; export interface ListAndMapContext { @@ -11,6 +12,7 @@ export interface ListAndMapContext { setHoveredCardId: (hoveredCardId: string | null) => void; setSearchBbox: (bbox: LatLngBounds | null) => void; isNavigatedByBrowser: boolean; + previousRouter: NextRouter | null; } const listAndMapContext = createContext({ @@ -21,6 +23,7 @@ const listAndMapContext = createContext({ setHoveredCardId: (_: string | null) => _, setSearchBbox: (_: LatLngBounds | null) => _, isNavigatedByBrowser: false, + previousRouter: null, }); export const useListAndMapContext = () => useContext(listAndMapContext); @@ -30,7 +33,7 @@ export const ListAndMapProvider: React.FC = ({ children const [points, setPoints] = useState([]); const [searchBbox, setSearchBbox] = useState(null); - const isNavigatedByBrowser = useBrowserNavigationDetection(); + const { isNavigatedByBrowser, previousRouter } = useBrowserNavigationDetection(); return ( = ({ children searchBbox, setSearchBbox, isNavigatedByBrowser, + previousRouter, }} > {children} From 7be534e4dd84c170c934e6f96ebdb505e5ad3720 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 30 Oct 2024 17:13:47 +0100 Subject: [PATCH 4/6] Optimize animation details header mobile --- .../src/components/pages/details/Details.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/pages/details/Details.tsx b/frontend/src/components/pages/details/Details.tsx index ddbc68326..5729263f7 100644 --- a/frontend/src/components/pages/details/Details.tsx +++ b/frontend/src/components/pages/details/Details.tsx @@ -736,15 +736,17 @@ export const DetailsHeaderMobile: React.FC = ({ title: return (
- {name} + {name}
); }; From 86fc65cdf0c0e71d773f0d03a42768fca907c57c Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 30 Oct 2024 17:28:56 +0100 Subject: [PATCH 5/6] Create DetailsGoBack button --- .../DetailsPreview/DetailsBackButton.tsx | 34 +++++++++++++++++++ frontend/src/translations/ca.json | 3 +- frontend/src/translations/de.json | 3 +- frontend/src/translations/en.json | 3 +- frontend/src/translations/es.json | 3 +- frontend/src/translations/fr.json | 3 +- frontend/src/translations/it.json | 3 +- 7 files changed, 46 insertions(+), 6 deletions(-) create mode 100644 frontend/src/components/pages/details/components/DetailsPreview/DetailsBackButton.tsx diff --git a/frontend/src/components/pages/details/components/DetailsPreview/DetailsBackButton.tsx b/frontend/src/components/pages/details/components/DetailsPreview/DetailsBackButton.tsx new file mode 100644 index 000000000..db7b8d82c --- /dev/null +++ b/frontend/src/components/pages/details/components/DetailsPreview/DetailsBackButton.tsx @@ -0,0 +1,34 @@ +import React, { HTMLAttributes } from 'react'; +import { cn } from 'services/utils/cn'; +import { ArrowLeft } from 'components/Icons/ArrowLeft'; +import { useRouter } from 'next/router'; +import { useListAndMapContext } from 'modules/map/ListAndMapContext'; +import ToolTip from 'components/ToolTip'; +import { useIntl } from 'react-intl'; + +export const DetailsBackButton: React.FC> = ({ className }) => { + const router = useRouter(); + const { previousRouter } = useListAndMapContext(); + const intl = useIntl(); + + if (!previousRouter?.asPath.startsWith('/search')) { + return null; + } + + return ( +
+ + + +
+ ); +}; diff --git a/frontend/src/translations/ca.json b/frontend/src/translations/ca.json index 61139b09e..789530b9e 100644 --- a/frontend/src/translations/ca.json +++ b/frontend/src/translations/ca.json @@ -179,7 +179,8 @@ "centerOnMap": "Center on map", "openPictureInFullScreen": "View picture in full screen", "closeFullScreen": "Close full screen mode", - "contact": "Contacte" + "contact": "Contacte", + "goBack": "Tornar enrere" }, "touristicContent": { "email": "Correu electrònic", diff --git a/frontend/src/translations/de.json b/frontend/src/translations/de.json index 97a02bc90..1b5f475ee 100644 --- a/frontend/src/translations/de.json +++ b/frontend/src/translations/de.json @@ -179,7 +179,8 @@ "centerOnMap": "Center on map", "openPictureInFullScreen": "View picture in full screen", "closeFullScreen": "Close full screen mode", - "contact": "Kontakt" + "contact": "Kontakt", + "goBack": "Zurückgehen" }, "touristicContent": { "email": "Email", diff --git a/frontend/src/translations/en.json b/frontend/src/translations/en.json index dc5257547..eecf853d0 100644 --- a/frontend/src/translations/en.json +++ b/frontend/src/translations/en.json @@ -182,7 +182,8 @@ "centerOnMap": "Center on map", "openPictureInFullScreen": "View picture in full screen", "closeFullScreen": "Close full screen mode", - "contact": "Contact" + "contact": "Contact", + "goBack": "Go back" }, "touristicContent": { "email": "Email", diff --git a/frontend/src/translations/es.json b/frontend/src/translations/es.json index 793266338..df90b65e4 100644 --- a/frontend/src/translations/es.json +++ b/frontend/src/translations/es.json @@ -179,7 +179,8 @@ "centerOnMap": "Center on map", "openPictureInFullScreen": "View picture in full screen", "closeFullScreen": "Close full screen mode", - "contact": "Contacto" + "contact": "Contacto", + "goBack": "Volver atrás" }, "touristicContent": { "email": "Correo electrónico", diff --git a/frontend/src/translations/fr.json b/frontend/src/translations/fr.json index f68a09322..639d7261d 100644 --- a/frontend/src/translations/fr.json +++ b/frontend/src/translations/fr.json @@ -182,7 +182,8 @@ "centerOnMap": "Centrer sur la carte", "openPictureInFullScreen": "Voir l'image en plein écran", "closeFullScreen": "Fermer le mode plein écran", - "contact": "Contact" + "contact": "Contact", + "goBack": "Retour" }, "touristicContent": { "email": "Courriel", diff --git a/frontend/src/translations/it.json b/frontend/src/translations/it.json index c81a5e3d9..8caea863e 100644 --- a/frontend/src/translations/it.json +++ b/frontend/src/translations/it.json @@ -182,7 +182,8 @@ "centerOnMap": "Center on map", "openPictureInFullScreen": "View picture in full screen", "closeFullScreen": "Close full screen mode", - "contact": "Contatto" + "contact": "Contatto", + "goBack": "Torna indietro" }, "touristicContent": { "email": "email", From 7333d0943136ecbfe6b82d0e09a94eb12a54261a Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 30 Oct 2024 17:29:28 +0100 Subject: [PATCH 6/6] Display DetailsGoBack on details page --- frontend/src/components/pages/details/Details.tsx | 2 ++ .../details/components/DetailsHeader/DetailsHeader.tsx | 8 +++++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/pages/details/Details.tsx b/frontend/src/components/pages/details/Details.tsx index 5729263f7..89bdaf7e2 100644 --- a/frontend/src/components/pages/details/Details.tsx +++ b/frontend/src/components/pages/details/Details.tsx @@ -49,6 +49,7 @@ import { useDetailsSections } from './useDetailsSections'; import { DetailsViewPoints } from './components/DetailsViewPoints'; import { DetailsFiles } from './components/DetailsFiles'; import { theme } from '../../../../tailwind.config'; +import { DetailsBackButton } from './components/DetailsPreview/DetailsBackButton'; interface Props { slug: string | string[] | undefined; @@ -746,6 +747,7 @@ export const DetailsHeaderMobile: React.FC = ({ title: 'transition-transform duration-500 will-change-transform', )} > + {name} ); diff --git a/frontend/src/components/pages/details/components/DetailsHeader/DetailsHeader.tsx b/frontend/src/components/pages/details/components/DetailsHeader/DetailsHeader.tsx index 902eed246..31553ecff 100644 --- a/frontend/src/components/pages/details/components/DetailsHeader/DetailsHeader.tsx +++ b/frontend/src/components/pages/details/components/DetailsHeader/DetailsHeader.tsx @@ -11,6 +11,7 @@ import { TouristicEventDetails } from 'modules/touristicEvent/interface'; import { ContentType } from 'modules/interface'; import { DetailsHeaderSection, DetailsSections } from '../../useDetails'; import { useDetailsHeader } from './useDetailsHeader'; +import { DetailsBackButton } from '../DetailsPreview/DetailsBackButton'; interface DetailsHeaderProps { anchors: Partial[]; @@ -42,16 +43,17 @@ export const DetailsHeader: React.FC = ({ id="details_headerDesktop" className="hidden desktop:flex items-center sticky top-desktopHeader z-subHeader - shadow-md bg-white h-14" + shadow-md bg-white h-14 pl-3" role="navigation" > + {sections.length > 0 && ( -
    +
      {sections.map(sectionId => (