#23 fixed submit button appearance for lab

src/layouts/FlowLayout/index.tsx

@@ -0,0 +1,97 @@
+import React, { FC, useCallback, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { FlowGrid } from '~/components/flow/FlowGrid';
+import { selectFlow } from '~/redux/flow/selectors';
+import * as NODE_ACTIONS from '~/redux/node/actions';
+import * as FLOW_ACTIONS from '~/redux/flow/actions';
+import { pick } from 'ramda';
+import { selectUser } from '~/redux/auth/selectors';
+import { FlowHero } from '~/components/flow/FlowHero';
+import styles from './styles.module.scss';
+import { IState } from '~/redux/store';
+import { FlowStamp } from '~/components/flow/FlowStamp';
+import { Container } from '~/containers/main/Container';
+import { SidebarRouter } from '~/containers/main/SidebarRouter';
+
+const mapStateToProps = (state: IState) => ({
+  flow: pick(['nodes', 'heroes', 'recent', 'updated', 'is_loading', 'search'], selectFlow(state)),
+  user: pick(['role', 'id'], selectUser(state)),
+});
+
+const mapDispatchToProps = {
+  nodeGotoNode: NODE_ACTIONS.nodeGotoNode,
+  flowSetCellView: FLOW_ACTIONS.flowSetCellView,
+  flowGetMore: FLOW_ACTIONS.flowGetMore,
+  flowChangeSearch: FLOW_ACTIONS.flowChangeSearch,
+  flowLoadMoreSearch: FLOW_ACTIONS.flowLoadMoreSearch,
+};
+
+type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+
+const FlowLayoutUnconnected: FC<IProps> = ({
+  flow: { nodes, heroes, recent, updated, is_loading, search },
+  user,
+  nodeGotoNode,
+  flowSetCellView,
+  flowGetMore,
+  flowChangeSearch,
+  flowLoadMoreSearch,
+}) => {
+  const onLoadMore = useCallback(() => {
+    (window as any).flowScrollPos = window.scrollY;
+
+    const pos = window.scrollY + window.innerHeight - document.body.scrollHeight;
+
+    if (is_loading || pos < -600) return;
+
+    flowGetMore();
+  }, [flowGetMore, is_loading]);
+
+  const onLoadMoreSearch = useCallback(() => {
+    if (search.is_loading_more) return;
+    flowLoadMoreSearch();
+  }, [search.is_loading_more, flowLoadMoreSearch]);
+
+  useEffect(() => {
+    window.addEventListener('scroll', onLoadMore);
+
+    return () => window.removeEventListener('scroll', onLoadMore);
+  }, [onLoadMore]);
+
+  useEffect(() => {
+    window.scrollTo(0, (window as any).flowScrollPos || 0);
+  }, []);
+
+  return (
+    <Container>
+      <div className={styles.grid}>
+        <div className={styles.hero}>
+          <FlowHero heroes={heroes} />
+        </div>
+
+        <div className={styles.stamp}>
+          <FlowStamp
+            recent={recent}
+            updated={updated}
+            search={search}
+            flowChangeSearch={flowChangeSearch}
+            onLoadMore={onLoadMoreSearch}
+          />
+        </div>
+
+        <FlowGrid
+          nodes={nodes}
+          user={user}
+          onSelect={nodeGotoNode}
+          onChangeCellView={flowSetCellView}
+        />
+      </div>
+
+      <SidebarRouter prefix="/" />
+    </Container>
+  );
+};
+
+const FlowLayout = connect(mapStateToProps, mapDispatchToProps)(FlowLayoutUnconnected);
+
+export { FlowLayout, FlowLayoutUnconnected };

src/layouts/FlowLayout/styles.module.scss

@@ -0,0 +1,86 @@
+@import "src/styles/variables";
+
+.wrap {
+  max-width: 2000px;
+  padding: 0 40px 40px 40px;
+  display: flex;
+  flex-direction: column;
+}
+
+$cols: $content_width / $cell;
+
+.grid {
+  display: grid;
+
+  grid-template-columns: repeat(5, 1fr); 
+  grid-template-rows: 50vh $cell;
+  grid-auto-rows: $cell;
+
+  grid-auto-flow: row dense;
+  grid-column-gap: $gap;
+  grid-row-gap: $gap;
+
+  @include tablet {
+    padding: 0 $gap;
+  }
+
+  @media (max-width: $cell * 6) {
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: 50vh 20vw;
+    grid-auto-rows: 20vw;
+  }
+
+  @media (max-width: $cell * 5) {
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: 40vh 25vw;
+    grid-auto-rows: 25vw;
+  }
+
+  @media (max-width: $cell * 4) {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 40vh 33vw;
+    grid-auto-rows: 33vw;
+  }
+
+  @media (max-width: $cell * 3) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 40vh 50vw;
+    grid-auto-rows: 50vw;
+    grid-column-gap: $gap / 2;
+    grid-row-gap: $gap / 2;
+    padding: 0 $gap / 2;
+  }
+
+  @media (max-width: $cell * 2) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 40vh 50vw;
+    grid-auto-rows: 50vw;
+  }
+}
+
+.pad_last {
+  grid-column-end: $cols + 1;
+}
+
+.hero {
+  grid-row-start: 1;
+  grid-row-end: span 1;
+  grid-column-start: 1;
+  grid-column-end: -1;
+  background: darken($content_bg, 2%);
+  border-radius: $radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_24_semibold;
+}
+
+.stamp {
+  grid-row-end: span 2;
+  grid-column: -2 / -1;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  overflow: hidden;
+  position: relative;
+}