From e315b33284d55234aa433f22b54366a7fbc8711e Mon Sep 17 00:00:00 2001 From: muerwre Date: Fri, 26 Jul 2019 14:00:53 +0700 Subject: [PATCH] better sidepane --- package-lock.json | 158 +++++++++++++++--- package.json | 7 +- src/components/flow/Cell/index.tsx | 2 + src/components/flow/TestGrid/index.tsx | 18 +- src/components/login/LoginForm/index.tsx | 4 +- src/components/main/SidePane/index.tsx | 35 ++-- src/containers/App.tsx | 18 +- src/containers/FlowLayout/index.tsx | 13 -- src/containers/MainLayout/index.tsx | 17 -- src/containers/MainLayout/styles.scss | 4 - .../examples/ImageExample/index.tsx | 9 + src/containers/flow/FlowLayout/index.tsx | 10 ++ .../{ => login}/LoginLayout/index.tsx | 8 +- .../LoginLayout/styles.scss} | 0 src/containers/main/MainLayout/index.tsx | 18 ++ src/containers/main/MainLayout/styles.scss | 15 ++ src/containers/node/NodeLayout/index.tsx | 10 ++ src/containers/node/NodeLayout/styles.scss | 0 src/index.tsx | 6 - 19 files changed, 253 insertions(+), 99 deletions(-) delete mode 100644 src/containers/FlowLayout/index.tsx delete mode 100644 src/containers/MainLayout/index.tsx delete mode 100644 src/containers/MainLayout/styles.scss create mode 100644 src/containers/examples/ImageExample/index.tsx create mode 100644 src/containers/flow/FlowLayout/index.tsx rename src/containers/{ => login}/LoginLayout/index.tsx (69%) rename src/containers/{LoginLayout/style.scss => login/LoginLayout/styles.scss} (100%) create mode 100644 src/containers/main/MainLayout/index.tsx create mode 100644 src/containers/main/MainLayout/styles.scss create mode 100644 src/containers/node/NodeLayout/index.tsx create mode 100644 src/containers/node/NodeLayout/styles.scss diff --git a/package-lock.json b/package-lock.json index 09f0dd0a..5ccdad32 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2569,9 +2569,9 @@ "integrity": "sha512-2azXFP9n4aA2QNLkKm/F9pzKxgYj1SMawZ5Eh9iC21RH3XNcFsivLVU2NhpMgQm7YobSByvIol4c42ZFusXFHQ==" }, "@types/prop-types": { - "version": "15.7.0", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.0.tgz", - "integrity": "sha512-eItQyV43bj4rR3JPV0Skpl1SncRCdziTEK9/v8VwXmV6d/qOUO8/EuWeHBbCZcsfSHfzI5UyMJLCSXtxxznyZg==" + "version": "15.7.1", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz", + "integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==" }, "@types/q": { "version": "1.5.1", @@ -2580,9 +2580,9 @@ "dev": true }, "@types/react": { - "version": "16.8.1", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.1.tgz", - "integrity": "sha512-tD1ETKJcuhANOejRc/p7OgQ16DKnbGi0M3LccelKlPnUCDp2a5koVxZFoRN9HN+A+m84HB5VGN7I+r3nNhS3PA==", + "version": "16.8.23", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.23.tgz", + "integrity": "sha512-abkEOIeljniUN9qB5onp++g0EY38h7atnDHxwKUFz1r3VH1+yG1OKi2sNPTyObL40goBmfKFpdii2lEzwLX1cA==", "requires": { "@types/prop-types": "*", "csstype": "^2.2.0" @@ -4937,6 +4937,10 @@ } } }, + "classie": { + "version": "github:eiriklv/classie#da1d3019904433872a8656d3cd69fc41d69c477a", + "from": "github:eiriklv/classie" + }, "classnames": { "version": "2.2.6", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", @@ -6338,9 +6342,9 @@ } }, "csstype": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.3.tgz", - "integrity": "sha512-rINUZXOkcBmoHWEyu7JdHu5JMzkGRoMX4ov9830WNgxf5UYxcBUO0QTKAqeJ5EZfSdlrcJYkC8WwfVW7JYi4yg==" + "version": "2.6.6", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz", + "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==" }, "currently-unhandled": { "version": "0.4.1", @@ -6524,6 +6528,10 @@ "minimalistic-assert": "^1.0.0" } }, + "desandro-get-style-property": { + "version": "github:eiriklv/get-style-property#a5a74ad48d96c7d5ddcf652e9fa5d4283af37823", + "from": "github:eiriklv/get-style-property" + }, "destroy": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", @@ -6593,6 +6601,19 @@ "buffer-indexof": "^1.0.0" } }, + "doc-ready": { + "version": "github:eiriklv/doc-ready#31c2481101af5dab33311fea4c7fc684b58fa8ad", + "from": "github:eiriklv/doc-ready", + "requires": { + "eventie": "github:eiriklv/eventie" + }, + "dependencies": { + "eventie": { + "version": "github:eiriklv/eventie#c9d290c6aa57712257dc8c0b6bf21c9374190a3c", + "from": "github:eiriklv/eventie" + } + } + }, "doctrine": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", @@ -7282,12 +7303,21 @@ "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz", "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==" }, + "eventemitter": { + "version": "github:braznaavtrav/EventEmitter#7169056a2f8b3b55d78ab1b85bad39277e7e88b2", + "from": "github:braznaavtrav/EventEmitter" + }, "eventemitter3": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz", "integrity": "sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==", "dev": true }, + "eventie": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/eventie/-/eventie-1.0.6.tgz", + "integrity": "sha1-1P/IsMK15JPCqhsiy+kY067nRDc=" + }, "events": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz", @@ -8483,6 +8513,13 @@ "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz", "integrity": "sha1-9wLmMSfn4jHBYKgMFVSstw1QR+U=" }, + "get-size": { + "version": "github:eiriklv/get-size#c1ebd019815fc6247c094c17a41b61d0e8191b08", + "from": "github:eiriklv/get-size", + "requires": { + "desandro-get-style-property": "github:eiriklv/get-style-property" + } + }, "get-stdin": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", @@ -10445,6 +10482,10 @@ "object-visit": "^1.0.0" } }, + "matches-selector": { + "version": "github:desandro/matches-selector#082376f4bbe7ff8c5c6bb258ec43259c9a80a7c3", + "from": "github:desandro/matches-selector#v1.0.3" + }, "math-expression-evaluator": { "version": "1.2.17", "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", @@ -11697,6 +11738,24 @@ "os-tmpdir": "^1.0.0" } }, + "outlayer": { + "version": "github:eiriklv/outlayer#aea1c8239d30ccc1d3664ca3fff2f6d4b20fb812", + "from": "github:eiriklv/outlayer", + "requires": { + "desandro-get-style-property": "github:eiriklv/get-style-property", + "doc-ready": "github:eiriklv/doc-ready", + "eventemitter": "github:braznaavtrav/EventEmitter", + "eventie": "github:eiriklv/eventie", + "get-size": "github:eiriklv/get-size", + "matches-selector": "github:desandro/matches-selector#v1.0.3" + }, + "dependencies": { + "eventie": { + "version": "github:eiriklv/eventie#c9d290c6aa57712257dc8c0b6bf21c9374190a3c", + "from": "github:eiriklv/eventie" + } + } + }, "output-file-sync": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/output-file-sync/-/output-file-sync-2.0.1.tgz", @@ -11756,6 +11815,16 @@ "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=", "dev": true }, + "packery": { + "version": "github:eiriklv/packery#8e812a0a16575ef923f5e72efcea85aadc6fea67", + "from": "github:eiriklv/packery", + "requires": { + "classie": "github:eiriklv/classie", + "desandro-get-style-property": "github:eiriklv/get-style-property", + "get-size": "github:eiriklv/get-size", + "outlayer": "github:eiriklv/outlayer" + } + }, "pako": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz", @@ -13227,9 +13296,9 @@ "integrity": "sha1-HcKzrqYwKwhTbs7jGIyS0li4jOE=" }, "ramda": { - "version": "0.24.1", - "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.24.1.tgz", - "integrity": "sha1-w7d1UZfzW43DUCIoJixMkd22uFc=" + "version": "0.26.1", + "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.26.1.tgz", + "integrity": "sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==" }, "ramdasauce": { "version": "2.1.3", @@ -13237,6 +13306,13 @@ "integrity": "sha512-Ml3CPim4SKwmg5g9UI77lnRSeKr/kQw7YhQ6rfdMcBYy6DMlwmkEwQqjygJ3OhxPR+NfFfpjKl3Tf8GXckaqqg==", "requires": { "ramda": "^0.24.1" + }, + "dependencies": { + "ramda": { + "version": "0.24.1", + "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.24.1.tgz", + "integrity": "sha1-w7d1UZfzW43DUCIoJixMkd22uFc=" + } } }, "randombytes": { @@ -13288,14 +13364,14 @@ } }, "react": { - "version": "16.8.1", - "resolved": "https://registry.npmjs.org/react/-/react-16.8.1.tgz", - "integrity": "sha512-wLw5CFGPdo7p/AgteFz7GblI2JPOos0+biSoxf1FPsGxWQZdN/pj6oToJs1crn61DL3Ln7mN86uZ4j74p31ELQ==", + "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz", + "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.13.1" + "scheduler": "^0.13.6" }, "dependencies": { "prop-types": { @@ -13317,18 +13393,27 @@ } } } + }, + "scheduler": { + "version": "0.13.6", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz", + "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } } } }, "react-dom": { - "version": "16.8.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.1.tgz", - "integrity": "sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg==", + "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz", + "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.13.1" + "scheduler": "^0.13.6" }, "dependencies": { "prop-types": { @@ -13350,6 +13435,15 @@ } } } + }, + "scheduler": { + "version": "0.13.6", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz", + "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } } } }, @@ -13477,10 +13571,18 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/react-packery-component/-/react-packery-component-1.0.2.tgz", "integrity": "sha1-FSEiHaSRZ8s87fR9W1UsM0iBgKk=", + "requires": { + "imagesloaded": "github:eiriklv/imagesloaded", + "packery": "github:eiriklv/packery" + }, "dependencies": { "imagesloaded": { - "version": "git+https://github.com/eiriklv/imagesloaded.git#04535a148206e58790927e133f24ca199163b995", - "from": "git+https://github.com/eiriklv/imagesloaded.git" + "version": "github:eiriklv/imagesloaded#04535a148206e58790927e133f24ca199163b995", + "from": "github:eiriklv/imagesloaded", + "requires": { + "eventie": ">=1.0.4 <2", + "wolfy87-eventemitter": "4.x" + } } } }, @@ -13776,6 +13878,13 @@ "requires": { "ramda": "^0.24.1", "ramdasauce": "^2.0.0" + }, + "dependencies": { + "ramda": { + "version": "0.24.1", + "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.24.1.tgz", + "integrity": "sha1-w7d1UZfzW43DUCIoJixMkd22uFc=" + } } }, "regenerate": { @@ -17074,6 +17183,11 @@ "string-width": "^1.0.2 || 2" } }, + "wolfy87-eventemitter": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/wolfy87-eventemitter/-/wolfy87-eventemitter-4.3.0.tgz", + "integrity": "sha1-ZJc5bJXnQ1nwa241QJM5MY2Nlk8=" + }, "wordwrap": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", diff --git a/package.json b/package.json index 80c8f394..26e989e6 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "@hot-loader/react-dom": "^16.8.1", "@types/classnames": "^2.2.7", "@types/node": "^11.9.0", - "@types/react": "16.8.1", + "@types/react": "16.8.23", "axios": "^0.18.0", "babel-runtime": "^6.26.0", "classnames": "^2.2.6", @@ -70,8 +70,9 @@ "lodash": "^4.17.10", "node-sass": "^4.11.0", "raleway-cyrillic": "^4.0.2", - "react": "16.8.1", - "react-dom": "16.8.1", + "ramda": "^0.26.1", + "react": "16.8.6", + "react-dom": "16.8.6", "react-grid-layout": "^0.16.6", "react-hot-loader": "^4.1.1", "react-layout-pack": "^0.2.3", diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx index a23ea07f..67af7343 100644 --- a/src/components/flow/Cell/index.tsx +++ b/src/components/flow/Cell/index.tsx @@ -7,6 +7,7 @@ interface IProps { width?: number; title?: string; is_hero?: boolean; + is_stamp?: boolean; } const Cell: FC = ({ @@ -14,6 +15,7 @@ const Cell: FC = ({ height = 1, title, is_hero, + is_stamp, }) => (
( title="Example cell Example cell Example cell Example cell Example cell Example cell Example cell " is_hero /> - - - - - + { + range(1,20).map(el => ( + + )) + }
); diff --git a/src/components/login/LoginForm/index.tsx b/src/components/login/LoginForm/index.tsx index bc1ac13e..152af805 100644 --- a/src/components/login/LoginForm/index.tsx +++ b/src/components/login/LoginForm/index.tsx @@ -7,8 +7,8 @@ import { userSendLoginRequest, userSetLoginError } from "~/redux/user/actions"; import { IUserFormStateLogin, IUserState } from "~/redux/user/reducer"; import { Info } from "~/components/input/Info"; -const login = require('~/containers/LoginLayout/style'); -const style = require('./style.scss'); +import * as login from '~/containers/login/LoginLayout/styles.scss'; +import * as style from './style.scss'; interface ILoginFormProps { error: IUserFormStateLogin['error'], diff --git a/src/components/main/SidePane/index.tsx b/src/components/main/SidePane/index.tsx index 9b17f5c9..d1e0117c 100644 --- a/src/components/main/SidePane/index.tsx +++ b/src/components/main/SidePane/index.tsx @@ -1,25 +1,38 @@ -import React, { useEffect, useState } from 'react'; +import React, { FC, LegacyRef, ReactChild, useCallback, useEffect, useState } from 'react'; import * as styles from './styles.scss'; import classNames from 'classnames'; -export const SidePane = ({ }) => { +interface IProps { + container: React.RefObject; +} + +export const SidePane: FC = ({ + container, +}) => { const [left, setLeft] = useState(0); - const moveThis = () => { - const shift = ((document.body.getBoundingClientRect().width - 1024) / 2) - 54 - 10; + const moveThis = useCallback(() => { + const shift = window.innerWidth > (1024 + 64 + 20) + ? ((window.innerWidth - 1024 - 64 - 20) / 2) - 54 - 10 + 64 + : 10; + setLeft(shift); - }; + console.log({ shift }); + }, [setLeft, container]); useEffect(() => { - window.addEventListener('resize', moveThis) + moveThis(); + window.addEventListener('resize', moveThis); + document.addEventListener('DOMContentLoaded', moveThis); - return () => { window.removeEventListener('resize', moveThis); } - }); - - useEffect(moveThis, []); + return () => { + window.removeEventListener('resize', moveThis); + document.removeEventListener('DOMContentLoaded', moveThis); + } + }, [container]); return ( -
+
diff --git a/src/containers/App.tsx b/src/containers/App.tsx index bc493b6f..e0210379 100644 --- a/src/containers/App.tsx +++ b/src/containers/App.tsx @@ -5,8 +5,10 @@ import { hot } from 'react-hot-loader'; import { ConnectedRouter } from "connected-react-router"; import { history } from "~/redux/store"; import { NavLink, Switch, Route } from 'react-router-dom'; -import { FlowLayout } from "~/containers/FlowLayout"; -import { LoginLayout } from "~/containers/LoginLayout"; +import { FlowLayout } from "~/containers/flow/FlowLayout"; +import { LoginLayout } from "~/containers/login/LoginLayout"; +import { MainLayout } from "~/containers/main/MainLayout"; +import { ImageExample } from "~/containers/examples/ImageExample"; interface IAppProps {} interface IAppState {} @@ -15,19 +17,17 @@ class Component extends React.Component { render() { return ( -
+ - + + + -
+ ); } diff --git a/src/containers/FlowLayout/index.tsx b/src/containers/FlowLayout/index.tsx deleted file mode 100644 index 30cc5ed9..00000000 --- a/src/containers/FlowLayout/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -import { MainLayout } from "~/containers/MainLayout"; -import { HeroPlaceholder } from "~/components/flow/HeroPlaceholder"; -import { TestGrid } from "~/components/flow/TestGrid"; -// const style = require('./style.scss'); - -export const FlowLayout = () => ( - -
- -
- -); diff --git a/src/containers/MainLayout/index.tsx b/src/containers/MainLayout/index.tsx deleted file mode 100644 index bb7ac411..00000000 --- a/src/containers/MainLayout/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; -import { SidePane } from "~/components/main/SidePane"; -import { Header } from "~/components/main/Header"; - -import * as styles from './styles.scss'; - -export const MainLayout = ({ children }) => ( -
- { - //
- } - { - - } - {children} -
-); diff --git a/src/containers/MainLayout/styles.scss b/src/containers/MainLayout/styles.scss deleted file mode 100644 index 42e73742..00000000 --- a/src/containers/MainLayout/styles.scss +++ /dev/null @@ -1,4 +0,0 @@ -.wrapper { - width: 100%; - padding: $gap 0; -} diff --git a/src/containers/examples/ImageExample/index.tsx b/src/containers/examples/ImageExample/index.tsx new file mode 100644 index 00000000..97564dc4 --- /dev/null +++ b/src/containers/examples/ImageExample/index.tsx @@ -0,0 +1,9 @@ +import React, { FC } from 'react'; + +interface IProps {} + +const ImageExample: FC = () => ( +
image example
+); + +export { ImageExample }; diff --git a/src/containers/flow/FlowLayout/index.tsx b/src/containers/flow/FlowLayout/index.tsx new file mode 100644 index 00000000..581f431b --- /dev/null +++ b/src/containers/flow/FlowLayout/index.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import { MainLayout } from "~/containers/main/MainLayout"; +import { TestGrid } from "~/components/flow/TestGrid"; +// const style = require('./style.scss'); + +export const FlowLayout = () => ( +
+ +
+); diff --git a/src/containers/LoginLayout/index.tsx b/src/containers/login/LoginLayout/index.tsx similarity index 69% rename from src/containers/LoginLayout/index.tsx rename to src/containers/login/LoginLayout/index.tsx index cb364ca2..af6fa6cb 100644 --- a/src/containers/LoginLayout/index.tsx +++ b/src/containers/login/LoginLayout/index.tsx @@ -3,15 +3,15 @@ import { LoginForm } from '~/components/login/LoginForm'; import { Header } from "~/components/main/Header"; import { GodRays } from "~/components/main/GodRays"; -const style = require('./style.scss'); +import * as styles from './styles.scss'; export const LoginLayout: React.FunctionComponent<{}> = () => ( -
+
-
+
-
+
diff --git a/src/containers/LoginLayout/style.scss b/src/containers/login/LoginLayout/styles.scss similarity index 100% rename from src/containers/LoginLayout/style.scss rename to src/containers/login/LoginLayout/styles.scss diff --git a/src/containers/main/MainLayout/index.tsx b/src/containers/main/MainLayout/index.tsx new file mode 100644 index 00000000..be560aee --- /dev/null +++ b/src/containers/main/MainLayout/index.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { SidePane } from "~/components/main/SidePane"; +import * as styles from './styles.scss'; +import { useRef } from "react"; + +export const MainLayout = ({ children }) => { + const container = useRef(null); + + return ( +
+
+ {children} +
+ + +
+ ); +}; diff --git a/src/containers/main/MainLayout/styles.scss b/src/containers/main/MainLayout/styles.scss new file mode 100644 index 00000000..098e85a4 --- /dev/null +++ b/src/containers/main/MainLayout/styles.scss @@ -0,0 +1,15 @@ +.wrapper { + width: 100%; + padding: $gap $gap 0 74px; + display: flex; + align-items: flex-start; + justify-content: center; + flex-direction: row; + box-sizing: border-box; +} + +.content { + flex: 0 1 $content_width; + position: relative; + background: red; +} diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx new file mode 100644 index 00000000..7e4bf731 --- /dev/null +++ b/src/containers/node/NodeLayout/index.tsx @@ -0,0 +1,10 @@ +import React, { FC } from 'react'; +import * as styles from './styles.scss'; + +interface IProps {} + +const NodeLayout: FC = () => ( +
+); + +export { NodeLayout }; diff --git a/src/containers/node/NodeLayout/styles.scss b/src/containers/node/NodeLayout/styles.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/index.tsx b/src/index.tsx index 80ee80bb..62a91f27 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,9 +1,3 @@ -/* - LAYOUT PACKING: - https://github.com/rexxars/react-layout-pack - https://github.com/gxapplications/react-gridifier - https://github.com/STRML/react-grid-layout - */ import * as React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux';