prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement more of Recently Added section

Browse source
This commit is contained in:
Jackson Harper 2024-06-12 21:00:14 +08:00
parent ea72bb56fe
commit c7b1794591
2 changed files with 116 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/api/src/resolvers/function_resolvers.ts
View file

@ -628,7 +628,7 @@ export const functionResolvers = {
switch (section.layout) {
case 'just_added':
return 'Just Added'
return 'Recently Added'
case 'top_picks':
return 'Top Picks'
case 'quick_links':

140
packages/web/components/nav-containers/home.tsx
View file

@ -26,6 +26,7 @@ import {
} from '../../lib/networking/queries/useGetSubscriptionsQuery'
import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
import { Toaster } from 'react-hot-toast'
import Link from 'next/link'
export function HomeContainer(): JSX.Element {
const homeData = useGetHomeItems()
@ -47,7 +48,7 @@ export function HomeContainer(): JSX.Element {
distribution="start"
css={{
width: '646px',
gap: '40px',
gap: '50px',
minHeight: '100vh',
'@mdDown': {
width: '100%',
@ -109,19 +110,64 @@ const JustAddedHomeSection = (props: HomeSectionProps): JSX.Element => {
gap: '20px',
}}
>
<SpanBox
css={{
fontFamily: '$inter',
fontSize: '16px',
fontWeight: '600',
color: '$homeTextTitle',
}}
<HStack
css={{ width: '100%', lineHeight: '1' }}
distribution="start"
alignment="start"
>
{props.homeSection.title}
</SpanBox>
{props.homeSection.items.map((homeItem) => {
return <JustAddedItemView key={homeItem.id} homeItem={homeItem} />
})}
<SpanBox
css={{
fontFamily: '$inter',
fontSize: '16px',
fontWeight: '600',
color: '$homeTextTitle',
}}
>
{props.homeSection.title}
</SpanBox>
<SpanBox
css={{
ml: 'auto',
fontFamily: '$inter',
fontSize: '13px',
fontWeight: '400',
color: '$homeTextTitle',
}}
>
<Button
style="link"
onClick={(event) => {
// router
event.preventDefault()
}}
css={{
'&:hover': {
textDecoration: 'underline',
},
}}
>
View All
</Button>
</SpanBox>
</HStack>
<HStack
css={{
width: '100%',
lineHeight: '1',
overflow: 'scroll',
gap: '25px',
scrollbarWidth: 'none',
'::-webkit-scrollbar': {
display: 'none',
},
}}
distribution="start"
alignment="start"
>
{props.homeSection.items.map((homeItem) => {
return <JustAddedItemView key={homeItem.id} homeItem={homeItem} />
})}
</HStack>
</VStack>
)
}
@ -301,6 +347,7 @@ const TimeAgo = (props: HomeItemViewProps): JSX.Element => {
const Title = (props: HomeItemViewProps): JSX.Element => {
return (
<HStack
className="title-text"
distribution="start"
alignment="center"
css={{
@ -315,6 +362,34 @@ const Title = (props: HomeItemViewProps): JSX.Element => {
display: '-webkit-box',
'-webkit-line-clamp': '3',
'-webkit-box-orient': 'vertical',
'&:title-text': {
transition: 'text-decoration 0.3s ease',
},
}}
>
{props.homeItem.title}
</HStack>
)
}
const TitleSmall = (props: HomeItemViewProps): JSX.Element => {
return (
<HStack
className="title-text"
distribution="start"
alignment="center"
css={{
fontSize: '13px',
lineHeight: '26px',
fontWeight: '500',
fontFamily: '$inter',
color: '$homeTextTitle',
overflow: 'hidden',
textOverflow: 'ellipsis',
wordBreak: 'break-word',
display: '-webkit-box',
'-webkit-line-clamp': '3',
'-webkit-box-orient': 'vertical',
}}
>
{props.homeItem.title}
@ -353,13 +428,19 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => {
return (
<VStack
css={{
width: '100%',
padding: '5px',
minWidth: '377px',
gap: '5px',
padding: '12px',
cursor: 'pointer',
bg: '$homeCardHover',
borderRadius: '5px',
'&:hover': {
bg: '$homeCardHover',
borderRadius: '0px',
},
'&:hover .title-text': {
textDecoration: 'underline',
},
}}
onClick={(event) => {
if (event.metaKey || event.ctrlKey) {
@ -372,12 +453,15 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => {
<HStack
distribution="start"
alignment="center"
css={{ gap: '5px', lineHeight: '1' }}
css={{ width: '100%', gap: '5px', lineHeight: '1' }}
>
<SourceInfo homeItem={props.homeItem} />
<TimeAgo homeItem={props.homeItem} />
<SourceInfo homeItem={props.homeItem} subtle={true} />
<SpanBox css={{ ml: 'auto' }}>
<TimeAgo homeItem={props.homeItem} />
</SpanBox>
</HStack>
<Title homeItem={props.homeItem} />
<TitleSmall homeItem={props.homeItem} />
</VStack>
)
}
@ -391,12 +475,15 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
width: '100%',
p: '0px',
pt: '35px',
cursor: 'pointer',
borderRadius: '5px',
'&:hover': {
bg: '$homeCardHover',
borderRadius: '0px',
},
'&:hover .title-text': {
textDecoration: 'underline',
},
}}
onClick={(event) => {
if (event.metaKey || event.ctrlKey) {
@ -511,13 +598,17 @@ const SiteIconLarge = styled('img', {
borderRadius: '100px',
})
const SourceInfo = (props: HomeItemViewProps) => (
type SourceInfoProps = {
subtle?: boolean
}
const SourceInfo = (props: HomeItemViewProps & SourceInfoProps) => (
<HoverCard.Root>
<HoverCard.Trigger asChild>
<HStack
distribution="start"
alignment="center"
css={{ gap: '5px', cursor: 'pointer' }}
css={{ gap: '8px', cursor: 'pointer' }}
>
{props.homeItem.source.icon && (
<SiteIconSmall
@ -528,11 +619,10 @@ const SourceInfo = (props: HomeItemViewProps) => (
<HStack
css={{
lineHeight: '1',
pb: '3px',
fontFamily: '$inter',
fontWeight: '500',
fontSize: '13px',
color: '$homeTextSource',
fontSize: props.subtle ? '12px' : '13px',
color: props.subtle ? '$homeTextSubtle' : '$homeTextSource',
textDecoration: 'underline',
}}
>