added fluid lab

package.json

@@ -25,6 +25,7 @@
     "ramda": "^0.26.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-masonry-css": "^1.0.16",
     "react-popper": "^2.2.3",
     "react-redux": "^7.2.2",
     "react-router": "^5.1.2",

src/components/flow/FlowStamp/index.tsx

@@ -9,6 +9,7 @@ import { Icon } from '~/components/input/Icon';
 import { Group } from '~/components/containers/Group';
 import { Toggle } from '~/components/input/Toggle';
 import classNames from 'classnames';
+import { Superpower } from '~/components/boris/Superpower';
 
 interface IProps {
   recent: IFlowState['recent'];
@@ -93,12 +94,14 @@ const FlowStamp: FC<IProps> = ({
         )}
       </div>
 
-      <div className={styles.toggles}>
-        <Group horizontal onClick={toggleLayout} className={styles.fluid_toggle}>
-          <Toggle value={isFluid} />
-          <div className={styles.toggles__label}>Жидкое течение</div>
-        </Group>
-      </div>
+      <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>
     </div>
   );
 };

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';
@@ -6,7 +7,15 @@ 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)];
@@ -20,7 +29,7 @@ const LoadingNode = () => (
   />
 );
 
-const LabGrid: FC<IProps> = () => {
+const LabGrid: FC<IProps> = ({ isFluid }) => {
   const nodes = useShallowSelect(selectLabListNodes);
   const { is_loading } = useShallowSelect(selectLabList);
 
@@ -36,7 +45,11 @@ const LabGrid: FC<IProps> = () => {
   }
 
   return (
-    <div className={styles.wrap}>
+    <Masonry
+      className={styles.wrap}
+      breakpointCols={isFluid ? breakpointColumnsObj : 1}
+      columnClassName={styles.column}
+    >
       {nodes.map(node => (
         <LabNode
           node={node.node}
@@ -45,7 +58,7 @@ const LabGrid: FC<IProps> = () => {
           commentCount={node.comment_count}
         />
       ))}
-    </div>
+    </Masonry>
   );
 };
 

src/containers/lab/LabGrid/styles.module.scss

@@ -1,8 +1,21 @@
 @import "~/styles/variables.scss";
 
+$gutter: $gap * 2;
+
 .wrap {
-  display: grid;
-  grid-auto-flow: row;
-  grid-auto-rows: auto;
-  grid-row-gap: $gap * 2;
+  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;
+  }
 }

src/layouts/LabLayout/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC, useCallback, useEffect } from 'react';
 import styles from './styles.module.scss';
 import { Sticky } from '~/components/containers/Sticky';
 import { Container } from '~/containers/main/Container';
@@ -11,12 +11,27 @@ import { LabStats } from '~/containers/lab/LabStats';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectLabList } from '~/redux/lab/selectors';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
+import { Superpower } from '~/components/boris/Superpower';
+import { Toggle } from '~/components/input/Toggle';
+import { usePersistedState } from '~/utils/hooks/usePersistedState';
+import classNames from 'classnames';
 
 interface IProps {}
 
+enum Layout {
+  Fluid = 'fluid',
+  Default = 'default',
+}
+
 const LabLayout: FC<IProps> = () => {
   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());
@@ -25,20 +40,29 @@ const LabLayout: FC<IProps> = () => {
 
   return (
     <div>
-      <Container>
+      <div className={classNames(styles.container, { [styles.fluid]: isFluid })}>
         <div className={styles.wrap}>
           <Group className={styles.content}>
             <LabHead isLoading={is_loading} />
-            <LabGrid />
+            <LabGrid isFluid={isFluid} />
           </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>
-      </Container>
+      </div>
 
       <SidebarRouter prefix="/lab" isLab />
     </div>

src/layouts/LabLayout/styles.module.scss

@@ -1,5 +1,13 @@
 @import "~/styles/variables.scss";
 
+@mixin fluid {
+  @media(min-width: $content_width) {
+    .fluid & {
+      @content
+    }
+  }
+}
+
 .wrap {
   display: grid;
   grid-template-columns: 3fr 1fr;
@@ -10,6 +18,11 @@
     grid-auto-flow: row;
     padding: 0 $gap / 2;
   }
+
+  @include fluid {
+    grid-template-columns: 3fr $cell;
+    padding: 0 $gap;
+  }
 }
 
 .panel {
@@ -24,3 +37,20 @@
     margin: 0 $gap $gap 0;
   }
 }
+
+.toggles {
+  padding: $gap;
+}
+
+.container {
+  width: 100%;
+  max-width: $content_width;
+
+  &.fluid {
+    max-width: 100vw;
+  }
+}
+
+.content {
+  min-width: 0;
+}

yarn.lock

@@ -9386,6 +9386,11 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+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@^2.2.3:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.4.tgz#d2ad3d2474ac9f1abf93df3099d408e5aa6a2e22"