From b3a5dcfbc190f02f347570384774d2957854a6fe Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 13 Jun 2024 10:30:28 +0800 Subject: [PATCH 1/7] Some styling fixes for home on smaller screens --- .../web/components/nav-containers/home.tsx | 42 +++++++++++++++---- .../templates/navMenu/NavigationMenu.tsx | 1 - 2 files changed, 34 insertions(+), 9 deletions(-) diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index 3d1029ab8..981d0951c 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -123,7 +123,13 @@ const JustAddedHomeSection = (props: HomeSectionProps): JSX.Element => { }} > @@ -172,6 +178,9 @@ const JustAddedHomeSection = (props: HomeSectionProps): JSX.Element => { '::-webkit-scrollbar': { display: 'none', }, + '@mdDown': { + px: '20px', + }, }} distribution="start" alignment="start" @@ -199,6 +208,9 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => { fontSize: '16px', fontWeight: '600', color: '$homeTextTitle', + '@mdDown': { + px: '20px', + }, }} > {props.homeSection.title} @@ -222,9 +234,9 @@ const QuickLinksHomeSection = (props: HomeSectionProps): JSX.Element => { distribution="start" css={{ width: '100%', - gap: '20px', + gap: '10px', bg: '$thNavMenuFooter', - py: '30px', + py: '20px', px: '20px', borderRadius: '5px', }} @@ -449,7 +461,6 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => { borderRadius: '5px', '&:hover': { bg: '$homeCardHover', - borderRadius: '0px', }, '&:hover .title-text': { textDecoration: 'underline', @@ -491,9 +502,11 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => { pt: '35px', cursor: 'pointer', borderRadius: '5px', + '@mdDown': { + borderRadius: '0px', + }, '&:hover': { bg: '$homeCardHover', - borderRadius: '0px', }, '&:hover .title-text': { textDecoration: 'underline', @@ -573,15 +586,18 @@ const QuickLinkHomeItemView = (props: HomeItemViewProps): JSX.Element => { return ( { const path = `/${props.viewerUsername ?? 'me'}/${props.homeItem.slug}` @@ -592,7 +608,17 @@ const QuickLinkHomeItemView = (props: HomeItemViewProps): JSX.Element => { } }} > - + + + + + + + <PreviewContent previewContent={props.homeItem.previewContent} diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx index ebe18b1cd..16a28d20c 100644 --- a/packages/web/components/templates/navMenu/NavigationMenu.tsx +++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx @@ -90,7 +90,6 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element { top: props.showMenu ? '0' : '100%', visibility: props.showMenu ? 'visible' : 'hidden', }, - zIndex: 10, }} > <Box From dd5100d9172959260bef765e03ad57db9e55fe6a Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 10:52:26 +0800 Subject: [PATCH 2/7] Improve quick links section --- packages/web/components/nav-containers/home.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index 981d0951c..385ea60fc 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -235,7 +235,7 @@ const QuickLinksHomeSection = (props: HomeSectionProps): JSX.Element => { css={{ width: '100%', gap: '10px', - bg: '$thNavMenuFooter', + bg: '$homeCardHover', py: '20px', px: '20px', borderRadius: '5px', @@ -245,10 +245,10 @@ const QuickLinksHomeSection = (props: HomeSectionProps): JSX.Element => { css={{ fontFamily: '$inter', fontSize: '12px', - fontWeight: '600', + fontWeight: '500', textTransform: 'uppercase', color: '$ctaBlue', - bg: '#007AFF10', + bg: '#007AFF20', px: '10px', py: '5px', borderRadius: '5px', From 51b658f834083b1af40c5bd8d962d82139124066 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 11:20:09 +0800 Subject: [PATCH 3/7] Adjust heights a bit for smaller screens --- packages/web/components/nav-containers/home.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index 385ea60fc..ba386da58 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -376,8 +376,8 @@ const Title = (props: HomeItemViewProps): JSX.Element => { distribution="start" alignment="center" css={{ - fontSize: '16px', - lineHeight: '20px', + fontSize: '18px', + lineHeight: '24px', fontWeight: '600', fontFamily: '$inter', color: '$homeTextTitle', @@ -390,6 +390,10 @@ const Title = (props: HomeItemViewProps): JSX.Element => { '&:title-text': { transition: 'text-decoration 0.3s ease', }, + '@mdDown': { + fontSize: '16px', + lineHeight: '20px', + }, }} > {props.homeItem.title} @@ -433,13 +437,16 @@ const PreviewContent = (props: PreviewContentProps): JSX.Element => { css={{ fontFamily: '$inter', fontSize: '14px', - lineHeight: '28px', + lineHeight: '21px', overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'break-word', display: '-webkit-box', '-webkit-line-clamp': props.maxLines ?? '3', '-webkit-box-orient': 'vertical', + '@mdDown': { + '-webkit-line-clamp': '3', + }, }} > {props.previewContent ?? ''} From 99622f592aa8631d2d1eed1d73c6913248365503 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 11:35:23 +0800 Subject: [PATCH 4/7] z-index + more font size tweaks --- packages/web/components/nav-containers/home.tsx | 6 +++--- .../web/components/templates/navMenu/NavigationMenu.tsx | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index ba386da58..65cad3d19 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -408,8 +408,8 @@ const TitleSmall = (props: HomeItemViewProps): JSX.Element => { distribution="start" alignment="center" css={{ - fontSize: '13px', - lineHeight: '26px', + fontSize: '14px', + lineHeight: '21px', fontWeight: '500', fontFamily: '$inter', color: '$homeTextTitle', @@ -680,7 +680,7 @@ const SourceInfo = (props: HomeItemViewProps & SourceInfoProps) => ( </HStack> </HoverCard.Trigger> <HoverCard.Portal> - <HoverCard.Content sideOffset={5}> + <HoverCard.Content sideOffset={5} style={{ zIndex: '5' }}> <SubscriptionSourceHoverContent source={props.homeItem.source} /> <HoverCard.Arrow fill={theme.colors.thBackground2.toString()} /> </HoverCard.Content> diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx index 16a28d20c..d67626f30 100644 --- a/packages/web/components/templates/navMenu/NavigationMenu.tsx +++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx @@ -90,6 +90,7 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element { top: props.showMenu ? '0' : '100%', visibility: props.showMenu ? 'visible' : 'hidden', }, + zIndex: 2, }} > <Box From 7df606b15afa1b565ce12b46caa44f30e8419f99 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 11:40:26 +0800 Subject: [PATCH 5/7] Improve spacing on smaller screens --- packages/web/components/nav-containers/home.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index 65cad3d19..f69baeaeb 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -57,6 +57,7 @@ export function HomeContainer(): JSX.Element { gap: '50px', minHeight: '100vh', '@mdDown': { + gap: '40px', width: '100%', }, }} @@ -200,6 +201,9 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => { css={{ width: '100%', gap: '20px', + '@mdDown': { + gap: '10px', + }, }} > <SpanBox @@ -510,6 +514,7 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => { cursor: 'pointer', borderRadius: '5px', '@mdDown': { + pt: '15px', borderRadius: '0px', }, '&:hover': { From 99695c461fd21a2ff82c8216f4a610f3aa13da8b Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 12:10:13 +0800 Subject: [PATCH 6/7] Use a number for z-index --- packages/web/components/nav-containers/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index f69baeaeb..881d8778a 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -685,7 +685,7 @@ const SourceInfo = (props: HomeItemViewProps & SourceInfoProps) => ( </HStack> </HoverCard.Trigger> <HoverCard.Portal> - <HoverCard.Content sideOffset={5} style={{ zIndex: '5' }}> + <HoverCard.Content sideOffset={5} style={{ zIndex: 5 }}> <SubscriptionSourceHoverContent source={props.homeItem.source} /> <HoverCard.Arrow fill={theme.colors.thBackground2.toString()} /> </HoverCard.Content> From b94818ab34e2b2790ded3507a4abfea766877de2 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 12:13:08 +0800 Subject: [PATCH 7/7] Smaller just added cards on mobile --- packages/web/components/nav-containers/home.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index 881d8778a..af667d5f7 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -476,6 +476,9 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => { '&:hover .title-text': { textDecoration: 'underline', }, + '@mdDown': { + minWidth: '282px', + }, }} onClick={(event) => { const path = `/${props.viewerUsername ?? 'me'}/${props.homeItem.slug}`