From a219680701c6d8121f5df2cff4ce6caa8a2fb29b Mon Sep 17 00:00:00 2001 From: ingawei <46611122+ingawei@users.noreply.github.com> Date: Fri, 30 Sep 2022 15:16:27 -0500 Subject: [PATCH] Inga/scroll to top (#965) - adding scroll to top button for markets, removing predict button at the bottom of comments --- web/components/bet-button.tsx | 8 +++- web/components/play-money-disclaimer.tsx | 2 +- web/components/scroll-to-top-button.tsx | 47 ++++++++++++++++++++++++ web/pages/[username]/[contractSlug].tsx | 22 +---------- 4 files changed, 57 insertions(+), 22 deletions(-) create mode 100644 web/components/scroll-to-top-button.tsx diff --git a/web/components/bet-button.tsx b/web/components/bet-button.tsx index 808b450f..3c401767 100644 --- a/web/components/bet-button.tsx +++ b/web/components/bet-button.tsx @@ -17,6 +17,7 @@ import { BetSignUpPrompt } from './sign-up-prompt' import { User } from 'web/lib/firebase/users' import { SellRow } from './sell-row' import { useUnfilledBets } from 'web/hooks/use-bets' +import { PlayMoneyDisclaimer } from './play-money-disclaimer' /** Button that opens BetPanel in a new modal */ export default function BetButton(props: { @@ -85,7 +86,12 @@ export function BinaryMobileBetting(props: { contract: BinaryContract }) { if (user) { return } else { - return + return ( + + + + + ) } } diff --git a/web/components/play-money-disclaimer.tsx b/web/components/play-money-disclaimer.tsx index 860075d0..190d03db 100644 --- a/web/components/play-money-disclaimer.tsx +++ b/web/components/play-money-disclaimer.tsx @@ -3,7 +3,7 @@ import { InfoBox } from './info-box' export const PlayMoneyDisclaimer = () => ( ) diff --git a/web/components/scroll-to-top-button.tsx b/web/components/scroll-to-top-button.tsx new file mode 100644 index 00000000..18eb525c --- /dev/null +++ b/web/components/scroll-to-top-button.tsx @@ -0,0 +1,47 @@ +import { ArrowUpIcon } from '@heroicons/react/solid' +import clsx from 'clsx' +import { useEffect, useState } from 'react' +import { Row } from './layout/row' + +export function ScrollToTopButton(props: { className?: string }) { + const { className } = props + const [visible, setVisible] = useState(false) + + useEffect(() => { + const onScroll = () => { + if (window.scrollY > 500) { + setVisible(true) + } else { + setVisible(false) + } + } + window.addEventListener('scroll', onScroll, { passive: true }) + + return () => { + window.removeEventListener('scroll', onScroll) + } + }, []) + + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }) + } + + return ( + + ) +} diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx index 93b53447..9b8b21cb 100644 --- a/web/pages/[username]/[contractSlug].tsx +++ b/web/pages/[username]/[contractSlug].tsx @@ -42,12 +42,10 @@ import { ContractsGrid } from 'web/components/contract/contracts-grid' import { Title } from 'web/components/title' import { usePrefetch } from 'web/hooks/use-prefetch' import { useAdmin } from 'web/hooks/use-admin' -import { BetSignUpPrompt } from 'web/components/sign-up-prompt' -import { PlayMoneyDisclaimer } from 'web/components/play-money-disclaimer' -import BetButton from 'web/components/bet-button' import { BetsSummary } from 'web/components/bet-summary' import { listAllComments } from 'web/lib/firebase/comments' import { ContractComment } from 'common/comment' +import { ScrollToTopButton } from 'web/components/scroll-to-top-button' export const getStaticProps = fromPropz(getStaticPropz) export async function getStaticPropz(props: { @@ -210,7 +208,6 @@ export function ContractPageContent( {showConfetti && ( )} - {ogCardProps && ( )} - {backToHome && (