From 63e47a87ad9de9fb13e7dff7bf5572ea5f891c88 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 3 Aug 2023 16:51:54 +0800 Subject: [PATCH 1/5] Lower z-index for hover actions so they dont display over header --- .../web/components/patterns/LibraryCards/LibraryGridCard.tsx | 2 +- .../web/components/patterns/LibraryCards/LibraryListCard.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index b5002cd22..a198be1e8 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -89,7 +89,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { {!isTouchScreenDevice() && ( Date: Thu, 3 Aug 2023 17:05:36 +0800 Subject: [PATCH 2/5] Update margins on the list view, better title line spacing --- .../web/components/patterns/LibraryCards/LibraryCardStyles.tsx | 3 ++- .../web/components/patterns/LibraryCards/LibraryGridCard.tsx | 2 -- .../web/components/patterns/LibraryCards/LibraryListCard.tsx | 3 +-- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx index 19fdf4e4a..3afa78ae5 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx @@ -34,7 +34,8 @@ export const TitleStyle = { color: '$thTextContrast2', fontSize: '16px', fontWeight: '700', - lineHeight: '1', + 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 a198be1e8..97dc12f00 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -237,8 +237,6 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => { diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx index 3cdecf106..f10b68741 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx @@ -60,8 +60,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element { css={{ px: '20px', pl: '10px', - pt: '20px', - pb: '20px', + py: '15px', height: '100%', cursor: 'pointer', gap: '10px', From e289e29b16da01d76e816ee86823eadc5cb23cce Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 3 Aug 2023 17:38:07 +0800 Subject: [PATCH 3/5] Fix multiselect header spacing on small screens --- .../web/components/templates/homeFeed/LibraryHeader.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx index cb823203b..98f529410 100644 --- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx +++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx @@ -576,10 +576,11 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element { distribution={props.multiSelectMode !== 'off' ? 'center' : 'start'} css={{ gap: '10px', + width: '95%', '@mdDown': { + width: props.multiSelectMode !== 'off' ? '100%' : '95%', display: props.multiSelectMode !== 'off' ? 'flex' : 'none', }, - width: '95%', '@media (min-width: 930px)': { width: '660px', }, @@ -599,9 +600,6 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element { display: 'flex', gap: '2px', alignItems: 'center', - '@mdDown': { - mx: '20px', - }, }} > Date: Thu, 3 Aug 2023 18:00:46 +0800 Subject: [PATCH 4/5] Improve spacing for new list view and header --- packages/web/components/elements/Button.tsx | 1 + .../LibraryCards/LibraryCardStyles.tsx | 5 ++- .../patterns/LibraryCards/LibraryListCard.tsx | 33 +++++++++---------- .../templates/homeFeed/LibraryHeader.tsx | 2 +- 4 files changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx index 4d36a2b2d..f220190ff 100644 --- a/packages/web/components/elements/Button.tsx +++ b/packages/web/components/elements/Button.tsx @@ -244,6 +244,7 @@ export const Button = styled('button', { '&:hover': { opacity: 0.7, }, + '&:focus': { outline: 'none' }, }, articleActionIcon: { bg: 'transparent', diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx index 3afa78ae5..ff4afeb63 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx @@ -28,6 +28,10 @@ export const MetaStyle = { fontSize: '12px', fontWeight: '400', fontFamily: '$display', + maxLines: 1, + overflow: 'hidden', + textOverflow: 'ellipsis', + wordBreak: 'break-word', } export const TitleStyle = { @@ -67,7 +71,6 @@ export const AuthorInfoStyle = { textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '240px', - overflow: 'hidden', color: '$thTextSubtle3', fontSize: '12px', fontWeight: '400', diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx index f10b68741..839a2cb5b 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx @@ -270,31 +270,28 @@ export function LibraryListCardContent( distribution="start" css={{ height: '100%', width: '100%', lineHeight: 1, gap: '5px' }} > - - - - + + - {props.item.title} + {props.item.title} + {(props.item.author?.length ?? 0 + originText.length) > 0 && ( {props.item.author} @@ -303,7 +300,7 @@ export function LibraryListCardContent( {originText} - + )} Date: Thu, 3 Aug 2023 18:22:06 +0800 Subject: [PATCH 5/5] Tweak some colours --- .../patterns/LibraryCards/LibraryCardStyles.tsx | 10 ++++++---- .../patterns/LibraryCards/LibraryGridCard.tsx | 1 - .../patterns/LibraryCards/LibraryListCard.tsx | 7 ------- 3 files changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx index ff4afeb63..c69f90072 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx @@ -24,14 +24,16 @@ export const MenuStyle = { export const MetaStyle = { width: '100%', - color: '$thTextSubtle3', + color: '$thTextSubtle2', fontSize: '12px', - fontWeight: '400', + fontWeight: '500', fontFamily: '$display', maxLines: 1, - overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'break-word', + lineHeight: 1.1, + overflowX: 'hidden', + overflowY: 'visible', } export const TitleStyle = { @@ -71,7 +73,7 @@ export const AuthorInfoStyle = { textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '240px', - color: '$thTextSubtle3', + color: '$thNotebookSubtle', fontSize: '12px', fontWeight: '400', fontFamily: '$display', diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index 97dc12f00..7911dff91 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -222,7 +222,6 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => { minHeight: '35px', pt: '15px', px: '15px', - color: '$grayText', }} distribution="start" > diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx index 839a2cb5b..df16d2a66 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx @@ -273,10 +273,6 @@ export function LibraryListCardContent( @@ -289,9 +285,6 @@ export function LibraryListCardContent( css={{ ...AuthorInfoStyle, maxWidth: '90%', - - overflowX: 'hidden', - overflowY: 'visible', }} > {props.item.author}