diff --git a/packages/web/components/templates/discoverFeed/DiscoverHeader/PinnedFeeds.tsx b/packages/web/components/templates/discoverFeed/DiscoverHeader/PinnedFeeds.tsx index ebe0229b1..44547f046 100644 --- a/packages/web/components/templates/discoverFeed/DiscoverHeader/PinnedFeeds.tsx +++ b/packages/web/components/templates/discoverFeed/DiscoverHeader/PinnedFeeds.tsx @@ -30,7 +30,7 @@ export const PinnedFeeds = (props: PinnedFeedsProps): JSX.Element => { // overflowX: 'scroll', }} > - {[{ title: "All Feeds", id:"All Feeds" }, ...props.items.map(({visibleName, id}) => ({ title: visibleName, id }))].map((it) => { + {[{ title: "All Feeds", id:"All Feeds" }, ...props.items.map(({visibleName, id}) => ({ title: visibleName, id }))].map((it) => { const style = it.id == props.selected ? 'ctaPill' : 'ctaPillUnselected' return ( diff --git a/packages/web/components/templates/discoverFeed/DiscoverHeader/SmallTopicBar.tsx b/packages/web/components/templates/discoverFeed/DiscoverHeader/SmallTopicBar.tsx index d625322cc..123c92a7b 100644 --- a/packages/web/components/templates/discoverFeed/DiscoverHeader/SmallTopicBar.tsx +++ b/packages/web/components/templates/discoverFeed/DiscoverHeader/SmallTopicBar.tsx @@ -11,7 +11,6 @@ export type TopicBarProps = { } export function SmallTopicBar(props: TopicBarProps): JSX.Element { const [overflowing, setOverflowing] = useState(false) - let scrollToken: NodeJS.Timer | null = null const topicParent = useRef(null) const topicChild = useRef(null) @@ -37,18 +36,11 @@ export function SmallTopicBar(props: TopicBarProps): JSX.Element { } }, []) - const scroll = (rightOrLeft: 'right' | 'left') => () => { - const offset = rightOrLeft == 'right' ? +1 : -1 - scrollToken = setInterval(() => { - if (topicChild.current) { - topicChild.current.scrollLeft += offset - } - }) - } - - const clearScroll = () => { - clearInterval(scrollToken as NodeJS.Timeout) - scrollToken = null + const scroll = (rightOrLeft: 'right' | 'left', interval = 1) => () => { + const offset = rightOrLeft == 'right' ? +interval : -interval + if (topicChild.current) { + topicChild.current.scrollLeft += offset + } } return ( @@ -76,13 +68,17 @@ export function SmallTopicBar(props: TopicBarProps): JSX.Element { minWidth: '40px', width: '40px', }} - onMouseEnter={scroll('left')} - onMouseLeave={clearScroll} + onClick={scroll('left', 20)} /> {(props.topics ?? []).map((topic) => { @@ -106,8 +102,7 @@ export function SmallTopicBar(props: TopicBarProps): JSX.Element { minWidth: '40px', width: '40px', }} - onMouseEnter={scroll('right')} - onMouseLeave={clearScroll} + onClick={scroll('right', 20)} /> diff --git a/packages/web/components/templates/discoverFeed/DiscoverHeader/SmallerHeaderLayout.tsx b/packages/web/components/templates/discoverFeed/DiscoverHeader/SmallerHeaderLayout.tsx index 96e741e7e..2161ee045 100644 --- a/packages/web/components/templates/discoverFeed/DiscoverHeader/SmallerHeaderLayout.tsx +++ b/packages/web/components/templates/discoverFeed/DiscoverHeader/SmallerHeaderLayout.tsx @@ -6,6 +6,7 @@ import { FunnelSimple } from '@phosphor-icons/react' import { DiscoverHeaderProps } from './DiscoverHeader' import { SmallTopicBar } from './SmallTopicBar' import { PrimaryDropdown } from '../../PrimaryDropdown' +import { PinnedFeeds } from './PinnedFeeds' export function SmallHeaderLayout(props: DiscoverHeaderProps): JSX.Element { return ( @@ -13,12 +14,12 @@ export function SmallHeaderLayout(props: DiscoverHeaderProps): JSX.Element { alignment="center" distribution="start" css={{ - width: '100%', + width: '100vw', height: '100%', - pt: '10px', + pt: '20px', pb: '10px', - pr: '20px', - bg: '$thBackground3', + pl: '50px', + bg: '$thReaderBg', '@md': { display: 'none', }, @@ -26,50 +27,27 @@ export function SmallHeaderLayout(props: DiscoverHeaderProps): JSX.Element { > <> + + + ) } - -type MenuHeaderButtonProps = { - showFilterMenu: boolean - setShowFilterMenu: (show: boolean) => void -} - -export function MenuHeaderButton(props: MenuHeaderButtonProps): JSX.Element { - return ( - { - props.setShowFilterMenu(!props.showFilterMenu) - }} - > - - - - ) -} diff --git a/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverHoverActions.tsx b/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverHoverActions.tsx index d576abd16..10ea78587 100644 --- a/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverHoverActions.tsx +++ b/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverHoverActions.tsx @@ -4,7 +4,7 @@ import { Button } from '../../../elements/Button' import { theme } from '../../../tokens/stitches.config' import { BookmarkSimple, - Browsers, Eye, EyeSlash, + Book, Eye, EyeSlash, MinusCircle, PlusCircle } from "@phosphor-icons/react" @@ -13,6 +13,7 @@ import React from 'react' import { SaveDiscoverArticleOutput } from '../../../../lib/networking/mutations/saveDiscoverArticle' import { DiscoverFeedItem } from '../../../../lib/networking/queries/useGetDiscoverFeedItems' import { BrowserIcon } from '../../../elements/icons/BrowserIcon' +import { isTouchScreenDevice } from '../../../../lib/deviceType' type DiscoverHoverActionsProps = { viewer?: UserBasicData @@ -42,7 +43,7 @@ export const DiscoverHoverActions = (props: DiscoverHoverActionsProps) => { overflow: 'clip', height: '33px', - width: '112.5px', + width: props.savedId ? '150px' : '112.5px', bg: '$thBackground', display: 'flex', @@ -67,7 +68,6 @@ export const DiscoverHoverActions = (props: DiscoverHoverActionsProps) => { } style="hoverActionIcon" onClick={(event) => { - console.log(props) if (!props.savedUrl) { props .handleLinkSubmission(props.item.id, timeZone, locale) @@ -114,8 +114,9 @@ export const DiscoverHoverActions = (props: DiscoverHoverActionsProps) => { + + + {props.savedId != undefined && ( + ) + } +