changed horizontal editor

src/containers/App.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { hot } from 'react-hot-loader';
+import * as React from "react";
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+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} />
@@ -40,6 +41,9 @@ class Component extends React.Component<IAppProps, IAppState> {
 }
 
 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";
@@ -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 autoHeight autoHeightMax={500}>
+        <Scroll>
+          <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>
+          </Padder>
         </Scroll>
-        </Panel>
-        <Panel>
-          <InputText title="Заголовок" />
-        </Panel>
       </div>
 
       <div className={styles.panel}>
         <Padder>
-          <Grid columns="1fr 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>
-
+          <Grid columns="2fr 1fr 1fr">
             <div>
+              <Group>
+                <InputText title="Название" />
+
                 <Tags
                   tags={[
-                  { title: 'Избранный', feature: 'red' },
-                  { title: 'Плейлист', feature: 'green' },
-                  { title: 'Просто' },
-                  { title: '+ фото', feature: 'black' },
-                  { title: '+ с музыкой', feature: 'black' },
+                    { title: "Избранный", feature: "red" },
+                    { title: "Плейлист", feature: "green" },
+                    { title: "Просто" },
+                    { title: "+ фото", feature: "black" },
+                    { title: "+ с музыкой", feature: "black" }
                   ]}
                 />
+              </Group>
             </div>
 
-            <div>
-              <Button>Submit?</Button>
-            </div>
+            <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;