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

Consolidate styles for list and grid cards

Browse source
This commit is contained in:
Jackson Harper 2023-03-06 11:24:45 +08:00
parent 6453786b96
commit b8f24e7be5
2 changed files with 37 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,6 +8,13 @@ import { useState } from 'react'
import { DotsThreeVertical } from 'phosphor-react'
import Link from 'next/link'
import { CardMenu } from '../CardMenu'
import {
AuthorInfoStyle,
DescriptionStyle,
MenuStyle,
MetaStyle,
TitleStyle,
} from './LibraryCardStyles'
dayjs.extend(relativeTime)
@ -117,11 +124,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
>
<HStack
css={{
width: '100%',
color: '$thTextSubtle2',
fontSize: '13px',
fontWeight: '400',
fontFamily: '$display',
...MetaStyle,
minHeight: '35px',
}}
distribution="start"
@ -138,20 +141,8 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
</Box>
<Box
css={{
display: 'flex',
...MenuStyle,
visibility: isHovered || menuOpen ? 'unset' : 'hidden',
marginLeft: 'auto',
height: '30px',
width: '30px',
mt: '-5px',
mr: '-5px',
pt: '2px',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '1000px',
'&:hover': {
bg: '#EBEBEB',
},
}}
>
<CardMenu
@ -172,68 +163,25 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
>
<Box
css={{
color: '$thTextContrast2',
fontSize: '16px',
fontWeight: '700',
lineHeight: '1.25',
fontFamily: '$display',
overflow: 'hidden',
textOverflow: 'ellipsis',
wordBreak: 'break-word',
display: '-webkit-box',
'-webkit-line-clamp': '2',
'-webkit-box-orient': 'vertical',
...TitleStyle,
height: '42px',
}}
>
{props.item.title}
</Box>
<Box
<Box css={DescriptionStyle}>{props.item.description}</Box>
<SpanBox
css={{
color: '$thTextSubtle',
pt: '10px',
fontSize: '13px',
fontWeight: '400',
lineHeight: '140%',
fontFamily: '$display',
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
'-webkit-line-clamp': '2',
'-webkit-box-orient': 'vertical',
height: '45px',
alignItems: 'start',
...AuthorInfoStyle,
m: '0px',
}}
>
{props.item.description}
</Box>
<HStack
css={{
pt: '10px',
color: '$thTextSubtle3',
fontSize: '13px',
fontWeight: '400',
fontFamily: '$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>
{props.item.author}
{props.item.author && originText && ' | '}
<SpanBox css={{ textDecoration: 'underline' }}>
{originText}
</SpanBox>
</HStack>
</SpanBox>
<SpanBox
css={{
pt: '20px',

82
packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
View file

@ -8,6 +8,12 @@ import { useState } from 'react'
import { DotsThree, DotsThreeVertical } from 'phosphor-react'
import Link from 'next/link'
import { CardMenu } from '../CardMenu'
import {
AuthorInfoStyle,
MenuStyle,
MetaStyle,
TitleStyle,
} from './LibraryCardStyles'
dayjs.extend(relativeTime)
@ -87,16 +93,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
href={`${props.viewer.profile.username}/${props.item.slug}`}
style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
>
<HStack
css={{
width: '100%',
color: '$thTextSubtle2',
fontSize: '10px',
fontWeight: '500',
fontFamily: '$display',
}}
distribution="start"
>
<HStack css={MetaStyle} distribution="start">
<Box>
{timeAgo(props.item.savedAt)}
{` `}
@ -117,20 +114,8 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
</Box>
<Box
css={{
display: 'flex',
...MenuStyle,
visibility: isHovered || menuOpen ? 'unset' : 'hidden',
marginLeft: 'auto',
height: '30px',
width: '30px',
mt: '-5px',
mr: '-5px',
pt: '2px',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '1000px',
'&:hover': {
bg: '#EBEBEB',
},
}}
>
<CardMenu
@ -149,56 +134,25 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
distribution="start"
css={{ height: '100%', width: '100%' }}
>
<Box
<Box css={{ ...TitleStyle, width: '80%' }}>{props.item.title}</Box>
<SpanBox
css={{
color: '$thTextContrast2',
fontSize: '16px',
fontWeight: '700',
lineHeight: '1.25',
maxWidth: '80%',
fontFamily: '$display',
overflow: 'hidden',
textOverflow: 'ellipsis',
wordBreak: 'break-word',
display: '-webkit-box',
'-webkit-line-clamp': '2',
'-webkit-box-orient': 'vertical',
mt: '5px',
...AuthorInfoStyle,
}}
>
{props.item.title}
</Box>
<HStack
css={{
color: '$thTextSubtle3',
fontSize: '11px',
fontWeight: '400',
fontFamily: '$display',
}}
>
<SpanBox
css={{
mt: '5px',
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>
{props.item.author}
{props.item.author && originText && ' | '}
<SpanBox css={{ textDecoration: 'underline' }}>
{originText}
</SpanBox>
</HStack>
</SpanBox>
<HStack
distribution="start"
alignment="start"
// The two pixels here are to account for the label margin
css={{ width: '100%', ml: '-2px' }}
css={{ width: '100%', ml: '-2px', mt: '5px' }}
>
<HStack
css={{