fluid flow

src/components/flow/TestGrid/index.tsx

@@ -6,31 +6,10 @@ import * as styles from './styles.scss';
 
 export const TestGrid = () => (
   <div>
-    <div
-      style={{
-        // gridRow: "1 / 2",
-        // gridColumn: "1 / -1",
-        background: '#222222',
-        borderRadius: 6,
-        height: 300,
-        marginBottom: 4,
-        display: 'flex',
-      }}
-    >
-      HERO
-    </div>
-
     <div className={styles.grid_test}>
-      <div
+      <div className={styles.hero}>HERO</div>
-        style={{
+
-          gridRow: '1 / 3',
+      <div className={styles.stamp}>STAMP</div>
-          gridColumn: '-2 / -1',
-          background: '#090909',
-          borderRadius: 4,
-        }}
-      >
-        STAMP
-      </div>
 
       {range(1, 20).map(el => (
         <Cell

src/components/flow/TestGrid/styles.scss

@@ -17,3 +17,32 @@ $cols: $content_width / $cell;
 .pad_last {
   grid-column-end: $cols + 1;
 }
+
+.hero {
+  grid-row-start: 0;
+  grid-row-end: span 2;
+  grid-column-start: 0;
+  grid-column-end: span 4;
+  // gridRow: "1 / 2",
+  // gridColumn: "1 / -1",
+  background: #222222;
+  border-radius: $radius;
+  // height: 33vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_24_semibold;
+}
+
+.stamp {
+  // grid-row: -1 / 3;
+  grid-row-end: span 3;
+  grid-column: -2 / -1;
+  background: #090909;
+  border-radius: $radius;
+  padding: $gap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_24_semibold;
+}

src/components/main/Header/index.tsx

@@ -25,7 +25,7 @@ const HeaderUnconnected: FC<IProps> = ({ username, is_user, showDialog }) => {
   const onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]);
 
   return (
-    <div className="default_container head_container">
+    <div>
       <div className={style.container}>
         <Logo />
 

src/components/main/Header/style.scss

@@ -4,6 +4,7 @@
   justify-content: flex-end;
   font-weight: 500;
   height: 96px;
+  margin-top: -20px;
 }
 
 .spacer {

src/containers/App.tsx

@@ -1,11 +1,8 @@
-import * as React from 'react';
+import React, { FC } from 'react';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 import { hot } from 'react-hot-loader';
 import { ConnectedRouter } from 'connected-react-router';
-import {
+import { Switch, Route, Redirect } from 'react-router-dom';
-  NavLink, Switch, Route, Redirect
-} from 'react-router-dom';
 import { history } from '~/redux/store';
 import { FlowLayout } from '~/containers/flow/FlowLayout';
 import { MainLayout } from '~/containers/main/MainLayout';
@@ -23,29 +20,28 @@ const mapDispatchToProps = {};
 
 type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {};
 
-class Component extends React.Component<IProps, {}> {
+const Component: FC<IProps> = ({ is_shown }) => (
-  render() {
+  <ConnectedRouter history={history}>
-    return (
+    <BlurWrapper is_blurred={is_shown}>
-      <ConnectedRouter history={history}>
+      <Modal />
-        <BlurWrapper is_blurred={this.props.is_shown}>
+      <Sprites />
-          <MainLayout>
-            <Modal />
-            <Sprites />
 
-            <Switch>
+      <Switch>
-              <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
+        <Route exact path={URLS.BASE} component={FlowLayout} />
-              <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
-              <Route path="/examples/horizontal" component={HorizontalExample} />
-              <Route exact path={URLS.BASE} component={FlowLayout} />
 
-              <Redirect to="/" />
+        <MainLayout>
-            </Switch>
+          <Switch>
-          </MainLayout>
+            <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
-        </BlurWrapper>
+            <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
-      </ConnectedRouter>
+            <Route path="/examples/horizontal" component={HorizontalExample} />
-    );
+
-  }
+            <Redirect to="/" />
-}
+          </Switch>
+        </MainLayout>
+      </Switch>
+    </BlurWrapper>
+  </ConnectedRouter>
+);
 
 export default connect(
   mapStateToProps,

src/containers/examples/ImageExample/index.tsx

@@ -10,17 +10,16 @@ import { NodeRelated } from '~/components/node/NodeRelated';
 import { Tags } from '~/components/node/Tags';
 import { MenuButton } from '~/components/node/MenuButton';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { InputText } from '~/components/input/InputText';
 
 interface IProps {}
 
 const ImageExample: FC<IProps> = () => (
   <Card className={styles.node} seamless>
-    <InputText />
     <div className={styles.image_container}>
       <img
         className={styles.image}
         src="http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg"
+        alt=""
       />
     </div>
 
@@ -41,11 +40,7 @@ const ImageExample: FC<IProps> = () => (
             <Group style={{ flex: 1 }}>
               <Padder className={styles.buttons}>
                 <Group>
-                  <MenuButton
+                  <MenuButton title="На главной" description="плывет по течению" icon="star" />
-                    title="На главной"
-                    description="плывет по течению"
-                    icon="star"
-                  />
 
                   <MenuButton title="Видно всем" icon="star" />
 
@@ -59,7 +54,7 @@ const ImageExample: FC<IProps> = () => (
                   { title: 'Плейлист', feature: 'green' },
                   { title: 'Просто' },
                   { title: '+ фото', feature: 'black' },
-                  { title: '+ с музыкой', feature: 'black' }
+                  { title: '+ с музыкой', feature: 'black' },
                 ]}
               />
 

src/containers/flow/FlowLayout/index.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { TestGrid } from '~/components/flow/TestGrid';
+import * as styles from './styles.scss';
+import { Header } from '~/components/main/Header';
 
 export const FlowLayout = () => (
-  <div className="default_container content_container">
+  <div className={styles.wrap}>
+    <Header />
     <TestGrid />
   </div>
 );

src/containers/flow/FlowLayout/styles.scss

@@ -0,0 +1,6 @@
+.wrap {
+  max-width: 2000px;
+  padding: 0 40px 40px 40px;
+  display: flex;
+  flex-direction: column;
+}

src/redux/node/reducer.ts

@@ -17,19 +17,7 @@ const INITIAL_STATE: INodeState = {
     ...EMPTY_NODE,
     type: 'image',
     blocks: [{ ...EMPTY_BLOCK, type: 'image' }],
-    files: [
+    files: [],
-      // { ...EMPTY_FILE, id: uuid() },
-      // { ...EMPTY_FILE, id: uuid() },
-      // { ...EMPTY_FILE, id: uuid() },
-      // { ...EMPTY_FILE, id: uuid() },
-      // { ...EMPTY_FILE, id: uuid() },
-      // { ...EMPTY_FILE, id: uuid() },
-      // { ...EMPTY_FILE, id: uuid() },
-      // { ...EMPTY_FILE, id: uuid() },
-      // { ...EMPTY_FILE, id: uuid() },
-      // { ...EMPTY_FILE, id: uuid() },
-      // { ...EMPTY_FILE, id: uuid() },
-    ],
   },
   is_loading: false,
   error: null,