flow grid now has 5 columns

src/components/flow/Cell/styles.scss

@@ -91,6 +91,16 @@
     grid-column-end: span 2;
   }
 
+  :global(.horizontal),
+  :global(.quadro) {
+    grid-column-end: span 2;
+  }
+
+  :global(.vertical),
+  :global(.quadro) {
+    grid-row-end: span 2;
+  }
+
   .is_text {
     background: none;
     padding: 10px;

src/components/flow/FlowGrid/styles.scss

@@ -14,9 +14,15 @@ $cols: $content_width / $cell;
   grid-column-gap: $grid_line;
   grid-row-gap: $grid_line;
 
+  @media (max-width: $cell * 6) {
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: 40vh 20vw;
+    grid-auto-rows: 20vw;
+  }
+
   @media (max-width: $cell * 5) {
     grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: 25vw $cell;
+    grid-template-rows: 40vh 25vw;
     grid-auto-rows: 25vw;
   }
 

src/redux/flow/sagas.ts

@@ -1,10 +1,11 @@
-import { takeLatest, call, put } from 'redux-saga/effects';
+import { takeLatest, call, put, select } from 'redux-saga/effects';
 import { REHYDRATE } from 'redux-persist';
 import { FLOW_ACTIONS } from './constants';
 import { getNodes } from '../node/api';
-import { flowSetNodes } from './actions';
-import { objFromArray } from '~/utils/fn';
+import { flowSetNodes, flowSetCellView } from './actions';
 import { IResultWithStatus, INode } from '../types';
+import { updateNodeEverywhere } from '../node/sagas';
+import { selectFlowNodes } from './selectors';
 
 function* onGetFlow() {
   const {
@@ -20,6 +21,12 @@ function* onGetFlow() {
   yield put(flowSetNodes(nodes));
 }
 
+function* onSetCellView({ id, flow }: ReturnType<typeof flowSetCellView>) {
+  const nodes = yield select(selectFlowNodes);
+  yield put(flowSetNodes(nodes.map(node => (node.id === id ? { ...node, flow } : node))));
+}
+
 export default function* nodeSaga() {
   yield takeLatest([FLOW_ACTIONS.GET_FLOW, REHYDRATE], onGetFlow);
+  yield takeLatest(FLOW_ACTIONS.SET_CELL_VIEW, onSetCellView);
 }

src/redux/node/sagas.ts

@@ -41,7 +41,7 @@ import { NODE_EDITOR_DIALOGS, DIALOGS } from '../modal/constants';
 import { INodeState } from './reducer';
 import { IFlowState } from '../flow/reducer';
 
-function* updateNodeEverythere(node) {
+export function* updateNodeEverywhere(node) {
   const {
     current: { id },
   }: INodeState = yield select(selectNode);
@@ -189,13 +189,13 @@ function* onLikeSaga({ id }: ReturnType<typeof nodeLike>) {
     current: { is_liked },
   } = yield select(selectNode);
 
-  yield call(updateNodeEverythere, { ...current, is_liked: !is_liked });
+  yield call(updateNodeEverywhere, { ...current, is_liked: !is_liked });
 
   const { data, error } = yield call(reqWrapper, postNodeLike, { id });
 
   if (!error || data.is_liked === !is_liked) return; // ok and matches
 
-  yield call(updateNodeEverythere, { ...current, is_liked });
+  yield call(updateNodeEverywhere, { ...current, is_liked });
 }
 
 function* onStarSaga({ id }: ReturnType<typeof nodeLike>) {
@@ -204,13 +204,13 @@ function* onStarSaga({ id }: ReturnType<typeof nodeLike>) {
     current: { is_heroic },
   } = yield select(selectNode);
 
-  yield call(updateNodeEverythere, { ...current, is_heroic: !is_heroic });
+  yield call(updateNodeEverywhere, { ...current, is_heroic: !is_heroic });
 
   const { data, error } = yield call(reqWrapper, postNodeStar, { id });
 
   if (!error || data.is_heroic === !is_heroic) return; // ok and matches
 
-  yield call(updateNodeEverythere, { ...current, is_heroic });
+  yield call(updateNodeEverywhere, { ...current, is_heroic });
 }
 
 export default function* nodeSaga() {

src/styles/variables.scss

@@ -1,8 +1,8 @@
 @import 'colors';
 
-$cell: 320px;
+$cell: 280px;
 $grid_line: 4px;
-$content_width: $cell * 4 + $grid_line * 3;
+$content_width: $cell * 5 + $grid_line * 4;
 $gap: 10px;
 $spc: $gap * 2;
 $comment_height: 72px;