diff --git a/src/containers/lab/LabGrid/index.tsx b/src/containers/lab/LabGrid/index.tsx index cc75373b..0b6bce0e 100644 --- a/src/containers/lab/LabGrid/index.tsx +++ b/src/containers/lab/LabGrid/index.tsx @@ -1,5 +1,4 @@ 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'; @@ -7,15 +6,7 @@ import { selectLabList, selectLabListNodes } from '~/redux/lab/selectors'; import { EMPTY_NODE, NODE_TYPES } from '~/redux/node/constants'; import { values } from 'ramda'; -interface IProps { - isFluid: boolean; -} - -const breakpointColumnsObj = { - default: 3, - 1100: 2, - 700: 1, -}; +interface IProps {} const getRandomNodeType = () => values(NODE_TYPES)[Math.floor(Math.random() * values(NODE_TYPES).length)]; @@ -29,7 +20,7 @@ const LoadingNode = () => ( /> ); -const LabGrid: FC = ({ isFluid }) => { +const LabGrid: FC = () => { const nodes = useShallowSelect(selectLabListNodes); const { is_loading } = useShallowSelect(selectLabList); @@ -45,11 +36,7 @@ const LabGrid: FC = ({ isFluid }) => { } return ( - +
{nodes.map(node => ( = ({ isFluid }) => { commentCount={node.comment_count} /> ))} - +
); }; diff --git a/src/containers/lab/LabGrid/styles.module.scss b/src/containers/lab/LabGrid/styles.module.scss index 2725a475..e58bb06d 100644 --- a/src/containers/lab/LabGrid/styles.module.scss +++ b/src/containers/lab/LabGrid/styles.module.scss @@ -1,21 +1,8 @@ @import "~/styles/variables.scss"; -$gutter: $gap * 2; - .wrap { - display: -webkit-box; /* Not needed if autoprefixing */ - display: -ms-flexbox; /* Not needed if autoprefixing */ - display: flex; - width: 100%; - position: relative; - left: -$gutter; -} - -.column { - padding-left: $gutter; /* gutter size */ - background-clip: padding-box; - - & > div { - margin-bottom: $gutter; - } + display: grid; + grid-auto-flow: row; + grid-auto-rows: auto; + grid-row-gap: $gap * 2; } diff --git a/src/layouts/LabLayout/index.tsx b/src/layouts/LabLayout/index.tsx index 37f85a22..d06c6286 100644 --- a/src/layouts/LabLayout/index.tsx +++ b/src/layouts/LabLayout/index.tsx @@ -44,21 +44,12 @@ const LabLayout: FC = () => {
- +
- - -
- - -
Жидкая лаборатория
-
-
-