From 69a84278e5239f1c8861d21c54af80ddf8f08303 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 4 Aug 2023 10:07:45 +0800 Subject: [PATCH 1/4] Some debugging for color generation --- .../web/components/patterns/LibraryCards/FallbackImage.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/web/components/patterns/LibraryCards/FallbackImage.tsx b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx index 83edd385c..28574bb9f 100644 --- a/packages/web/components/patterns/LibraryCards/FallbackImage.tsx +++ b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx @@ -8,8 +8,11 @@ type FallbackImageProps = { } export const FallbackImage = (props: FallbackImageProps): JSX.Element => { + console.log('checking title: ', props.title) const idx = (Math.abs(hashCode(props.title)) % Colors.length) - 1 + console.log('title', props.title, 'idx: ', idx) const color = Colors[idx] + console.log('color:', color) return ( Date: Fri, 4 Aug 2023 10:22:08 +0800 Subject: [PATCH 2/4] Fix colors.length modulus --- packages/web/components/patterns/LibraryCards/FallbackImage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/patterns/LibraryCards/FallbackImage.tsx b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx index 28574bb9f..8cdc64aaa 100644 --- a/packages/web/components/patterns/LibraryCards/FallbackImage.tsx +++ b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx @@ -9,7 +9,7 @@ type FallbackImageProps = { export const FallbackImage = (props: FallbackImageProps): JSX.Element => { console.log('checking title: ', props.title) - const idx = (Math.abs(hashCode(props.title)) % Colors.length) - 1 + const idx = Math.abs(hashCode(props.title)) % (Colors.length - 1) console.log('title', props.title, 'idx: ', idx) const color = Colors[idx] console.log('color:', color) From 5e6c34b9235d7e3d576919cacd740131cb96de80 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 4 Aug 2023 10:28:21 +0800 Subject: [PATCH 3/4] Fix off by one in colour generation --- .../patterns/LibraryCards/FallbackImage.tsx | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/web/components/patterns/LibraryCards/FallbackImage.tsx b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx index 8cdc64aaa..2f904ea42 100644 --- a/packages/web/components/patterns/LibraryCards/FallbackImage.tsx +++ b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx @@ -7,13 +7,21 @@ type FallbackImageProps = { fontSize: string } -export const FallbackImage = (props: FallbackImageProps): JSX.Element => { - console.log('checking title: ', props.title) - const idx = Math.abs(hashCode(props.title)) % (Colors.length - 1) - console.log('title', props.title, 'idx: ', idx) - const color = Colors[idx] - console.log('color:', color) +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 ( { // 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', From 20baa571109bcaaf50c0b59842263c053ca7ccbd Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 4 Aug 2023 11:37:40 +0800 Subject: [PATCH 4/4] Some grid card positioning tweaks --- .../components/patterns/LibraryCards/FallbackImage.tsx | 1 - .../patterns/LibraryCards/LibraryCardStyles.tsx | 1 - .../patterns/LibraryCards/LibraryGridCard.tsx | 10 +++++----- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/web/components/patterns/LibraryCards/FallbackImage.tsx b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx index 2f904ea42..b1c8bbd48 100644 --- a/packages/web/components/patterns/LibraryCards/FallbackImage.tsx +++ b/packages/web/components/patterns/LibraryCards/FallbackImage.tsx @@ -27,7 +27,6 @@ export const FallbackImage = (props: FallbackImageProps): JSX.Element => { distribution="center" alignment="center" css={{ - // position: 'relative', width: props.width, height: props.height, backgroundColor: colors[1], diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx index c69f90072..73a1c49ce 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx @@ -41,7 +41,6 @@ export const TitleStyle = { fontSize: '16px', fontWeight: '700', maxLines: 2, - lineHeight: '1.25', fontFamily: '$display', overflow: 'hidden', textOverflow: 'ellipsis', diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index dd4b1fa6b..8da73a814 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -171,7 +171,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => { return ( - + { { {props.item.title} @@ -244,7 +244,7 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => { css={{ ...AuthorInfoStyle, mt: '5px', - mb: '10px', + mb: '20px', }} > {props.item.author}