From 57ab2fd6b1748a88008f693cf9d556d9881f362f Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 14 Jun 2024 10:14:33 +0800 Subject: [PATCH 1/5] Improve spacing between top picks and recently added --- packages/web/components/nav-containers/home.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index 10bf604c9..92d655eb8 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -564,12 +564,10 @@ const TopicPickHomeItemView = ( Date: Fri, 14 Jun 2024 10:28:13 +0800 Subject: [PATCH 2/5] Fix padding on navigation menu --- .../web/components/templates/navMenu/NavigationMenu.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx index ea0a5f054..6e3284e20 100644 --- a/packages/web/components/templates/navMenu/NavigationMenu.tsx +++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx @@ -97,7 +97,7 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element { { gap: '10px', maxWidth: '100%', height: '34px', - px: '15px', + px: '20px', fontSize: '15px', fontWeight: 'regular', @@ -581,7 +581,7 @@ function NodeRenderer(args: { alignment="center" distribution="start" css={{ - pl: `${15 + args.node.level * 15}px`, + pl: `${20 + args.node.level * 15}px`, mb: '2px', gap: '10px', display: 'flex', @@ -852,14 +852,13 @@ function NavButton(props: NavButtonProps): JSX.Element { alignment="center" distribution="start" css={{ - pl: '10px', mb: '2px', gap: '10px', display: 'flex', width: '100%', maxWidth: '100%', height: '34px', - px: '15px', + px: '20px', backgroundColor: props.isSelected ? '$thLibrarySelectionColor' From 45a604732bb4009f4a953dbaf60657dfcbefb2b7 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 14 Jun 2024 12:19:45 +0800 Subject: [PATCH 3/5] Improve nav menu on smaller screens, record current home position --- .../web/components/nav-containers/home.tsx | 17 +++-- .../components/templates/NavigationLayout.tsx | 70 ++++++++----------- .../templates/library/LibraryContainer.tsx | 6 +- .../templates/library/LibraryHeader.tsx | 18 +---- .../templates/navMenu/NavigationMenu.tsx | 26 +------ 5 files changed, 49 insertions(+), 88 deletions(-) diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index 92d655eb8..8a788bcc1 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -29,6 +29,7 @@ import { Toaster } from 'react-hot-toast' import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery' export function HomeContainer(): JSX.Element { + const router = useRouter() const homeData = useGetHomeItems() const { viewerData } = useGetViewerQuery() @@ -38,6 +39,10 @@ export function HomeContainer(): JSX.Element { return viewerData?.me?.profile.username }, [viewerData]) + useEffect(() => { + window.sessionStorage.setItem('nav-return', router.asPath) + }, [router.asPath]) + return ( @@ -265,7 +274,7 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => { itemsPerPage={4} loadMoreButtonText="Load more Top Picks" render={(homeItem) => ( - { ) } -type TopPickItemViewProps = { +type TopPicksItemViewProps = { dispatchList: (args: { type: string; itemId?: string }) => void } -const TopicPickHomeItemView = ( - props: HomeItemViewProps & TopPickItemViewProps +const TopPicksItemView = ( + props: HomeItemViewProps & TopPicksItemViewProps ): JSX.Element => { const router = useRouter() return ( diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx index e1b5742b9..c8e88649a 100644 --- a/packages/web/components/templates/NavigationLayout.tsx +++ b/packages/web/components/templates/NavigationLayout.tsx @@ -15,7 +15,6 @@ import { updateTheme } from '../../lib/themeUpdater' import { Priority, useRegisterActions } from 'kbar' import { ThemeId, theme } from '../tokens/stitches.config' import { NavigationMenu } from './navMenu/NavigationMenu' -import { DEFAULT_HEADER_HEIGHT } from './homeFeed/HeaderSpacer' import { Button } from '../elements/Button' import { List } from '@phosphor-icons/react' import { usePersistedState } from '../../lib/hooks/usePersistedState' @@ -131,19 +130,13 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element { {props.pageMetaDataProps ? ( ) : null} - { + setShowNavMenu(!showNavMenu) }} - > -
{ - setShowNavMenu(!showNavMenu) - }} - /> - + /> {!isLoading && showNavMenu && ( <> {}} showMenu={showNavMenu} - setShowMenu={setShowNavMenu} /> @@ -178,43 +173,36 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element { } type HeaderProps = { + menuOpen: booelean toggleMenu: () => void } const Header = (props: HeaderProps): JSX.Element => { - const small = false - return ( - - - + ) } diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx index c67624cec..83eb5cd41 100644 --- a/packages/web/components/templates/library/LibraryContainer.tsx +++ b/packages/web/components/templates/library/LibraryContainer.tsx @@ -927,7 +927,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { py: '20px', width: '100%', '@mdDown': { - px: '0px', + px: layout == 'GRID_LAYOUT' ? '20px' : '0px', }, }} distribution="start" @@ -1044,7 +1044,7 @@ export function LibraryItemsLayout( mb: '10px', px: '70px', '@xlgDown': { - px: '10px', + px: '0px', }, }} > @@ -1195,7 +1195,7 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element { overflow: 'visible', px: '70px', '@xlgDown': { - px: '10px', + px: '0px', }, '@mdDown': { px: '0px', diff --git a/packages/web/components/templates/library/LibraryHeader.tsx b/packages/web/components/templates/library/LibraryHeader.tsx index 849f6edee..ca89c1bab 100644 --- a/packages/web/components/templates/library/LibraryHeader.tsx +++ b/packages/web/components/templates/library/LibraryHeader.tsx @@ -88,14 +88,13 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element { px: '70px', left: LIBRARY_LEFT_MENU_WIDTH, transition: 'height 0.5s', - '@xlgDown': { - px: '10px', - }, '@mdDown': { - px: '10px', left: '0px', right: '0', }, + '@xlgDown': { + px: '40px', + }, }} > @@ -131,17 +130,6 @@ const HeaderControls = (props: LibraryHeaderProps): JSX.Element => { return ( <> - {!searchBoxFocused && ( - - - - )} - void showMenu: boolean - setShowMenu: (show: boolean) => void } export function NavigationMenu(props: NavigationMenuProps): JSX.Element { @@ -94,30 +93,7 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element { zIndex: 2, }} > - - - - - + From c130c5309ab0686bda3241f3485ed1220d063d13 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 14 Jun 2024 12:38:32 +0800 Subject: [PATCH 4/5] Fix off by one with new SWR cursor generation --- packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx index f7e0c6fd5..2e9394b51 100644 --- a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx @@ -253,7 +253,7 @@ export function useGetLibraryItemsQuery( ] }, (args: any[]) => { - const pageIndex = args[4] as number + const pageIndex = args[3] as number return gqlFetcher(query, { ...variables, after: pageIndex }, true) }, { revalidateFirstPage: false } From 27539498af8da1ac51e721493653e3d9e0e72144 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 14 Jun 2024 12:50:57 +0800 Subject: [PATCH 5/5] Fix typo --- packages/web/components/templates/NavigationLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx index c8e88649a..2e35aa311 100644 --- a/packages/web/components/templates/NavigationLayout.tsx +++ b/packages/web/components/templates/NavigationLayout.tsx @@ -173,7 +173,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element { } type HeaderProps = { - menuOpen: booelean + menuOpen: boolean toggleMenu: () => void }