Compact List view Creation

packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx

@@ -1,10 +1,10 @@
 import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
-import { CoverImage } from '../../elements/CoverImage'
+// import { CoverImage } from '../../elements/CoverImage'
 import { StyledText } from '../../elements/StyledText'
 import { removeHTMLTags } from '../ArticleSubtitle'
-import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
+// import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
 import { theme } from '../../tokens/stitches.config'
-import { CardMenu } from '../CardMenu'
+// import { CardMenu } from '../CardMenu'
 import { LabelChip } from '../../elements/LabelChip'
 import { ProgressBar } from '../../elements/ProgressBar'
 import type { LinkedItemCardProps } from './CardTypes'
@@ -13,7 +13,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
   return (
     <VStack
       css={{
-        p: '12px',
+        // p: '12px',
         height: '100%',
         width: '100%',
         maxWidth: '100%',
@@ -30,7 +30,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         props.handleAction('showDetail')
       }}
     >
-      {props.item.image && props.layout !== 'LIST_LAYOUT' && (
+      {/* {props.item.image && props.layout !== 'LIST_LAYOUT' && (
         <CoverImage
           src={props.item.image}
           alt="Link Preview Image"
@@ -41,7 +41,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             ;(e.target as HTMLElement).style.display = 'none'
           }}
         />
-      )}
+      )} */}
       <VStack
         distribution="start"
         alignment="start"
@@ -56,16 +56,40 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           distribution="between"
           css={{
             width: '100%',
-            p: '0px',
-            mr: '-12px',
-            mt: '15px',
             display: 'grid',
-            gridTemplateColumns: '1fr 24px',
+            gridTemplateColumns: '1fr 2fr 150px',
             gridTemplateRows: '1fr',
           }}
         >
           <CardTitle title={props.item.title} />
-          <Box
+          <StyledText
+            css={{
+              color: '$grayTextContrast',
+              overflow: 'hidden',
+              display: '-webkit-box',
+              WebkitLineClamp: 1,
+              WebkitBoxOrient: 'vertical',
+              p: '0 10px 0 0',
+            }}
+            data-testid="listDesc"
+          >
+            {/* <Box css={{ display: 'block', py: '12px' }}> */}
+              {props.item.labels?.map(({ name, color }, index) => (
+                <LabelChip key={index} text={name || ''} color={color} />
+              ))}
+            {/* </Box> */}
+            {props.item.description}
+          </StyledText>
+
+          <StyledText
+            style="caption"
+            css={{ fontWeight: '600', margin: '5px 8px 5px 0' }}
+          >
+            {props.item.author && (
+              <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
+            )}
+          </StyledText>
+          {/* <Box
             css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
             onClick={(e) => {
               // This is here to prevent menu click events from bubbling
@@ -85,9 +109,9 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
               }
               actionHandler={props.handleAction}
             />
-          </Box>
+          </Box> */}
         </HStack>
-        <HStack alignment="start" distribution="between">
+        {/* <HStack alignment="start" distribution="between">
           <StyledText style="caption" css={{fontWeight: '600', margin: '5px 8px 5px 0' }}>
             {props.item.author && (
               <SpanBox>
@@ -112,7 +136,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
               </>
             )}
           </StyledText>
-        </HStack>
+        </HStack> */}
       </VStack>
       <HStack
         alignment="start"
@@ -122,36 +146,15 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           pt: '$2',
           px: '$1',
           pr: '12px',
-          mt: '7px',
+          // mt: '7px',
           flexGrow: '1',
         }}
-      >
-        <StyledText
-          css={{
-            m: 0,
-            py: '0px',
-            mr: '$2',
-            fontStyle: 'normal',
-            fontWeight: '400',
-            fontSize: '14px',
-            lineHeight: '125%',
-            color: '$grayTextContrast',
-            flexGrow: '4',
-            overflow: 'hidden',
-            display: '-webkit-box',
-            WebkitLineClamp: 5,
-            WebkitBoxOrient: 'vertical',
-          }}
-          data-testid="listDesc"
-        >
-          {props.item.description}
-        </StyledText>
-      </HStack>
-      <Box css={{ display: 'block', py: '12px' }}>
+      ></HStack>
+      {/* <Box css={{ display: 'block', py: '12px' }}>
         {props.item.labels?.map(({ name, color }, index) => (
           <LabelChip key={index} text={name || ''} color={color} />
         ))}
-      </Box>
+      </Box> */}
       <ProgressBar
         fillPercentage={props.item.readingProgressPercent}
         fillColor={theme.colors.highlight.toString()}
@@ -174,15 +177,14 @@ function CardTitle(props: CardTitleProps): JSX.Element {
       style="listTitle"
       data-testid="listTitle"
       css={{
-        mt: '0',
-        mb: '0',
         fontSize: '18px',
         textAlign: 'left',
-        lineHeight: '1.25',
-        // whiteSpace: 'nowrap',
-        // textOverflow: 'ellipsis',
-        width: '100%',
-        // overflow: 'hidden',
+        // lineHeight: '1.25',
+        overflow: 'hidden',
+        display: '-webkit-box',
+        WebkitLineClamp: 1,
+        WebkitBoxOrient: 'vertical',
+        p: '0 15px 0 0',
       }}
     >
       {props.title}