Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added some CSS to match the designs and enabled some layouts

Browse Source
This commit is contained in:
Rupin Khandelwal
2022-08-25 19:51:09 -05:00
parent 78abc6b5c4
commit fecaf5301e
2 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/components/patterns/ArticleSubtitle.tsx
View File

@ -54,7 +54,7 @@ export function authoredByText(author: string): string {
return `by ${removeHTMLTags(author)}`
}
function removeHTMLTags(str: string | null | undefined): string {
export function removeHTMLTags(str: string | null | undefined): string {
if (typeof str === 'string') {
return str.replace(/(<([^>]+)>)/gi, '')
} else {

39
packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
View File

@ -1,7 +1,7 @@
import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
import { CoverImage } from '../../elements/CoverImage'
import { StyledText } from '../../elements/StyledText'
import { authoredByText } from '../ArticleSubtitle'
import { removeHTMLTags } from '../ArticleSubtitle'
import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
import { theme } from '../../tokens/stitches.config'
import { CardMenu } from '../CardMenu'
@ -13,7 +13,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
return (
<VStack
css={{
p: '12px',
p: '12px',
height: '100%',
width: '100%',
maxWidth: '100%',
@ -88,14 +88,26 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
</Box>
</HStack>
<HStack alignment="start" distribution="between">
<StyledText style="caption" css={{ my: '0', mt: '-$2' }}>
<StyledText style="caption" css={{ mt: '-5px', fontWeight: '500' }}>
{props.item.author && (
<SpanBox css={{ mr: '8px' }}>
{authoredByText(props.item.author)}
{removeHTMLTags(props.item.author)} author
</SpanBox>
)}
<SpanBox css={{ textDecorationLine: 'underline' }}>
{props.originText}
<Box
css={{
height: '4px',
width: '4px',
borderRadius: '50%',
display:'inline-block',
background: 'var(--colors-graySolid)',
margin: '1px'
}}
></Box>
<SpanBox
css={{ color: 'var(--colors-graySolid)' }}
>
{props.originText} origin
</SpanBox>
</StyledText>
</HStack>
@ -132,7 +144,6 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
>
{props.item.description}
</StyledText>
</HStack>
<Box css={{ display: 'block', py: '12px' }}>
{props.item.labels?.map(({ name, color }, index) => (
@ -140,13 +151,13 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
))}
</Box>
<ProgressBar
fillPercentage={props.item.readingProgressPercent}
fillColor={theme.colors.highlight.toString()}
backgroundColor={theme.colors.lightBorder.toString()}
borderRadius={
props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
}
/>
fillPercentage={props.item.readingProgressPercent}
fillColor={theme.colors.highlight.toString()}
backgroundColor={theme.colors.lightBorder.toString()}
borderRadius={
props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
}
/>
</VStack>
)
}