changed horizontal editor

src/containers/App.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import * as React from "react";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import { bindActionCreators } from 'redux';
+import { bindActionCreators } from "redux";
-import { hot } from 'react-hot-loader';
+import { hot } from "react-hot-loader";
 import { ConnectedRouter } from "connected-react-router";
 import { history } from "~/redux/store";
-import { NavLink, Switch, Route, Redirect } from 'react-router-dom';
+import { NavLink, Switch, Route, Redirect } from "react-router-dom";
 import { FlowLayout } from "~/containers/flow/FlowLayout";
 import { LoginLayout } from "~/containers/login/LoginLayout";
 import { MainLayout } from "~/containers/main/MainLayout";
@@ -27,6 +27,7 @@ class Component extends React.Component<IAppProps, IAppState> {
           <Switch>
             <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
             <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
+            <Route path="/examples/horizontal" component={HorizontalExample} />
             <Route exact path={URLS.BASE} component={FlowLayout} />
 
             <Route path={URLS.AUTH.LOGIN} component={LoginLayout} />
@@ -39,7 +40,10 @@ class Component extends React.Component<IAppProps, IAppState> {
   }
 }
 
-const mapStateToProps = (state, props) => ({ });
+const mapStateToProps = (state, props) => ({});
-const mapDispatchToProps = (dispatch) => bindActionCreators({}, dispatch);
+const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);
 
-export default connect(mapStateToProps, mapDispatchToProps)(hot(module)(Component));
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(hot(module)(Component));

src/containers/examples/HorizontalExample/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
+import React, { FC } from "react";
 import { Card } from "~/components/containers/Card";
-import * as styles from './styles.scss';
+import * as styles from "./styles.scss";
 import { Group } from "~/components/containers/Group";
 import { Padder } from "~/components/containers/Padder";
 import { CellGrid } from "~/components/containers/CellGrid";
@@ -10,7 +10,7 @@ import { Scroll } from "~/components/containers/Scroll";
 import { Tags } from "~/components/node/Tags";
 import { Button } from "~/components/input/Button";
 import { InputText } from "~/components/input/InputText";
-import {Grid} from "~/components/containers/Grid";
+import { Grid } from "~/components/containers/Grid";
 
 interface IProps {}
 
@@ -18,8 +18,8 @@ const HorizontalExample: FC<IProps> = () => (
   <Card className={styles.wrap} seamless>
     <Group className={styles.group} seamless>
       <div className={styles.editor}>
-        <Panel className={classNames(styles.editor_panel, styles.editor_image_panel)}>
+        <Scroll>
-          <Scroll autoHeight autoHeightMax={500}>
+          <Padder>
             <CellGrid className={styles.editor_image_container} size={200}>
               <div className={styles.editor_image} />
               <div className={styles.editor_image} />
@@ -29,46 +29,33 @@ const HorizontalExample: FC<IProps> = () => (
               <div className={styles.editor_image} />
               <div className={styles.editor_image} />
               <div className={styles.editor_image} />
-              <div className={styles.editor_image} />
-              <div className={styles.editor_image} />
-              <div className={styles.editor_image} />
-              <div className={styles.editor_image} />
-              <div className={styles.editor_image} />
-              <div className={styles.editor_image} />
             </CellGrid>
-          </Scroll>
+          </Padder>
-        </Panel>
+        </Scroll>
-        <Panel>
-          <InputText title="Заголовок" />
-        </Panel>
       </div>
 
       <div className={styles.panel}>
         <Padder>
-          <Grid columns="1fr 1fr 1fr">
+          <Grid columns="2fr 1fr 1fr">
-            <Group>
-              <Card className={styles.feature_card}>Layout setup</Card>
-
-              <Card className={styles.feature_card}>Cover changer</Card>
-
-              <Card className={styles.feature_card}>Track</Card>
-            </Group>
-
             <div>
-              <Tags
+              <Group>
-                tags={[
+                <InputText title="Название" />
-                  { title: 'Избранный', feature: 'red' },
+
-                  { title: 'Плейлист', feature: 'green' },
+                <Tags
-                  { title: 'Просто' },
+                  tags={[
-                  { title: '+ фото', feature: 'black' },
+                    { title: "Избранный", feature: "red" },
-                  { title: '+ с музыкой', feature: 'black' },
+                    { title: "Плейлист", feature: "green" },
-                ]}
+                    { title: "Просто" },
-              />
+                    { title: "+ фото", feature: "black" },
+                    { title: "+ с музыкой", feature: "black" }
+                  ]}
+                />
+              </Group>
             </div>
 
-            <div>
+            <div />
-              <Button>Submit?</Button>
+
-            </div>
+            <div />
           </Grid>
         </Padder>
       </div>

src/containers/examples/HorizontalExample/styles.scss

@@ -3,7 +3,7 @@
   justify-content: center;
   display: flex;
   background: $editor_bg;
-  //flex: 1;
+  flex: 1;
 }
 
 .group {
@@ -23,7 +23,7 @@
 }
 
 .editor {
-  //flex: 2;
+  flex: 1;
   display: flex;
   align-items: stretch;
   flex-direction: column;