From 3266f501c76ad656a4d85f6c5d645a47f25b1aa5 Mon Sep 17 00:00:00 2001 From: Brent Guffens <16427929+brentguf@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:30:37 +0100 Subject: [PATCH 01/18] WIP --- .../IdeasWithFiltersSidebar/ContentRight.tsx | 31 ++-- .../app/containers/ProjectsShowPage/index.tsx | 136 +++++++++++------- 2 files changed, 104 insertions(+), 63 deletions(-) diff --git a/front/app/components/IdeaCards/IdeasWithFiltersSidebar/ContentRight.tsx b/front/app/components/IdeaCards/IdeasWithFiltersSidebar/ContentRight.tsx index 0de0b9451b76..b907f8f789a8 100644 --- a/front/app/components/IdeaCards/IdeasWithFiltersSidebar/ContentRight.tsx +++ b/front/app/components/IdeaCards/IdeasWithFiltersSidebar/ContentRight.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import { Title } from '@citizenlab/cl2-component-library'; import styled from 'styled-components'; @@ -7,6 +7,7 @@ import { IIdeasFilterCounts } from 'api/ideas_filter_counts/types'; import { IdeaSortMethod } from 'api/phases/types'; import { QueryParameters } from 'containers/IdeasIndexPage'; +import { useIsCTABarSticky } from 'containers/ProjectsShowPage'; import { ScreenReaderOnly } from 'utils/a11y'; import { FormattedMessage } from 'utils/cl-intl'; @@ -62,28 +63,28 @@ const ContentRight = ({ onChangeTopics, onChangeSort, }: Props) => { - const [isCTABarVisible, setIsCTABarVisible] = useState(false); + const isCTABarSticky = useIsCTABarSticky(); - useEffect(() => { - function checkCTABarVisibility() { - if (document.getElementById('project-cta-bar')) { - setIsCTABarVisible(true); - return; - } + // useEffect(() => { + // function checkCTABarVisibility() { + // if (document.getElementById('project-cta-bar')) { + // setIsCTABarVisible(true); + // return; + // } - setIsCTABarVisible(false); - } + // setIsCTABarVisible(false); + // } - window.addEventListener('scrollend', checkCTABarVisibility); - return () => window.removeEventListener('scrollend', checkCTABarVisibility); - }, []); + // window.addEventListener('scrollend', checkCTABarVisibility); + // return () => window.removeEventListener('scrollend', checkCTABarVisibility); + // }, []); return ( {/* diff --git a/front/app/containers/ProjectsShowPage/index.tsx b/front/app/containers/ProjectsShowPage/index.tsx index 4d1407bc7cab..cbacee932b7e 100644 --- a/front/app/containers/ProjectsShowPage/index.tsx +++ b/front/app/containers/ProjectsShowPage/index.tsx @@ -1,4 +1,10 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React, { + useEffect, + useMemo, + useState, + createContext, + useContext, +} from 'react'; import { Box, @@ -72,9 +78,14 @@ interface Props { project: IProjectData; } +const Context = createContext(false); +export const useIsCTABarSticky = () => useContext(Context); + const ProjectsShowPage = ({ project }: Props) => { const projectId = project.id; + const [isCTABarSticky, setIsCTABarSticky] = useState(false); + const isSmallerThanPhone = useBreakpoint('tablet'); const isSmallerThanTablet = useBreakpoint('tablet'); const { formatMessage } = useIntl(); const [mounted, setMounted] = useState(false); @@ -95,6 +106,33 @@ const ProjectsShowPage = ({ project }: Props) => { return anyIsUndefined(locale, appConfig, project, phases?.data, events); }, [locale, appConfig, project, phases, events]); + useEffect(() => { + const handleScroll = () => { + const actionButtonElement = document.getElementById( + 'participation-detail' + ); + const actionButtonYOffset = actionButtonElement + ? actionButtonElement.getBoundingClientRect().top + window.scrollY + : undefined; + + setIsCTABarSticky( + !!( + actionButtonElement && + actionButtonYOffset && + window.scrollY > actionButtonYOffset - (isSmallerThanTablet ? 14 : 30) + ) + ); + }; + + if (isSmallerThanPhone) { + setIsCTABarSticky(true); + } else { + window.addEventListener('scroll', handleScroll, { passive: true }); + } + + return () => window.removeEventListener('scroll', handleScroll); + }, [isSmallerThanTablet, isSmallerThanPhone]); + // Check that all child components are mounted useEffect(() => { setMounted(true); @@ -130,53 +168,55 @@ const ProjectsShowPage = ({ project }: Props) => { {loading ? ( ) : ( - - - - -
- -
- {!!events?.data.length && ( - - - - - )} - - + + + + + +
+ +
+ {!!events?.data.length && ( + + + + + )} + + + )} From c9d507ae3bcfc03684430801a05c06404235aa0b Mon Sep 17 00:00:00 2001 From: brentguf Date: Tue, 10 Dec 2024 23:03:04 +0100 Subject: [PATCH 02/18] WIP 2 --- .../IdeasWithFiltersSidebar/ContentRight.tsx | 21 +-- front/app/containers/App/index.tsx | 3 - front/app/containers/PlatformFooter/index.tsx | 145 ++++++++---------- .../ProjectsShowPage/ProjectCTABar/index.tsx | 91 ++++------- .../app/containers/ProjectsShowPage/index.tsx | 135 ++++++---------- 5 files changed, 147 insertions(+), 248 deletions(-) diff --git a/front/app/components/IdeaCards/IdeasWithFiltersSidebar/ContentRight.tsx b/front/app/components/IdeaCards/IdeasWithFiltersSidebar/ContentRight.tsx index b907f8f789a8..60eecc9f28a3 100644 --- a/front/app/components/IdeaCards/IdeasWithFiltersSidebar/ContentRight.tsx +++ b/front/app/components/IdeaCards/IdeasWithFiltersSidebar/ContentRight.tsx @@ -7,7 +7,6 @@ import { IIdeasFilterCounts } from 'api/ideas_filter_counts/types'; import { IdeaSortMethod } from 'api/phases/types'; import { QueryParameters } from 'containers/IdeasIndexPage'; -import { useIsCTABarSticky } from 'containers/ProjectsShowPage'; import { ScreenReaderOnly } from 'utils/a11y'; import { FormattedMessage } from 'utils/cl-intl'; @@ -63,28 +62,14 @@ const ContentRight = ({ onChangeTopics, onChangeSort, }: Props) => { - const isCTABarSticky = useIsCTABarSticky(); - - // useEffect(() => { - // function checkCTABarVisibility() { - // if (document.getElementById('project-cta-bar')) { - // setIsCTABarVisible(true); - // return; - // } - - // setIsCTABarVisible(false); - // } - - // window.addEventListener('scrollend', checkCTABarVisibility); - // return () => window.removeEventListener('scrollend', checkCTABarVisibility); - // }, []); + const stickyTop = document.getElementById('project-cta-bar-top'); return ( {/* diff --git a/front/app/containers/App/index.tsx b/front/app/containers/App/index.tsx index f41b7678cf19..7c8008fe47c3 100644 --- a/front/app/containers/App/index.tsx +++ b/front/app/containers/App/index.tsx @@ -333,9 +333,6 @@ const App = ({ children }: Props) => {