Merge pull request #1105 from omnivore-app/fix/library-masonry-layout

Use a masonry layout for the library layout

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

@@ -21,7 +21,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         cursor: 'pointer',
         wordBreak: 'break-word',
         overflow: 'clip',
-        border: '1px solid $border',
+        border: '1px solid $libraryActiveMenuItem',
         position: 'relative',
       }}
       alignment="start"

packages/web/components/templates/library/LibraryAvatar.tsx

@@ -16,7 +16,7 @@ export function LibraryAvatar(props: AvatarProps): JSX.Element {
           css={{
             width: '40px',
             height: '40px',
-            borderRadius: '6px',
+            borderRadius: '50%',
           }}
         >
           {props.viewer?.profile.pictureUrl 
@@ -56,7 +56,8 @@ const StyledFallback = styled(Fallback, {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  fontSize: '20px',
-  backgroundColor: '$omnivoreCtaYellow',
-  color: '#595959',
+  fontSize: '16px',
+  fontWeight: '600',
+  color: '$utilityTextDefault',
+  backgroundColor: '$libraryActiveMenuItem',
 })

packages/web/components/templates/library/LibraryHeadline.tsx

@@ -1,4 +1,4 @@
-import { HStack } from '../../elements/LayoutPrimitives'
+import { HStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
 import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
@@ -7,6 +7,7 @@ import { LibraryGridLayoutIcon } from '../../elements/images/LibraryGridLayoutIc
 import { Button } from '../../elements/Button'
 import { LayoutCoordinator, LibraryLayoutType } from './LibraryContainer'
 import { useCallback } from 'react'
+import { Plus } from 'phosphor-react'
 
 export type LibraryHeadlineProps = {
   layoutCoordinator: LayoutCoordinator
@@ -23,14 +24,17 @@ export function LibraryHeadline(props: LibraryHeadlineProps): JSX.Element {
   }, [props.layoutCoordinator.layout])
 
   return (
-    <HStack alignment="center" distribution="start" css={{ pt: '4px', pb: '8px', width: '100%', pr: '15px' }}>
+    <HStack alignment="center" distribution="start" css={{ pt: '8px', pb: '14px', width: '100%', pr: '15px' }}>
       <StyledText style="libraryHeader">Home</StyledText>
-      <HStack alignment="center" distribution="start" css={{ marginLeft: 'auto', gap: '16px' }}>
-        <Button style="ctaDarkYellow">Add Link</Button>
-        <Button style="ghost" onClick={() => props.layoutCoordinator.setLayout('LIST_LAYOUT')}>
+      <HStack alignment="center" distribution="start" css={{ marginLeft: 'auto', gap: '8px' }}>
+        <Button style="ctaDarkYellow" css={{ py: '10px', px: '14px', mr: '16px', display: 'flex', alignItems: 'center' }}>
+          <Plus size={16} weight='bold' />
+          <SpanBox css={{ pl: '10px', fontWeight: '600', fontSize: '16px' }}>Add Link</SpanBox>
+        </Button>
+        <Button style="ghost" onClick={() => props.layoutCoordinator.setLayout('LIST_LAYOUT')} css={{ display: 'flex', alignItems: 'center' }}>
           <LibraryListLayoutIcon color={typeColor('LIST_LAYOUT')} />
         </Button>
-        <Button style="ghost" onClick={() => props.layoutCoordinator.setLayout('GRID_LAYOUT')}>
+        <Button style="ghost" onClick={() => props.layoutCoordinator.setLayout('GRID_LAYOUT')} css={{ display: 'flex', alignItems: 'center' }}>
           <LibraryGridLayoutIcon color={typeColor('GRID_LAYOUT')} />
         </Button>
       </HStack>

packages/web/components/templates/library/LibraryList.tsx

@@ -7,6 +7,8 @@ import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes'
 import { LibraryGridCard } from '../../patterns/LibraryCards/LibraryGridCard'
 import { LayoutCoordinator } from './LibraryContainer'
 import { EmptyLibrary } from '../homeFeed/EmptyLibrary'
+import Masonry from 'react-masonry-css'
+
 
 export type LibraryListProps = {
   layoutCoordinator: LayoutCoordinator
@@ -46,32 +48,14 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
 
   return (
     <Box css={{ overflowY: 'scroll' }}>
-      <Box
-        css={{
-          width: '100%',
-          display: 'grid',
-          gridAutoRows: 'auto',
-          borderRadius: '8px',
-          marginBottom: '0px',
-          paddingRight: '14px',
-          paddingTop: '0px',
-          marginTop: '0px',
-          paddingBottom: '21px',
-          '@smDown': {
-            border: 'unset',
-            width: props.layoutCoordinator.layout == 'LIST_LAYOUT' ? '100vw' : undefined,
-            margin: props.layoutCoordinator.layout == 'LIST_LAYOUT' ? '16px -16px' : undefined,
-            borderRadius: props.layoutCoordinator.layout == 'LIST_LAYOUT' ? 0 : undefined,
-          },
-          '@lg': {
-            gridTemplateColumns:
-            props.layoutCoordinator.layout == 'LIST_LAYOUT' ? 'none' : '1fr 1fr',
-          },
-          '@xl': {
-            gridTemplateColumns:
-            props.layoutCoordinator.layout == 'LIST_LAYOUT' ? 'none' : 'repeat(3, 1fr)',
-          },
+      <Masonry
+        breakpointCols={props.layoutCoordinator.layout == 'LIST_LAYOUT' ? 1 : {
+          default: 3,
+          1200: 2,
+          992: 1
         }}
+        className="omnivore-masonry-grid"
+        columnClassName="omnivore-masonry-grid_column"
       >
         {libraryItems.map((linkedItem) => (
           <Box
@@ -109,9 +93,9 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
             )}
           </Box>
         ))}
-      </Box>
-        {/* Extra padding at bottom to give space for scrolling */}
-        <Box css={{ width: '100%', height: '200px' }} />
-      </Box>
+      </Masonry>
+      {/* Extra padding at bottom to give space for scrolling */}
+      <Box css={{ width: '100%', height: '200px' }} />
+    </Box>
   )
 }

packages/web/package.json

@@ -43,6 +43,7 @@
     "react-colorful": "^5.5.1",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.1.1",
+    "react-masonry-css": "^1.0.16",
     "react-pro-sidebar": "^0.7.1",
     "react-super-responsive-table": "^5.2.1",
     "react-topbar-progress-indicator": "^4.1.1",

packages/web/styles/globals.css

@@ -295,4 +295,22 @@ input[type=range]::-webkit-slider-thumb {
 button {
   padding: 0px;
   margin: 0px;
+}
+
+.omnivore-masonry-grid {
+  display: -webkit-box; /* Not needed if autoprefixing */
+  display: -ms-flexbox; /* Not needed if autoprefixing */
+  display: flex;
+  margin-left: -16px; /* gutter size offset */
+  margin-right: 14px;
+  width: auto;
+}
+.omnivore-masonry-grid_column {
+  padding-left: 16px; /* gutter size */
+  background-clip: padding-box;
+}
+
+.omnivore-masonry-grid_column > div {
+  /* background: grey; */
+  margin-bottom: 16px;
 }

yarn.lock

@@ -21245,6 +21245,11 @@ react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-masonry-css@^1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz#72b28b4ae3484e250534700860597553a10f1a2c"
+  integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==
+
 react-popper-tooltip@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz#329569eb7b287008f04fcbddb6370452ad3f9eac"