From f9581eb4115446988eb89907d0d60668cc642006 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 23 Feb 2024 01:18:36 +0700 Subject: [PATCH] updates to selection bubbles and added voices --- .../src/components/common/Alert/Alert.tsx | 6 +- .../SelectionBubbles/SelectionBubbles.scss | 49 +++++++++++++ .../SelectionBubbles/SelectionBubbles.tsx | 73 +++++++++++++++---- .../src/components/layout/TopNav/TopNav.tsx | 45 +++++++----- .../landing/fakeyou/FakeYouLandingHeader.tsx | 21 +++--- .../LandingDemo/FakeYouLandingDemo.tsx | 4 +- 6 files changed, 154 insertions(+), 44 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/Alert/Alert.tsx b/packages/fakeyou.com/src/components/common/Alert/Alert.tsx index 074f6f1cae..0d8b7e1952 100644 --- a/packages/fakeyou.com/src/components/common/Alert/Alert.tsx +++ b/packages/fakeyou.com/src/components/common/Alert/Alert.tsx @@ -22,6 +22,7 @@ interface AlertProps { icon?: IconProp; link?: string; linkText?: string; + className?: string; } function Alert({ @@ -32,6 +33,7 @@ function Alert({ icon, linkText, link, + className, }: AlertProps) { const [show, setShow] = useState(() => { const closedAt = localStorage.getItem(`alertClosedAt_${id}`); @@ -55,7 +57,9 @@ function Alert({ <> {show && (
{icon && } diff --git a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss index ce8794debd..689bc124af 100644 --- a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss +++ b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss @@ -1,11 +1,59 @@ @import "scss/colours.scss"; +.selection-bubbles-wrapper { + position: relative; + overflow: hidden; + transition: all 0.4s; + + .scroll-indicator { + position: absolute; + z-index: 2; + top: 50%; + right: 0px; + transform: translateY(-50%); + color: rgba($white, 0.2); + pointer-events: none; + transition: all 0.4s; + } + + &:after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 80px; + background: linear-gradient(to right, rgba($panel, 0), $panel); + pointer-events: none; + display: none; + transition: all 0.4s; + } + + &.show-gradient:after { + display: block; + transition: all 0.4s; + } +} + .selection-bubbles { display: flex; gap: 0.5rem; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } + + @media (min-width: 768px) { + flex-wrap: wrap; + justify-content: start; + overflow-x: visible; + } } .bubble-button { + flex: 0 0 auto; border: 2px solid darken($secondary, 3%); padding: 8px 16px; border-radius: 0.5rem; @@ -16,6 +64,7 @@ font-size: 15px; font-weight: 500; color: rgba($white, 0.75); + white-space: nowrap; } .bubble-button:hover { diff --git a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx index 3f7c8f88a0..356a04a4c3 100644 --- a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx +++ b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx @@ -1,5 +1,7 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import "./SelectionBubbles.scss"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faChevronRight } from "@fortawesome/pro-solid-svg-icons"; interface SelectionBubbleProps { options: string[]; @@ -14,6 +16,8 @@ export default function SelectionBubbles({ const [selectedOption, setSelectedOption] = useState( options.length > 0 ? options[0] : null ); + const [showGradient, setShowGradient] = useState(true); + const bubblesRef = useRef(null); const handleSelect = ( event: React.MouseEvent, @@ -31,19 +35,62 @@ export default function SelectionBubbles({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + const handleScroll = () => { + if (bubblesRef.current) { + const { scrollLeft, scrollWidth, clientWidth } = bubblesRef.current; + const isAtEnd = scrollWidth - Math.round(scrollLeft + clientWidth) <= 1; // Adjust tolerance as needed + setShowGradient(!isAtEnd); + } + }; + + const checkForOverflowContent = () => { + if (bubblesRef.current) { + const { scrollWidth, clientWidth } = bubblesRef.current; + const isOverflowing = scrollWidth > clientWidth; + setShowGradient(isOverflowing); + } + }; + + useEffect(() => { + checkForOverflowContent(); + window.addEventListener("resize", checkForOverflowContent); + return () => window.removeEventListener("resize", checkForOverflowContent); + }, [options]); + + useEffect(() => { + if (bubblesRef.current) { + bubblesRef.current.addEventListener("scroll", handleScroll); + return () => + // eslint-disable-next-line react-hooks/exhaustive-deps + bubblesRef.current?.removeEventListener("scroll", handleScroll); + } + }, []); + return ( -
- {options.map(option => ( - - ))} +
+
+ {options.map(option => ( + + ))} +
+ {showGradient && ( + + )}
); } diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index c14fd9c077..ca3447708a 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx @@ -213,15 +213,15 @@ export default function TopNav({
{/* Search Bar */}
- {(!isOnLandingPage || - loggedIn || - (isOnLandingPage && isScrolled)) && ( + {(!isOnLandingPage && !isOnLoginOrSignUpPage) || + (loggedIn && !isOnLoginOrSignUpPage) || + (isOnLandingPage && isScrolled && !isOnLoginOrSignUpPage) ? ( - )} + ) : null}
@@ -271,22 +271,27 @@ export default function TopNav({ )}
-