From 5bdfeb6ce40a8c10bd400c06a3db5c8990f00ee5 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Wed, 30 Jun 2021 14:43:45 +0700 Subject: [PATCH] added fluid lab --- package.json | 1 + src/components/flow/FlowStamp/index.tsx | 15 +++++---- src/containers/lab/LabGrid/index.tsx | 21 +++++++++--- src/containers/lab/LabGrid/styles.module.scss | 21 +++++++++--- src/layouts/LabLayout/index.tsx | 32 ++++++++++++++++--- src/layouts/LabLayout/styles.module.scss | 30 +++++++++++++++++ yarn.lock | 5 +++ 7 files changed, 107 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 4ac467bf..a7698031 100644 --- a/package.json +++ b/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", diff --git a/src/components/flow/FlowStamp/index.tsx b/src/components/flow/FlowStamp/index.tsx index e11e872c..cf8b3308 100644 --- a/src/components/flow/FlowStamp/index.tsx +++ b/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 = ({ )} -
- - -
Жидкое течение
- -
+ +
+ + +
Жидкое течение
+ +
+ ); }; diff --git a/src/containers/lab/LabGrid/index.tsx b/src/containers/lab/LabGrid/index.tsx index 0b6bce0e..cc75373b 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'; @@ -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 = () => { +const LabGrid: FC = ({ isFluid }) => { const nodes = useShallowSelect(selectLabListNodes); const { is_loading } = useShallowSelect(selectLabList); @@ -36,7 +45,11 @@ const LabGrid: FC = () => { } 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..2725a475 100644 --- a/src/containers/lab/LabGrid/styles.module.scss +++ b/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; + } } diff --git a/src/layouts/LabLayout/index.tsx b/src/layouts/LabLayout/index.tsx index 314d6c0c..37f85a22 100644 --- a/src/layouts/LabLayout/index.tsx +++ b/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 = () => { 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 = () => { return (
- +
- +
+ + +
+ + +
Жидкая лаборатория
+ +
+
- +
diff --git a/src/layouts/LabLayout/styles.module.scss b/src/layouts/LabLayout/styles.module.scss index 17f70529..02cd8de0 100644 --- a/src/layouts/LabLayout/styles.module.scss +++ b/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; +} diff --git a/yarn.lock b/yarn.lock index 681b82ce..ef3dda46 100644 --- a/yarn.lock +++ b/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"