Fix Mobile view for Discover

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 (

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<HTMLDivElement>(null)
   const topicChild = useRef<HTMLDivElement>(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)}
           />
           <HStack
             alignment={'start'}
             distribution={'start'}
-            css={{ pl: '15px', pr: '15px', overflow: 'hidden' }}
+            css={{ pl: '0px', pr: '15px', overflow: 'hidden', overflow: 'scroll',
+              '::-webkit-scrollbar': {
+                display: 'none',
+              },
+              msOverflowStyle: 'none',
+              scrollbarWidth: 'none', }}
             ref={topicChild}
           >
             {(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)}
           />
         </HStack>
       </HStack>

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 {
     >
       <>
         <SmallTopicBar {...props} />
+        <HStack
+          alignment="center"
+          distribution={'start'}
+          css={{
+            position: 'absolute',
+            left: '10px',
+            top: '60px',
+            gap: '10px',
+            width: '95vw',
+            paddingBottom: '5px',
+            overflow: 'scroll',
+            '::-webkit-scrollbar': {
+              display: 'none',
+            },
+            msOverflowStyle: 'none',
+            scrollbarWidth: 'none',
+          }}
+        >
+          <PinnedFeeds items={props.feeds} selected={props.selectedFeedFilter} applyFeedFilter={props.applyFeedFilter} />
+        </HStack>
       </>
     </HStack>
   )
 }
-
-type MenuHeaderButtonProps = {
-  showFilterMenu: boolean
-  setShowFilterMenu: (show: boolean) => void
-}
-
-export function MenuHeaderButton(props: MenuHeaderButtonProps): JSX.Element {
-  return (
-    <HStack
-      css={{
-        ml: '10px',
-        width: '67px',
-        height: '40px',
-        bg: props.showFilterMenu ? '$thTextContrast2' : '$thBackground2',
-        borderRadius: '5px',
-        px: '5px',
-        cursor: 'pointer',
-      }}
-      alignment="center"
-      distribution="around"
-      onClick={() => {
-        props.setShowFilterMenu(!props.showFilterMenu)
-      }}
-    >
-      <OmnivoreSmallLogo
-        size={20}
-        strokeColor={
-          props.showFilterMenu
-            ? theme.colors.thBackground.toString()
-            : theme.colors.thTextContrast2.toString()
-        }
-      />
-      <FunnelSimple
-        size={20}
-        color={
-          props.showFilterMenu
-            ? theme.colors.thBackground.toString()
-            : theme.colors.thTextContrast2.toString()
-        }
-      />
-    </HStack>
-  )
-}

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) => {
         </div>
       </Button>
 
+
       <Button
-        title="Go to Original Article (O)"
+        title="Go to Original Article"
         style="hoverActionIcon"
         onClick={(event) => {
           // OK So we go to the original article.
@@ -129,6 +130,25 @@ export const DiscoverHoverActions = (props: DiscoverHoverActionsProps) => {
           color={theme.colors.thNotebookSubtle.toString()}
         />
       </Button>
+
+      {props.savedId != undefined && (
+        <Button
+          title="Go to Reader View"
+          style="hoverActionIcon"
+          onClick={(event) => {
+            // OK So we go to the original article.
+            window.location.href = props.savedUrl!
+            event.preventDefault()
+            event.stopPropagation()
+          }}
+        >
+          <Book
+            size={21}
+            color={theme.colors.thNotebookSubtle.toString()}
+          />
+        </Button>)
+      }
+
       <Button
         title={ props.hidden ? 'Article Item (H)' : 'Hide Article (H)' }
         style="hoverActionIcon"

packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemGridCard.tsx

@@ -85,7 +85,7 @@ export function DiscoverGridCard(props: DiscoverItemSubCardProps): JSX.Element {
         setIsHovered(false)
       }}
     >
-      {!isTouchScreenDevice() && (
+
         <Box
           ref={refs.setFloating}
           style={{ ...floatingStyles, zIndex: 3 }}
@@ -105,7 +105,6 @@ export function DiscoverGridCard(props: DiscoverItemSubCardProps): JSX.Element {
             hideDiscoverItem={props.setItemHidden}
           />
         </Box>
-      )}
       <DiscoverGridCardContent
         {...props}
         savedId={props.savedId}
@@ -127,7 +126,7 @@ const DiscoverGridCardContent = (
   const originText = siteName(props.item.url, props.item.url)
 
   const goToUrl = () => {
-    if (props.savedUrl) {
+    if (props.savedUrl && !isTouchScreenDevice()) {
       window.location.href = props.savedUrl
     }
   }