better editor layout

src/containers/App.tsx

@@ -10,6 +10,8 @@ import { LoginLayout } from "~/containers/login/LoginLayout";
 import { MainLayout } from "~/containers/main/MainLayout";
 import { ImageExample } from "~/containers/examples/ImageExample";
 import { EditorExample } from "~/containers/examples/EditorExample";
+import { HorizontalExample } from "~/containers/examples/HorizontalExample";
+import { Sprites } from "~/sprites/Sprites";
 
 interface IAppProps {}
 interface IAppState {}
@@ -19,9 +21,12 @@ class Component extends React.Component<IAppProps, IAppState> {
     return (
       <ConnectedRouter history={history}>
         <MainLayout>
+          <Sprites />
+
           <Switch>
             <Route path="/examples/image" component={ImageExample} />
             <Route path="/examples/edit" component={EditorExample} />
+            <Route path="/examples/horizontal" component={HorizontalExample} />
             <Route path="/" component={FlowLayout} />
 
             <Route path="/login" component={LoginLayout} />

src/containers/examples/EditorExample/index.tsx

@@ -8,11 +8,12 @@ import { Panel } from "~/components/containers/Panel";
 import { TextInput } from "~/components/input/TextInput";
 import classNames = require("classnames");
 import { Scroll } from "~/components/containers/Scroll";
-import { Grid } from "~/components/containers/Grid";
 import { Tags } from "~/components/node/Tags";
 import { Button } from "~/components/input/Button";
 import { Filler } from "~/components/containers/Filler";
 import { InputText } from "~/components/input/InputText";
+import {Grid} from "~/components/containers/Grid";
+import {Icon} from "~/components/input/Icon";
 
 interface IProps {}
 
@@ -20,14 +21,6 @@ const EditorExample: FC<IProps> = () => (
     <Card className={styles.wrap} seamless>
       <Group horizontal className={styles.group} seamless>
         <div className={styles.editor}>
-          <Panel>
-            <TextInput onChange={console.log} label="Название" value="Значение" />
-          </Panel>
-
-          <Panel>
-            <InputText title="Заголовок" />
-          </Panel>
-
           <Panel className={classNames(styles.editor_panel, styles.editor_image_panel)}>
             <Scroll>
               <CellGrid className={styles.editor_image_container} size={200}>
@@ -41,30 +34,35 @@ const EditorExample: FC<IProps> = () => (
         </div>
 
         <div className={styles.panel}>
-          <Filler>
-            <Padder>
-              <Group>
-                <Card className={styles.feature_card}>Layout setup</Card>
+          <Panel>
+            <Group>
+              <InputText title="Заголовок" />
 
-                <Card className={styles.feature_card}>Cover changer</Card>
+              <Tags
+                tags={[
+                  { title: 'Избранный', feature: 'red' },
+                  { title: 'Плейлист', feature: 'green' },
+                  { title: 'Просто' },
+                  { title: '+ фото', feature: 'black' },
+                  { title: '+ с музыкой', feature: 'black' },
+                ]}
+              />
+            </Group>
+          </Panel>
 
-                <Card className={styles.feature_card}>Track</Card>
+          <Panel stretchy>
+            <Group>
+              <Card className={styles.feature_card}>ОБОИ ПОСТА</Card>
 
-                <Tags
-                  tags={[
-                    { title: 'Избранный', feature: 'red' },
-                    { title: 'Плейлист', feature: 'green' },
-                    { title: 'Просто' },
-                    { title: '+ фото', feature: 'black' },
-                    { title: '+ с музыкой', feature: 'black' },
-                  ]}
-                />
+              <Card className={styles.feature_card}>МУЗЫКА</Card>
 
-                <Filler />
+              <Card className={styles.feature_card}>
+                <Icon icon="cell-single" />
+              </Card>
 
-              </Group>
-            </Padder>
-          </Filler>
+              <Filler />
+            </Group>
+          </Panel>
 
           <Panel>
             <Button>Submit?</Button>

src/containers/examples/EditorExample/styles.scss

@@ -16,12 +16,10 @@
 .panel {
   background: $editor_panel_bg;
   flex: 1;
-  //border-radius: 0 $radius $radius 0;
   border-radius: $radius;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  //@include outer_shadow();
 }
 
 .editor {
@@ -49,8 +47,14 @@
 }
 
 .feature_card {
-  height: 100px;
-  background: darken($main_bg_color, 3%);
+  height: 120px;
+  background: darken($main_bg_color, 6%);
+  color: transparentize(white, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+  font: $font_18_semibold;
 }
 
 .panel_main {

src/containers/examples/HorizontalExample/index.tsx

@@ -0,0 +1,79 @@
+import React, { FC } from 'react';
+import { Card } from "~/components/containers/Card";
+import * as styles from './styles.scss';
+import { Group } from "~/components/containers/Group";
+import { Padder } from "~/components/containers/Padder";
+import { CellGrid } from "~/components/containers/CellGrid";
+import { Panel } from "~/components/containers/Panel";
+import classNames = require("classnames");
+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";
+
+interface IProps {}
+
+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}>
+            <CellGrid className={styles.editor_image_container} size={200}>
+              <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} />
+              <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>
+        </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>
+
+            <div>
+              <Tags
+                tags={[
+                  { title: 'Избранный', feature: 'red' },
+                  { title: 'Плейлист', feature: 'green' },
+                  { title: 'Просто' },
+                  { title: '+ фото', feature: 'black' },
+                  { title: '+ с музыкой', feature: 'black' },
+                ]}
+              />
+            </div>
+
+            <div>
+              <Button>Submit?</Button>
+            </div>
+          </Grid>
+        </Padder>
+      </div>
+    </Group>
+  </Card>
+);
+
+export { HorizontalExample };

src/containers/examples/HorizontalExample/styles.scss

@@ -0,0 +1,65 @@
+.wrap {
+  align-items: stretch;
+  justify-content: center;
+  display: flex;
+  background: $editor_bg;
+  //flex: 1;
+}
+
+.group {
+  display: flex;
+  align-items: stretch !important;
+  justify-content: stretch;
+  //flex: 1;
+}
+
+.panel {
+  background: $editor_panel_bg;
+  //flex: 1;
+  border-radius: $radius;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor {
+  //flex: 2;
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+}
+
+.editor_panel {
+}
+
+.editor_image_panel {
+  // flex: 1;
+}
+
+.editor_image_container {
+  flex: 1;
+}
+
+.editor_image {
+  background: transparentize(white, 0.95);
+  padding-bottom: 100%;
+  border-radius: $radius;
+}
+
+.feature_card {
+  height: 100px;
+  background: darken($main_bg_color, 3%);
+}
+
+.panel_main {
+  flex: 1;
+  display: flex;
+}
+
+.close_icon {
+  height: 24px;
+  width: 24px;
+  background: transparentize(white, 0.95);
+  flex: 0 0 24px;
+  border-radius: $radius;
+}