#23 fixed submit button appearance for lab

src/layouts/NodeLayout/index.tsx

@@ -0,0 +1,72 @@
+import React, { FC, memo } from 'react';
+import { RouteComponentProps } from 'react-router';
+import { selectNode } from '~/redux/node/selectors';
+import { Card } from '~/components/containers/Card';
+
+import { NodePanel } from '~/components/node/NodePanel';
+import { Footer } from '~/components/main/Footer';
+
+import styles from './styles.module.scss';
+import { SidebarRouter } from '~/containers/main/SidebarRouter';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { Container } from '~/containers/main/Container';
+import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
+import { NodeBottomBlock } from '~/components/node/NodeBottomBlock';
+import { useNodeCoverImage } from '~/utils/hooks/node/useNodeCoverImage';
+import { useScrollToTop } from '~/utils/hooks/useScrollToTop';
+import { useLoadNode } from '~/utils/hooks/node/useLoadNode';
+
+type IProps = RouteComponentProps<{ id: string }> & {};
+
+const NodeLayout: FC<IProps> = memo(
+  ({
+    match: {
+      params: { id },
+    },
+  }) => {
+    const {
+      is_loading,
+      current,
+      comments,
+      comment_count,
+      is_loading_comments,
+      related,
+    } = useShallowSelect(selectNode);
+
+    useNodeCoverImage(current);
+    useScrollToTop([id]);
+    useLoadNode(id, is_loading);
+
+    const { head, block } = useNodeBlocks(current, is_loading);
+
+    return (
+      <div className={styles.wrap}>
+        {head}
+
+        <Container>
+          <Card className={styles.node} seamless>
+            {block}
+
+            <NodePanel node={current} isLoading={is_loading} />
+
+            <NodeBottomBlock
+              node={current}
+              isLoadingComments={is_loading_comments}
+              comments={comments}
+              isLoading={is_loading}
+              commentsCount={comment_count}
+              commentsOrder="DESC"
+              related={related}
+            />
+
+            <Footer />
+          </Card>
+        </Container>
+
+        <SidebarRouter prefix="/post:id" />
+      </div>
+    );
+  }
+);
+
+export { NodeLayout };

src/layouts/NodeLayout/styles.module.scss

@@ -0,0 +1,44 @@
+@import "src/styles/variables";
+
+.content {
+  align-items: stretch !important;
+
+  @include vertical_at_tablet;
+}
+
+.comments {
+  flex: 3 1;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-start;
+  flex-direction: column;
+
+  @media (max-width: 1024px) {
+    flex: 2 1;
+  }
+}
+
+.panel {
+  flex: 1 3;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding-left: $gap / 2;
+  min-width: 0;
+  position: relative;
+  z-index: 10;
+
+  @media (max-width: 1024px) {
+    padding-left: 0;
+    padding-top: $comment_height / 2;
+    flex: 1 2;
+  }
+}
+
+.buttons {
+  background: $node_buttons_bg;
+  flex: 1;
+  border-radius: $panel_radius;
+  box-shadow: $comment_shadow;
+}