diff --git a/src/containers/lab/LabGrid/index.tsx b/src/containers/lab/LabGrid/index.tsx index 0b6bce0e..f5b5e212 100644 --- a/src/containers/lab/LabGrid/index.tsx +++ b/src/containers/lab/LabGrid/index.tsx @@ -1,4 +1,5 @@ import React, { FC } from 'react'; +import Masonry from 'react-masonry-css'; import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; import styles from './styles.module.scss'; import { LabNode } from '~/components/lab/LabNode'; @@ -8,6 +9,11 @@ import { values } from 'ramda'; interface IProps {} +const breakpointCols = { + default: 2, + 1280: 1, +}; + const getRandomNodeType = () => values(NODE_TYPES)[Math.floor(Math.random() * values(NODE_TYPES).length)]; @@ -26,17 +32,30 @@ const LabGrid: FC = () => { if (is_loading) { return ( -
+ -
+ + + + + + ); } return ( -
+ {nodes.map(node => ( = () => { commentCount={node.comment_count} /> ))} -
+ ); }; diff --git a/src/containers/lab/LabGrid/styles.module.scss b/src/containers/lab/LabGrid/styles.module.scss index e58bb06d..ebb9e957 100644 --- a/src/containers/lab/LabGrid/styles.module.scss +++ b/src/containers/lab/LabGrid/styles.module.scss @@ -1,8 +1,17 @@ @import "~/styles/variables.scss"; -.wrap { - display: grid; - grid-auto-flow: row; - grid-auto-rows: auto; - grid-row-gap: $gap * 2; +div.wrap { + display: flex; + width: 100%; + margin-right: 0; +} + +.column { + background-clip: padding-box; + box-sizing: border-box; + padding: 0 $gap / 2; + + & > div { + margin-bottom: $gap; + } } diff --git a/src/layouts/LabLayout/index.tsx b/src/layouts/LabLayout/index.tsx index d06c6286..dd96967c 100644 --- a/src/layouts/LabLayout/index.tsx +++ b/src/layouts/LabLayout/index.tsx @@ -18,20 +18,9 @@ import classNames from 'classnames'; interface IProps {} -enum Layout { - Fluid = 'fluid', - Default = 'default', -} - const LabLayout: FC = () => { const { is_loading } = useShallowSelect(selectLabList); const dispatch = useDispatch(); - const [layout, setLayout] = usePersistedState('lab_layout', Layout.Default); - - const isFluid = layout === Layout.Fluid; - const toggleLayout = useCallback(() => { - setLayout(isFluid ? Layout.Default : Layout.Fluid); - }, [setLayout, isFluid]); useEffect(() => { dispatch(labGetList()); @@ -39,8 +28,8 @@ const LabLayout: FC = () => { }, [dispatch]); return ( -
-
+ +
@@ -56,7 +45,7 @@ const LabLayout: FC = () => {
-
+
); }; diff --git a/src/layouts/LabLayout/styles.module.scss b/src/layouts/LabLayout/styles.module.scss index 02cd8de0..7d2b266e 100644 --- a/src/layouts/LabLayout/styles.module.scss +++ b/src/layouts/LabLayout/styles.module.scss @@ -1,28 +1,15 @@ @import "~/styles/variables.scss"; -@mixin fluid { - @media(min-width: $content_width) { - .fluid & { - @content - } - } -} - .wrap { display: grid; grid-template-columns: 3fr 1fr; - column-gap: $gap; + column-gap: $gap/2; @include tablet { grid-template-columns: 1fr; grid-auto-flow: row; padding: 0 $gap / 2; } - - @include fluid { - grid-template-columns: 3fr $cell; - padding: 0 $gap; - } } .panel {