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

Merge pull request #2590 from omnivore-app/fix/web-color-debugging

Browse source 
Fix bug with random colour selection
This commit is contained in:
Jackson Harper 2023-08-04 11:59:12 +08:00 committed by GitHub
commit 4c1ec9f841
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/web/components/patterns/LibraryCards/FallbackImage.tsx
View file

@ -7,20 +7,30 @@ type FallbackImageProps = {
fontSize: string
}
export const FallbackImage = (props: FallbackImageProps): JSX.Element => {
const idx = (Math.abs(hashCode(props.title)) % Colors.length) - 1
const color = Colors[idx]
const colorsForStr = (str: string): string[] => {
try {
const idx = Math.abs(hashCode(str)) % (Colors.length - 1)
const color = Colors[idx]
if (color.colors[0] && color.colors[1]) {
return color.colors
}
} catch (err) {
console.log('error creating colors for', str)
}
return Colors[0].colors
}
export const FallbackImage = (props: FallbackImageProps): JSX.Element => {
const colors = colorsForStr(props.title)
return (
<VStack
distribution="center"
alignment="center"
css={{
// position: 'relative',
width: props.width,
height: props.height,
backgroundColor: color.colors[1],
color: color.colors[0],
backgroundColor: colors[1],
color: colors[0],
fontSize: props.fontSize,
fontWeight: 'bold',
fontFamily: '$display',

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

@ -41,7 +41,6 @@ export const TitleStyle = {
fontSize: '16px',
fontWeight: '700',
maxLines: 2,
lineHeight: '1.25',
fontFamily: '$display',
overflow: 'hidden',
textOverflow: 'ellipsis',

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

@ -171,7 +171,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
return (
<VStack css={{ p: '0px', m: '0px', width: '100%' }}>
<Box css={{ position: 'relative', width: '100%' }}>
<Box css={{ position: 'relative', width: '100%', height: '100px' }}>
<GridImage
src={props.item.image}
title={props.item.title}
@ -219,7 +219,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
<HStack
css={{
...MetaStyle,
pt: '15px',
mt: '15px',
px: '15px',
}}
distribution="start"
@ -230,12 +230,12 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
<VStack
alignment="start"
distribution="start"
css={{ height: '100%', width: '100%', px: '15px', pt: '5px' }}
css={{ height: '100%', width: '100%', px: '15px' }}
>
<Box
css={{
...TitleStyle,
height: '42px',
mt: '10px',
}}
>
{props.item.title}
@ -244,7 +244,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
css={{
...AuthorInfoStyle,
mt: '5px',
mb: '10px',
mb: '20px',
}}
>
{props.item.author}