diff --git a/src/components/flow/FlowGrid/index.tsx b/src/components/flow/FlowGrid/index.tsx index b7c3cdce..538401b7 100644 --- a/src/components/flow/FlowGrid/index.tsx +++ b/src/components/flow/FlowGrid/index.tsx @@ -16,14 +16,21 @@ type IProps = Partial & { onChangeCellView: typeof flowSetCellView; }; -export const FlowGrid: FC = ({ user, nodes, heroes, recent, onSelect, onChangeCellView }) => ( +export const FlowGrid: FC = ({ + user, + nodes, + heroes, + recent, + onSelect, + onChangeCellView, +}) => (
- +
{nodes.map(node => ( diff --git a/src/components/flow/FlowGrid/styles.scss b/src/components/flow/FlowGrid/styles.scss index 39f7062a..b997ef36 100644 --- a/src/components/flow/FlowGrid/styles.scss +++ b/src/components/flow/FlowGrid/styles.scss @@ -73,7 +73,7 @@ $cols: $content_width / $cell; .stamp { // grid-row: -1 / 3; - grid-row-end: span 3; + grid-row-end: span 2; grid-column: -2 / -1; background: darken($content_bg, 8%); border-radius: $radius; @@ -82,4 +82,7 @@ $cols: $content_width / $cell; align-items: center; justify-content: center; font: $font_24_semibold; + display: flex; + align-items: stretch; + justify-content: stretch; } diff --git a/src/components/flow/FlowRecent/index.tsx b/src/components/flow/FlowRecent/index.tsx index 5375a6ae..6f1bbf37 100644 --- a/src/components/flow/FlowRecent/index.tsx +++ b/src/components/flow/FlowRecent/index.tsx @@ -1,8 +1,21 @@ import React, { FC } from 'react'; import * as styles from './styles.scss'; +import { IFlowState } from '~/redux/flow/reducer'; -interface IProps {} +interface IProps { + recent: IFlowState['recent']; +} -const FlowRecent: FC = ({}) =>
; +const FlowRecent: FC = ({ recent }) => ( +
+ {recent && + recent.slice(0, 9).map(node => ( +
+
+
{node.title}
+
+ ))} +
+); export { FlowRecent }; diff --git a/src/components/flow/FlowRecent/styles.scss b/src/components/flow/FlowRecent/styles.scss index 4d942b9c..dfa20d6d 100644 --- a/src/components/flow/FlowRecent/styles.scss +++ b/src/components/flow/FlowRecent/styles.scss @@ -1,3 +1,36 @@ .grid { display: grid; -} \ No newline at end of file + grid-template-rows: repeat(9, 1fr); + grid-template-columns: auto; + row-gap: $grid_line; + justify-content: stretch; + flex: 1; + + & > div { + // background: $content_bg; + // @include outer_shadow(); + // background: darken($content_bg, 4%); + } +} + +.item { + display: flex; + align-items: center; + justify-content: center; + font: $font_12_regular; + border-radius: $radius; + flex-direction: row; +} + +.thumb { + height: 100%; + width: 40px; + margin-right: $grid_line; + // padding-left: 100%; + background: red; + // flex: +} + +.info { + flex: 1; +} diff --git a/src/containers/flow/FlowLayout/index.tsx b/src/containers/flow/FlowLayout/index.tsx index 3a655b16..b4d0806a 100644 --- a/src/containers/flow/FlowLayout/index.tsx +++ b/src/containers/flow/FlowLayout/index.tsx @@ -8,7 +8,7 @@ import pick from 'ramda/es/pick'; import { selectUser } from '~/redux/auth/selectors'; const mapStateToProps = state => ({ - flow: pick(['nodes', 'heroes'], selectFlow(state)), + flow: pick(['nodes', 'heroes', 'recent'], selectFlow(state)), user: pick(['role', 'id'], selectUser(state)), }); @@ -20,7 +20,7 @@ const mapDispatchToProps = { type IProps = ReturnType & typeof mapDispatchToProps & {}; const FlowLayoutUnconnected: FC = ({ - flow: { nodes, heroes }, + flow: { nodes, heroes, recent }, user, nodeLoadNode, flowSetCellView, @@ -28,6 +28,7 @@ const FlowLayoutUnconnected: FC = ({