image layout

src/components/containers/Filler/index.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import * as styles from './styles.scss';
+
+type IProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Filler: FC<IProps> = ({
+  className = '',
+  ...props
+}) => (
+  <div
+    className={classNames(
+      styles.filler,
+      className,
+    )}
+    {...props}
+  />
+);

src/components/containers/Filler/styles.scss

@@ -0,0 +1,3 @@
+.filler {
+  flex: 1;
+}

src/components/containers/Group/styles.scss

@@ -29,7 +29,7 @@
     }
 
     & > * {
-      margin: 0 $gap;
+      margin: 0 $gap / 2;
 
       &:first-child { margin-left: 0; }
       &:last-child { margin-right: 0; }

src/components/main/SidePane/index.tsx

@@ -3,22 +3,20 @@ import * as styles from './styles.scss';
 import classNames from 'classnames';
 
 interface IProps {
-  container: React.RefObject<HTMLDivElement>;
 }
 
 export const SidePane: FC<IProps> = ({
-  container,
 }) => {
+  const content_width = 1100;
   const [left, setLeft] = useState(0);
 
   const moveThis = useCallback(() => {
-    const shift = window.innerWidth > (1024 + 64 + 20)
-      ? ((window.innerWidth - 1024 - 64 - 20) / 2) - 54 - 10 + 64
+    const shift = window.innerWidth > (content_width + 64 + 20)
+      ? ((window.innerWidth - content_width - 64 - 20) / 2) - 54 - 10 + 64
       : 10;
 
     setLeft(shift);
-    console.log({ shift });
-  }, [setLeft, container]);
+  }, [setLeft]);
 
   useEffect(() => {
     moveThis();
@@ -29,7 +27,7 @@ export const SidePane: FC<IProps> = ({
       window.removeEventListener('resize', moveThis);
       document.removeEventListener('DOMContentLoaded', moveThis);
     }
-  }, [container]);
+  }, []);
 
   return (
     <div className={styles.pane} style={{ transform: `translate(${left}px, 0px)` }}>

src/components/node/NodePanel/index.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+import { Group } from "~/components/containers/Group";
+import { Filler } from "~/components/containers/Filler";
+
+interface IProps {}
+
+const NodePanel: FC<IProps> = () => (
+    <div className={styles.wrap}>
+      <Group horizontal className={styles.panel}>
+        <Filler>
+          <div className={styles.title}>Node title</div>
+          <div className={styles.name}>~author</div>
+        </Filler>
+      </Group>
+
+      <div className={styles.mark} />
+    </div>
+);
+
+export { NodePanel };

src/components/node/NodePanel/styles.scss

@@ -0,0 +1,76 @@
+.wrap {
+  //height: $node_title_height;
+  //background: $node_title_background;
+  background: transparentize(black, 0.9);
+  padding: $gap;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  //border-radius: $radius $radius 0 0;
+  //box-shadow: transparentize(black, 0.3) 0 2px, inset transparentize(white, 0.98) 0 1px;
+  box-shadow: transparentize(white, 0.97) 0 1px, inset transparentize(white, 0.97) 0 1px;
+  position: relative;
+}
+
+.title {
+  text-transform: uppercase;
+  font: $font_24_semibold;
+  height: 24px;
+  padding-bottom: 6px;
+}
+
+.name {
+  font: $font_12_regular;
+  color: transparentize(white, 0.5);
+}
+
+.btn {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  fill: transparentize(white, 0.5);
+}
+
+.panel {
+  flex: 1;
+}
+
+.buttons {
+  height: 54px;
+  border-radius: $radius $radius 0 0;
+  background: linear-gradient(176deg, #f42a00, #5c1085);
+  background: #222222;
+  position: absolute;
+  bottom: 0;
+  right: 10px;
+  width: 270px;
+  display: flex;
+}
+
+.mark {
+  flex: 0 0 32px;
+  background: red;
+  position: relative;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    top: -38px;
+    right: 4px;
+    width: 24px;
+    height: 52px;
+    background: #ff3344;
+    box-shadow: transparentize(black, 0.8) 4px 2px;
+  }
+}
+
+.sep {
+  flex: 0 0 12px;
+  height: 6px;
+  width: 12px;
+  border-radius: 4px;
+  background: transparentize(black, 0.7);
+}