From 8294c20d046571ec0a1cafa2aeed4e313dc7045f Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 30 Oct 2019 17:45:42 +0700
Subject: [PATCH] fixed appearance for mobile

---
 src/components/flow/Cell/styles.scss              |  5 +++++
 src/components/flow/FlowGrid/styles.scss          |  4 ++--
 src/components/node/NodeImageSlideBlock/index.tsx | 15 ++++++++++-----
 src/styles/variables.scss                         |  2 +-
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/flow/Cell/styles.scss b/src/components/flow/Cell/styles.scss
index feec9ca8..948b8e50 100644
--- a/src/components/flow/Cell/styles.scss
+++ b/src/components/flow/Cell/styles.scss
@@ -59,6 +59,10 @@
 
   box-sizing: border-box;
   word-break: break-word;
+
+  @media (max-width: $cell * 2) {
+    font: $font_18_semibold;
+  }
 }
 
 .title {
@@ -221,6 +225,7 @@
   @media (max-width: $cell * 2 + $grid_line) {
     right: 0;
     top: 0;
+    display: none;
   }
 }
 
diff --git a/src/components/flow/FlowGrid/styles.scss b/src/components/flow/FlowGrid/styles.scss
index 230d21d9..a196ef37 100644
--- a/src/components/flow/FlowGrid/styles.scss
+++ b/src/components/flow/FlowGrid/styles.scss
@@ -44,9 +44,9 @@ $stamp_color: $content_bg;
   }
 
   @media (max-width: $cell * 2) {
-    grid-template-columns: repeat(1, 1fr);
+    grid-template-columns: repeat(2, 1fr);
     grid-template-rows: 40vh 75vw;
-    grid-auto-rows: 75vw;
+    grid-auto-rows: 50vw;
     grid-column-gap: $gap;
     grid-row-gap: $gap;
   }
diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 6060f3d2..077e4938 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -37,6 +37,11 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
     [node]
   );
 
+  useEffect(() => {
+    setLoaded({});
+    refs.current = {};
+  }, [images]);
+
   const updateSizes = useCallback(() => {
     const values = Object.keys(refs.current).reduce((obj, key) => {
       const ref = refs.current[key];
@@ -53,7 +58,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
     index => el => {
       refs.current[index] = el;
     },
-    [refs, heights, setHeights]
+    [refs, heights, setHeights, images]
   );
 
   const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
@@ -62,8 +67,8 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
   ]);
 
   // update outside hooks
-  useEffect(() => updateLayout(), [loaded, height]);
-  useEffect(() => updateSizes(), [refs, current, loaded]);
+  useEffect(() => updateLayout(), [loaded, height, images]);
+  useEffect(() => updateSizes(), [refs, current, loaded, images]);
 
   useEffect(() => {
     if (!wrap || !wrap.current) return;
@@ -77,7 +82,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
     if (current !== Math.round(selected)) setCurrent(Math.round(selected));
 
     setHeight(now);
-  }, [offset, heights, max_height]);
+  }, [offset, heights, max_height, images]);
 
   const onDrag = useCallback(
     event => {
@@ -136,7 +141,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
     [setIsDragging, setInitialX, offset, setInitialOffset]
   );
 
-  useEffect(() => updateMaxHeight(), []);
+  useEffect(() => updateMaxHeight(), [images]);
 
   useEffect(() => {
     window.addEventListener('resize', updateSizes);
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index f7b53f8c..06f41bbf 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -8,7 +8,7 @@ $spc: $gap * 2;
 $comment_height: 72px;
 $bar_height: 64px;
 
-$radius: 2px;
+$radius: 4px;
 $cell_radius: $radius;
 $panel_radius: $radius;
 $input_radius: $radius;