removed fluid lab

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 {
+interface IProps {}
-  isFluid: boolean;
-}
-
-const breakpointColumnsObj = {
-  default: 3,
-  1100: 2,
-  700: 1,
-};
 
 const getRandomNodeType = () =>
   values(NODE_TYPES)[Math.floor(Math.random() * values(NODE_TYPES).length)];
@@ -29,7 +20,7 @@ const LoadingNode = () => (
   />
 );
 
-const LabGrid: FC<IProps> = ({ isFluid }) => {
+const LabGrid: FC<IProps> = () => {
   const nodes = useShallowSelect(selectLabListNodes);
   const { is_loading } = useShallowSelect(selectLabList);
 
@@ -45,11 +36,7 @@ const LabGrid: FC<IProps> = ({ isFluid }) => {
   }
 
   return (
-    <Masonry
+    <div className={styles.wrap}>
-      className={styles.wrap}
-      breakpointCols={isFluid ? breakpointColumnsObj : 1}
-      columnClassName={styles.column}
-    >
       {nodes.map(node => (
         <LabNode
           node={node.node}
@@ -58,7 +45,7 @@ const LabGrid: FC<IProps> = ({ isFluid }) => {
           commentCount={node.comment_count}
         />
       ))}
-    </Masonry>
+    </div>
   );
 };
 

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: grid;
-  display: -ms-flexbox; /* Not needed if autoprefixing */
+  grid-auto-flow: row;
-  display: flex;
+  grid-auto-rows: auto;
-  width: 100%;
+  grid-row-gap: $gap * 2;
-  position: relative;
-  left: -$gutter;
-}
-
-.column {
- padding-left: $gutter; /* gutter size */
-  background-clip: padding-box;
-
-  & > div {
-    margin-bottom: $gutter;
-  }
 }

src/layouts/LabLayout/index.tsx

@@ -44,21 +44,12 @@ const LabLayout: FC<IProps> = () => {
         <div className={styles.wrap}>
           <Group className={styles.content}>
             <LabHead isLoading={is_loading} />
-            <LabGrid isFluid={isFluid} />
+            <LabGrid />
           </Group>
 
           <div className={styles.panel}>
             <Sticky>
               <LabStats />
-
-              <Superpower>
-                <div className={styles.toggles}>
-                  <Group horizontal onClick={toggleLayout} className={styles.fluid_toggle}>
-                    <Toggle value={isFluid} />
-                    <div className={styles.toggles__label}>Жидкая лаборатория</div>
-                  </Group>
-                </div>
-              </Superpower>
             </Sticky>
           </div>
         </div>