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

Use full width for cards

Browse source
This commit is contained in:
Jackson Harper 2023-03-01 15:36:56 +08:00
parent fef1349dde
commit deb41afd3f
1 changed files with 98 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

196
packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
View file

@ -174,117 +174,117 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
></Box>
)}
</HStack>
<HStack css={{ height: '100%', width: '100%' }}>
<VStack css={{ height: '100%', width: '100%' }}>
<Box
<VStack 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',
}}
>
{props.item.description}
</Box>
<HStack
css={{
pt: '10px',
color: '#898989',
fontSize: '13px',
fontWeight: '400',
fontFamily: 'SF Pro Display',
}}
>
<SpanBox
css={{
color: 'rgba(61, 61, 61, 1)',
fontSize: '20px',
fontWeight: '700',
lineHeight: '1.25',
fontFamily: 'SF Pro Display',
overflow: 'hidden',
maxLines: '1',
textOverflow: 'ellipsis',
wordBreak: 'break-word',
display: '-webkit-box',
'-webkit-line-clamp': '2',
'-webkit-box-orient': 'vertical',
height: '50px',
whiteSpace: 'nowrap',
maxWidth: '240px',
overflow: 'hidden',
height: '21px',
}}
>
{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',
}}
>
{props.item.description}
</Box>
{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%' }}>
<ProgressBar
fillPercentage={props.item.readingProgressPercent}
fillColor="#FFD234"
backgroundColor="#EEEEEE"
borderRadius="5px"
/>
</SpanBox>
<HStack
distribution="start"
alignment="start"
css={{ width: '100%', minHeight: '50px' }}
>
<HStack
css={{
pt: '10px',
color: '#898989',
fontSize: '13px',
fontWeight: '400',
fontFamily: 'SF Pro Display',
}}
>
<SpanBox
css={{
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: '30px', width: '100%' }}
>
<ProgressBar
fillPercentage={props.item.readingProgressPercent}
fillColor="#FFD234"
backgroundColor="#EEEEEE"
borderRadius="5px"
/>
</SpanBox>
<Box
css={{
marginTop: 'auto',
display: 'block',
pt: '10px',
minHeight: '35px',
}}
>
{props.item.labels?.map(({ name, color }, index) => (
<LabelChip key={index} text={name || ''} color={color} />
))}
</Box>
</VStack>
<VStack
css={{
width: '80px',
height: '100%',
marginLeft: 'auto',
}}
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>
</HStack>
<VStack
css={{
width: '80px',
height: '100%',
marginLeft: 'auto',
}}
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>
)