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

Give cards more line height and avoid clipping, less spacing

Browse source
This commit is contained in:
Jackson Harper 2023-08-08 13:55:39 +08:00
parent a9edf4d2ab
commit 5ae3b3480c
3 changed files with 21 additions and 1566 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
View file

@ -31,7 +31,7 @@ export const MetaStyle = {
maxLines: 1,
textOverflow: 'ellipsis',
wordBreak: 'break-word',
lineHeight: 1.1,
lineHeight: 1.25,
}
export const TitleStyle = {
@ -56,10 +56,10 @@ export const AuthorInfoStyle = {
fontSize: '12px',
fontWeight: '400',
fontFamily: '$display',
lineHeight: '1',
lineHeight: 1.25,
wordWrap: 'break-word',
whiteSpace: 'nowrap',
overflowX: 'hidden',
overflow: 'hidden',
textOverflow: 'ellipsis',
}

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

File diff suppressed because it is too large Load diff

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

@ -31,7 +31,7 @@ import { ProgressBar } from '../../elements/ProgressBar'
import { theme } from '../../tokens/stitches.config'
import { FallbackImage } from './FallbackImage'
import { useRouter } from 'next/router'
import { LoadingBar } from "../../elements/LoadingBar"
import { LoadingBar } from '../../elements/LoadingBar'
export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
const router = useRouter()
@ -132,17 +132,16 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
type LoadingBarOverlayProps = {
top: number
width: string
bottomRadius: string,
fillColor?: string,
bottomRadius: string
fillColor?: string
percentFill?: number
}
type ProgressBarOverlayProps = {
top: number
width: string
value: number
bottomRadius: string,
bottomRadius: string
}
export const LoadingBarOverlay = (
@ -206,17 +205,16 @@ const ListImage = (props: ListImageProps): JSX.Element => {
const [displayFallback, setDisplayFallback] = useState(props.src == undefined)
return (
<>{
props.isLoading && (
<>
{props.isLoading && (
<LoadingBarOverlay
width="55px"
top={50}
bottomRadius="4px"
fillColor={"rgba(60, 179, 113, 1)"}
fillColor={'rgba(60, 179, 113, 1)'}
percentFill={30}
/>
)
}
)}
{(props.readingProgress ?? 0) > 0 && !props.isLoading && (
<ProgressBarOverlay
width="55px"
@ -297,7 +295,7 @@ export function LibraryListCardContent(
height: '100%',
width: '100%',
lineHeight: 1,
gap: '5px',
gap: '3px',
position: 'relative',
}}
>