Wrap the next Link in the VStack so we still get hover states from the Library list code
This commit is contained in:
Jackson Harper
@ -8,6 +8,8 @@ import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
import { useState } from 'react'
|
||||
import { DotsThree, DotsThreeVertical } from 'phosphor-react'
|
||||
import Link from 'next/link'
|
||||
import { CardMenu } from '../CardMenu'
|
||||
import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
|
||||
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
@ -114,55 +116,61 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
|
||||
siteName(props.item.originalArticleUrl, props.item.url)
|
||||
|
||||
return (
|
||||
<Link href={`${props.viewer.profile.username}/${props.item.slug}`}>
|
||||
<VStack
|
||||
css={{
|
||||
pl: '20px',
|
||||
padding: '15px',
|
||||
width: '320px',
|
||||
height: '100%',
|
||||
minHeight: '270px',
|
||||
background: 'white',
|
||||
borderRadius: '5px',
|
||||
borderWidth: '1px',
|
||||
borderStyle: 'solid',
|
||||
borderColor: '#E1E1E1',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
alignment="start"
|
||||
distribution="start"
|
||||
onMouseEnter={() => {
|
||||
setIsHovered(true)
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setIsHovered(false)
|
||||
}}
|
||||
<VStack
|
||||
css={{
|
||||
pl: '20px',
|
||||
padding: '15px',
|
||||
width: '320px',
|
||||
height: '100%',
|
||||
minHeight: '270px',
|
||||
background: 'white',
|
||||
borderRadius: '5px',
|
||||
borderWidth: '1px',
|
||||
borderStyle: 'solid',
|
||||
borderColor: '#E1E1E1',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
alignment="start"
|
||||
distribution="start"
|
||||
onMouseEnter={() => {
|
||||
setIsHovered(true)
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setIsHovered(false)
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
href={`${props.viewer.profile.username}/${props.item.slug}`}
|
||||
passHref
|
||||
>
|
||||
<HStack
|
||||
css={{
|
||||
width: '100%',
|
||||
color: '#6A6968',
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
fontFamily: 'SF Pro Display',
|
||||
minHeight: '35px',
|
||||
}}
|
||||
distribution="start"
|
||||
<a
|
||||
href={`${props.viewer.profile.username}/${props.item.slug}`}
|
||||
style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
|
||||
>
|
||||
<Box>
|
||||
{timeAgo(props.item.savedAt)}
|
||||
{` `}
|
||||
{props.item.wordsCount ?? 0 > 0
|
||||
? ` • ${Math.max(
|
||||
1,
|
||||
Math.round((props.item.wordsCount ?? 0) / 235)
|
||||
)} min read`
|
||||
: null}
|
||||
</Box>
|
||||
{isHovered ? (
|
||||
<HStack
|
||||
css={{
|
||||
width: '100%',
|
||||
color: '#6A6968',
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
fontFamily: 'SF Pro Display',
|
||||
minHeight: '35px',
|
||||
}}
|
||||
distribution="start"
|
||||
>
|
||||
<Box>
|
||||
{timeAgo(props.item.savedAt)}
|
||||
{` `}
|
||||
{props.item.wordsCount ?? 0 > 0
|
||||
? ` • ${Math.max(
|
||||
1,
|
||||
Math.round((props.item.wordsCount ?? 0) / 235)
|
||||
)} min read`
|
||||
: null}
|
||||
</Box>
|
||||
<Box
|
||||
css={{
|
||||
display: 'flex',
|
||||
display: isHovered ? 'flex' : 'none',
|
||||
marginLeft: 'auto',
|
||||
height: '30px',
|
||||
width: '30px',
|
||||
@ -176,146 +184,144 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DotsThreeVertical size={25} weight="bold" color="#ADADAD" />
|
||||
<CardMenu
|
||||
item={props.item}
|
||||
viewer={props.viewer}
|
||||
actionHandler={props.handleAction}
|
||||
triggerElement={
|
||||
<DotsThreeVertical size={25} weight="bold" color="#ADADAD" />
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
</HStack>
|
||||
<VStack
|
||||
alignment="start"
|
||||
distribution="start"
|
||||
css={{ height: '100%', width: '100%' }}
|
||||
>
|
||||
<Box
|
||||
css={{
|
||||
color: '#ADADAD',
|
||||
color: 'rgba(61, 61, 61, 1)',
|
||||
fontSize: '20px',
|
||||
fontWeight: '700',
|
||||
lineHeight: '1.25',
|
||||
fontFamily: 'SF Pro Display',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
wordBreak: 'break-word',
|
||||
display: '-webkit-box',
|
||||
'-webkit-line-clamp': '2',
|
||||
'-webkit-box-orient': 'vertical',
|
||||
height: '50px',
|
||||
}}
|
||||
>
|
||||
{props.item.title}
|
||||
</Box>
|
||||
<Box
|
||||
css={{
|
||||
color: '#3D3D3D',
|
||||
pt: '10px',
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
lineHeight: '140%',
|
||||
fontFamily: 'SF Pro Display',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
display: '-webkit-box',
|
||||
'-webkit-line-clamp': '2',
|
||||
'-webkit-box-orient': 'vertical',
|
||||
height: '45px',
|
||||
alignItems: 'start',
|
||||
}}
|
||||
>
|
||||
test{props.item.description}
|
||||
</Box>
|
||||
<HStack
|
||||
css={{
|
||||
pt: '10px',
|
||||
color: '#898989',
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
fontFamily: 'SF Pro Display',
|
||||
}}
|
||||
></Box>
|
||||
)}
|
||||
</HStack>
|
||||
<VStack
|
||||
alignment="start"
|
||||
distribution="start"
|
||||
css={{ height: '100%', width: '100%' }}
|
||||
>
|
||||
<Box
|
||||
css={{
|
||||
color: 'rgba(61, 61, 61, 1)',
|
||||
fontSize: '20px',
|
||||
fontWeight: '700',
|
||||
lineHeight: '1.25',
|
||||
fontFamily: 'SF Pro Display',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
wordBreak: 'break-word',
|
||||
display: '-webkit-box',
|
||||
'-webkit-line-clamp': '2',
|
||||
'-webkit-box-orient': 'vertical',
|
||||
height: '50px',
|
||||
}}
|
||||
>
|
||||
{props.item.title}
|
||||
</Box>
|
||||
<Box
|
||||
css={{
|
||||
color: '#3D3D3D',
|
||||
pt: '10px',
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
lineHeight: '140%',
|
||||
fontFamily: 'SF Pro Display',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
display: '-webkit-box',
|
||||
'-webkit-line-clamp': '2',
|
||||
'-webkit-box-orient': 'vertical',
|
||||
height: '45px',
|
||||
alignItems: 'start',
|
||||
}}
|
||||
>
|
||||
test{props.item.description}
|
||||
</Box>
|
||||
<HStack
|
||||
css={{
|
||||
pt: '10px',
|
||||
color: '#898989',
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
fontFamily: 'SF Pro Display',
|
||||
}}
|
||||
>
|
||||
>
|
||||
<SpanBox
|
||||
css={{
|
||||
m: '0px',
|
||||
maxLines: '1',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
maxWidth: '240px',
|
||||
overflow: 'hidden',
|
||||
height: '21px',
|
||||
}}
|
||||
>
|
||||
{props.item.author}
|
||||
{props.item.author && originText && ' | '}
|
||||
<SpanBox css={{ textDecoration: 'underline' }}>
|
||||
{originText}
|
||||
</SpanBox>
|
||||
</SpanBox>
|
||||
</HStack>
|
||||
<SpanBox
|
||||
css={{
|
||||
pt: '20px',
|
||||
pr: '10px',
|
||||
pb: '20px',
|
||||
width: '100%',
|
||||
m: '0px',
|
||||
maxLines: '1',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
maxWidth: '240px',
|
||||
overflow: 'hidden',
|
||||
height: '21px',
|
||||
}}
|
||||
>
|
||||
{props.item.author}
|
||||
{props.item.author && originText && ' | '}
|
||||
<SpanBox css={{ textDecoration: 'underline' }}>
|
||||
{originText}
|
||||
</SpanBox>
|
||||
<ProgressBar
|
||||
fillPercentage={props.item.readingProgressPercent}
|
||||
fillColor="#FFD234"
|
||||
backgroundColor="#EEEEEE"
|
||||
borderRadius="5px"
|
||||
/>
|
||||
</SpanBox>
|
||||
</HStack>
|
||||
<SpanBox
|
||||
css={{
|
||||
pt: '20px',
|
||||
pr: '10px',
|
||||
pb: '20px',
|
||||
width: '100%',
|
||||
m: '0px',
|
||||
}}
|
||||
>
|
||||
<ProgressBar
|
||||
fillPercentage={props.item.readingProgressPercent}
|
||||
fillColor="#FFD234"
|
||||
backgroundColor="#EEEEEE"
|
||||
borderRadius="5px"
|
||||
/>
|
||||
</SpanBox>
|
||||
|
||||
<HStack
|
||||
distribution="start"
|
||||
alignment="start"
|
||||
css={{ width: '100%', minHeight: '50px' }}
|
||||
>
|
||||
<HStack
|
||||
css={{
|
||||
display: 'block',
|
||||
minHeight: '35px',
|
||||
}}
|
||||
distribution="start"
|
||||
alignment="start"
|
||||
css={{ width: '100%', minHeight: '50px' }}
|
||||
>
|
||||
{props.item.labels?.map(({ name, color }, index) => (
|
||||
<LabelChip key={index} text={name || ''} color={color} />
|
||||
))}
|
||||
<HStack
|
||||
css={{
|
||||
display: 'block',
|
||||
minHeight: '35px',
|
||||
}}
|
||||
>
|
||||
{props.item.labels?.map(({ name, color }, index) => (
|
||||
<LabelChip key={index} text={name || ''} color={color} />
|
||||
))}
|
||||
</HStack>
|
||||
<VStack
|
||||
css={{
|
||||
width: '80px',
|
||||
height: '100%',
|
||||
marginLeft: 'auto',
|
||||
flexGrow: '1',
|
||||
}}
|
||||
alignment="end"
|
||||
distribution="end"
|
||||
>
|
||||
{props.item.image && (
|
||||
<CoverImage
|
||||
src={props.item.image}
|
||||
alt="Link Preview Image"
|
||||
width={50}
|
||||
height={50}
|
||||
css={{ borderRadius: '8px' }}
|
||||
onError={(e) => {
|
||||
;(e.target as HTMLElement).style.display = 'none'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</VStack>
|
||||
</HStack>
|
||||
<VStack
|
||||
css={{
|
||||
width: '80px',
|
||||
height: '100%',
|
||||
marginLeft: 'auto',
|
||||
flexGrow: '1',
|
||||
}}
|
||||
alignment="end"
|
||||
distribution="end"
|
||||
>
|
||||
{props.item.image && (
|
||||
<CoverImage
|
||||
src={props.item.image}
|
||||
alt="Link Preview Image"
|
||||
width={50}
|
||||
height={50}
|
||||
css={{ borderRadius: '8px' }}
|
||||
onError={(e) => {
|
||||
;(e.target as HTMLElement).style.display = 'none'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</VStack>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</Link>
|
||||
</VStack>
|
||||
</a>
|
||||
</Link>
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
|
||||
@ -934,6 +934,9 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
|
||||
'> div': {
|
||||
bg: '$grayBgActive',
|
||||
},
|
||||
'> a': {
|
||||
bg: '$grayBgActive',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user