From b88aa32e078e272cb37162dd229e0fb269aab890 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 23 Apr 2020 11:28:41 +0700
Subject: [PATCH 1/4] simplier slider for images

---
 .../containers/PageCover/styles.scss          |   3 +-
 src/components/node/NodeImageBlock/index.tsx  |  59 +++---
 .../node/NodeImageBlock/styles.scss           |   9 +-
 .../node/NodePanelInner/styles.scss           |   5 +-
 src/containers/node/NodeLayout/index.tsx      | 182 ++++++++++--------
 src/redux/node/constants.ts                   |   7 +-
 6 files changed, 143 insertions(+), 122 deletions(-)

diff --git a/src/components/containers/PageCover/styles.scss b/src/components/containers/PageCover/styles.scss
index 4c2b9724..92f9c352 100644
--- a/src/components/containers/PageCover/styles.scss
+++ b/src/components/containers/PageCover/styles.scss
@@ -18,6 +18,7 @@
   height: 100%;
   animation: fadeIn 2s;
   will-change: transform, opacity;
+  filter: blur(10px);
 
   &::after {
     content: ' ';
@@ -26,7 +27,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: url(~/sprites/stripes.svg) rgba(0, 0, 0, 0.3);
+    background: url(~/sprites/stripes.svg) transparentize($content_bg, 0.2);
   }
 
   @include tablet {
diff --git a/src/components/node/NodeImageBlock/index.tsx b/src/components/node/NodeImageBlock/index.tsx
index ef2f9f85..9bfacf4b 100644
--- a/src/components/node/NodeImageBlock/index.tsx
+++ b/src/components/node/NodeImageBlock/index.tsx
@@ -30,25 +30,18 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
   );
 
   const setRef = useCallback(index => el => (refs.current[index] = el), [refs]);
+
   const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
     setLoaded,
     loaded,
   ]);
 
-  const onOpenPhotoSwipe = useCallback(
-    (index: number) => () => modalShowPhotoswipe(images, index),
-    [modalShowPhotoswipe, images]
-  );
-
   useEffect(() => updateLayout(), [loaded]);
 
   useEffect(() => {
     if (!refs || !refs.current[current] || !loaded[current]) return setHeight(320);
-
     const el = refs.current[current];
-
     const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
-
     setHeight(element_height);
   }, [refs, current, loaded]);
 
@@ -59,35 +52,33 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
 
   return (
     <div className={classNames(styles.wrap, { is_loading, is_animated })}>
-      <div>
-        <ImageSwitcher
-          total={images.length}
-          current={current}
-          onChange={setCurrent}
-          loaded={loaded}
-        />
+      <ImageSwitcher
+        total={images.length}
+        current={current}
+        onChange={setCurrent}
+        loaded={loaded}
+      />
 
-        <div className={styles.image_container} style={{ height }}>
-          {(is_loading || !loaded[0] || !images.length) && <div className={styles.placeholder} />}
+      <div className={styles.image_container} style={{ height }}>
+        {(is_loading || !loaded[0] || !images.length) && <div className={styles.placeholder} />}
 
-          {images.map((file, index) => (
-            <div
-              className={classNames(styles.image_wrap, {
-                is_active: index === current && loaded[index],
-              })}
-              ref={setRef(index)}
+        {images.map((file, index) => (
+          <div
+            className={classNames(styles.image_wrap, {
+              is_active: index === current && loaded[index],
+            })}
+            ref={setRef(index)}
+            key={file.id}
+          >
+            <img
+              className={styles.image}
+              src={getURL(file, PRESETS['1600'])}
+              alt=""
               key={file.id}
-            >
-              <img
-                className={styles.image}
-                src={getURL(file, PRESETS['1600'])}
-                alt=""
-                key={file.id}
-                onLoad={onImageLoad(index)}
-              />
-            </div>
-          ))}
-        </div>
+              onLoad={onImageLoad(index)}
+            />
+          </div>
+        ))}
       </div>
     </div>
   );
diff --git a/src/components/node/NodeImageBlock/styles.scss b/src/components/node/NodeImageBlock/styles.scss
index 7e537fa4..ebe0ebf1 100644
--- a/src/components/node/NodeImageBlock/styles.scss
+++ b/src/components/node/NodeImageBlock/styles.scss
@@ -1,4 +1,6 @@
 .wrap {
+  padding-bottom: $gap * 2;
+
   &:global(.is_animated) {
     .image_container {
       transition: height 0.5s;
@@ -12,7 +14,6 @@
 
 .image_container {
   width: 100%;
-  background: $node_image_bg;
   border-radius: $panel_radius 0 0 $panel_radius;
   display: flex;
   align-items: center;
@@ -22,10 +23,12 @@
   user-select: none;
 
   .image {
-    max-height: 960px;
+    max-height: calc(100vh - 140px);
     max-width: 100%;
     opacity: 1;
-    border-radius: $radius $radius 0 0;
+    border-radius: $radius;
+
+    @include outer_shadow();
   }
 }
 
diff --git a/src/components/node/NodePanelInner/styles.scss b/src/components/node/NodePanelInner/styles.scss
index 60894c34..15e6c348 100644
--- a/src/components/node/NodePanelInner/styles.scss
+++ b/src/components/node/NodePanelInner/styles.scss
@@ -36,8 +36,9 @@
 
   @include tablet {
     border-radius: 0;
-    flex-direction: column;
-    align-items: flex-start;
+    // flex-direction: column;
+    // align-items: flex-start;
+    height: 128px;
   }
 
   @include can_backdrop {
diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx
index dfcc0a3e..4d395695 100644
--- a/src/containers/node/NodeLayout/index.tsx
+++ b/src/containers/node/NodeLayout/index.tsx
@@ -12,7 +12,7 @@ import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeRelated } from '~/components/node/NodeRelated';
 import { NodeComments } from '~/components/node/NodeComments';
 import { NodeTags } from '~/components/node/NodeTags';
-import { NODE_COMPONENTS, NODE_INLINES } from '~/redux/node/constants';
+import { NODE_COMPONENTS, NODE_INLINES, NODE_HEADS } from '~/redux/node/constants';
 import { selectUser } from '~/redux/auth/selectors';
 import pick from 'ramda/es/pick';
 import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
@@ -97,8 +97,9 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
     const can_like = useMemo(() => canLikeNode(node, user), [node, user]);
     const can_star = useMemo(() => canStarNode(node, user), [node, user]);
 
+    const head = node && node.type && NODE_HEADS[node.type];
     const block = node && node.type && NODE_COMPONENTS[node.type];
-    const inline_block = node && node.type && NODE_INLINES[node.type];
+    const inline = node && node.type && NODE_INLINES[node.type];
 
     const onEdit = useCallback(() => nodeEdit(node.id), [nodeEdit, node]);
     const onLike = useCallback(() => nodeLike(node.id), [nodeLike, node]);
@@ -112,91 +113,110 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
     }, [nodeSetCoverImage, node.cover]);
 
     return (
-      <Card className={styles.node} seamless>
-        {block &&
-          createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })}
+      <>
+        {head &&
+          createElement(head, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })}
 
-        <NodePanel
-          node={pick(['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'], node)}
-          layout={layout}
-          can_edit={can_edit}
-          can_like={can_like}
-          can_star={can_star}
-          onEdit={onEdit}
-          onLike={onLike}
-          onStar={onStar}
-          onLock={onLock}
-          is_loading={is_loading}
-        />
+        <Card className={styles.node} seamless>
+          {block &&
+            createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })}
 
-        {node.deleted_at ? (
-          <NodeDeletedBadge />
-        ) : (
-          <Group>
-            <Padder>
-              <Group horizontal className={styles.content}>
-                <Group className={styles.comments}>
-                  {inline_block && (
-                    <div className={styles.inline_block}>
-                      {createElement(inline_block, {
-                        node,
-                        is_loading,
-                        updateLayout,
-                        layout,
-                        modalShowPhotoswipe,
-                      })}
-                    </div>
-                  )}
+          <NodePanel
+            node={pick(
+              ['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'],
+              node
+            )}
+            layout={layout}
+            can_edit={can_edit}
+            can_like={can_like}
+            can_star={can_star}
+            onEdit={onEdit}
+            onLike={onLike}
+            onStar={onStar}
+            onLock={onLock}
+            is_loading={is_loading}
+          />
 
-                  {is_loading || is_loading_comments || (!comments.length && !inline_block) ? (
-                    <NodeNoComments is_loading={is_loading_comments || is_loading} />
-                  ) : (
-                    <NodeComments
-                      comments={comments}
-                      comment_data={comment_data}
-                      comment_count={comment_count}
-                      user={user}
-                      onDelete={nodeLockComment}
-                      onEdit={nodeEditComment}
-                      onLoadMore={nodeLoadMoreComments}
-                      order="DESC"
-                    />
-                  )}
+          {node.deleted_at ? (
+            <NodeDeletedBadge />
+          ) : (
+            <Group>
+              <Padder>
+                <Group horizontal className={styles.content}>
+                  <Group className={styles.comments}>
+                    {inline && (
+                      <div className={styles.inline}>
+                        {createElement(inline, {
+                          node,
+                          is_loading,
+                          updateLayout,
+                          layout,
+                          modalShowPhotoswipe,
+                        })}
+                      </div>
+                    )}
 
-                  {is_user && !is_loading && <NodeCommentForm />}
+                    {is_loading || is_loading_comments || (!comments.length && !inline) ? (
+                      <NodeNoComments is_loading={is_loading_comments || is_loading} />
+                    ) : (
+                      <NodeComments
+                        comments={comments}
+                        comment_data={comment_data}
+                        comment_count={comment_count}
+                        user={user}
+                        onDelete={nodeLockComment}
+                        onEdit={nodeEditComment}
+                        onLoadMore={nodeLoadMoreComments}
+                        order="DESC"
+                      />
+                    )}
+
+                    {is_user && !is_loading && <NodeCommentForm />}
+                  </Group>
+
+                  <div className={styles.panel}>
+                    <Sticky>
+                      <Group style={{ flex: 1, minWidth: 0 }}>
+                        {!is_loading && (
+                          <NodeTags
+                            is_editable={is_user}
+                            tags={node.tags}
+                            onChange={onTagsChange}
+                          />
+                        )}
+
+                        {is_loading && <NodeRelatedPlaceholder />}
+
+                        {!is_loading &&
+                          related &&
+                          related.albums &&
+                          Object.keys(related.albums)
+                            .filter(album => related.albums[album].length > 0)
+                            .map(album => (
+                              <NodeRelated
+                                title={album}
+                                items={related.albums[album]}
+                                key={album}
+                              />
+                            ))}
+
+                        {!is_loading &&
+                          related &&
+                          related.similar &&
+                          related.similar.length > 0 && (
+                            <NodeRelated title="ПОХОЖИЕ" items={related.similar} />
+                          )}
+                      </Group>
+                    </Sticky>
+                  </div>
                 </Group>
+              </Padder>
+            </Group>
+          )}
 
-                <div className={styles.panel}>
-                  <Sticky>
-                    <Group style={{ flex: 1, minWidth: 0 }}>
-                      {!is_loading && (
-                        <NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
-                      )}
-
-                      {is_loading && <NodeRelatedPlaceholder />}
-
-                      {!is_loading &&
-                        related &&
-                        related.albums &&
-                        Object.keys(related.albums)
-                          .filter(album => related.albums[album].length > 0)
-                          .map(album => (
-                            <NodeRelated title={album} items={related.albums[album]} key={album} />
-                          ))}
-
-                      {!is_loading && related && related.similar && related.similar.length > 0 && (
-                        <NodeRelated title="ПОХОЖИЕ" items={related.similar} />
-                      )}
-                    </Group>
-                  </Sticky>
-                </div>
-              </Group>
-            </Padder>
-          </Group>
-        )}
-
-        <Footer />
-      </Card>
+          <Footer />
+        </Card>
+      </>
     );
   }
 );
diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index 8cee2dba..1ea26f18 100644
--- a/src/redux/node/constants.ts
+++ b/src/redux/node/constants.ts
@@ -14,6 +14,7 @@ import { EditorAudioUploadButton } from '~/components/editors/EditorAudioUploadB
 import { EditorUploadCoverButton } from '~/components/editors/EditorUploadCoverButton';
 import { Filler } from '~/components/containers/Filler';
 import { modalShowPhotoswipe } from '../modal/actions';
+import { NodeImageBlock } from '~/components/node/NodeImageBlock';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -87,8 +88,12 @@ type INodeComponents = Record<
   }>
 >;
 
+export const NODE_HEADS: INodeComponents = {
+  [NODE_TYPES.IMAGE]: NodeImageBlock,
+};
+
 export const NODE_COMPONENTS: INodeComponents = {
-  [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
+  // [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
   [NODE_TYPES.VIDEO]: NodeVideoBlock,
   [NODE_TYPES.AUDIO]: NodeAudioImageBlock,
 };

From 79c5c3be8d02ceb398f0364a91fc6b69ef119ec9 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 23 Apr 2020 11:44:44 +0700
Subject: [PATCH 2/4] fixed appearance for new image slider

---
 src/components/node/NodeImageBlock/index.tsx  | 22 +++++++++++++++----
 .../node/NodeImageBlock/styles.scss           |  8 +++++--
 src/components/node/NodePanel/index.tsx       |  6 +++--
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/node/NodeImageBlock/index.tsx b/src/components/node/NodeImageBlock/index.tsx
index 9bfacf4b..9fe22919 100644
--- a/src/components/node/NodeImageBlock/index.tsx
+++ b/src/components/node/NodeImageBlock/index.tsx
@@ -7,6 +7,7 @@ import { getURL } from '~/utils/dom';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { PRESETS } from '~/constants/urls';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
 
 interface IProps {
   is_loading: boolean;
@@ -19,7 +20,7 @@ interface IProps {
 const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowPhotoswipe }) => {
   const [is_animated, setIsAnimated] = useState(false);
   const [current, setCurrent] = useState(0);
-  const [height, setHeight] = useState(320);
+  const [height, setHeight] = useState(window.innerHeight - 140);
   const [loaded, setLoaded] = useState<Record<number, boolean>>({});
   const refs = useRef<Record<number, HTMLDivElement>>({});
 
@@ -39,9 +40,12 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
   useEffect(() => updateLayout(), [loaded]);
 
   useEffect(() => {
-    if (!refs || !refs.current[current] || !loaded[current]) return setHeight(320);
+    if (!refs || !refs.current[current] || !loaded[current])
+      return setHeight(window.innerHeight - 140);
+
     const el = refs.current[current];
     const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
+
     setHeight(element_height);
   }, [refs, current, loaded]);
 
@@ -50,6 +54,12 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
     return () => clearTimeout(timer);
   }, []);
 
+  const onOpenPhotoSwipe = useCallback(() => modalShowPhotoswipe(images, current), [
+    modalShowPhotoswipe,
+    images,
+    current,
+  ]);
+
   return (
     <div className={classNames(styles.wrap, { is_loading, is_animated })}>
       <ImageSwitcher
@@ -59,8 +69,12 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
         loaded={loaded}
       />
 
-      <div className={styles.image_container} style={{ height }}>
-        {(is_loading || !loaded[0] || !images.length) && <div className={styles.placeholder} />}
+      <div className={styles.image_container} style={{ height }} onClick={onOpenPhotoSwipe}>
+        {(is_loading || !loaded[0] || !images.length) && (
+          <div className={styles.placeholder}>
+            <LoaderCircle size={72} />
+          </div>
+        )}
 
         {images.map((file, index) => (
           <div
diff --git a/src/components/node/NodeImageBlock/styles.scss b/src/components/node/NodeImageBlock/styles.scss
index ebe0ebf1..8c931586 100644
--- a/src/components/node/NodeImageBlock/styles.scss
+++ b/src/components/node/NodeImageBlock/styles.scss
@@ -51,6 +51,10 @@
 }
 
 .placeholder {
-  background: red;
-  height: 320px;
+  width: 100%;
+  height: calc(100vh - 140px);
+  border-radius: $radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
diff --git a/src/components/node/NodePanel/index.tsx b/src/components/node/NodePanel/index.tsx
index 5eed452c..bebb3218 100644
--- a/src/components/node/NodePanel/index.tsx
+++ b/src/components/node/NodePanel/index.tsx
@@ -47,7 +47,8 @@ const NodePanel: FC<IProps> = memo(
 
     return (
       <div className={styles.place} ref={ref}>
-        {stack &&
+        {/*
+        stack &&
           createPortal(
             <NodePanelInner
               node={node}
@@ -62,7 +63,8 @@ const NodePanel: FC<IProps> = memo(
               stack
             />,
             document.body
-          )}
+          )
+          */}
 
         <NodePanelInner
           node={node}

From b385df297a3477e3a0324c5020dcee1a3c441f5a Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 23 Apr 2020 11:56:02 +0700
Subject: [PATCH 3/4] fixed image switcher

---
 src/components/node/ImageSwitcher/styles.scss | 22 ++++++-------------
 src/components/node/NodeImageBlock/index.tsx  | 14 ++++++------
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/components/node/ImageSwitcher/styles.scss b/src/components/node/ImageSwitcher/styles.scss
index b54d77ba..dae7fef9 100644
--- a/src/components/node/ImageSwitcher/styles.scss
+++ b/src/components/node/ImageSwitcher/styles.scss
@@ -2,24 +2,21 @@
   width: 100%;
   height: 0;
   position: relative;
-  z-index: 2;
+  z-index: 4;
 }
 
 .switcher {
   position: absolute;
-  background: transparentize(black, 0.5);
+  background: darken($content_bg, 2%);
   display: flex;
-  right: $gap;
-  top: $gap;
+  left: 50%;
+  transform: translate(-50%, 0);
+  top: 0;
   border-radius: 24px;
-  padding: 0 3px;
+  padding: 0 13px;
   flex-wrap: wrap;
   transition: background-color 0.5s;
 
-  &:hover {
-    background: transparentize(black, 0.2);
-  }
-
   & > div {
     width: 30px;
     height: 30px;
@@ -28,19 +25,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    opacity: 0.5;
     transition: opacity 0.25s;
-
-    &:hover {
-      opacity: 1;
-    }
+    opacity: 0.5;
 
     &::after {
       content: ' ';
       display: block;
       width: 14px;
       height: 14px;
-      // background: white;
       border-radius: 8px;
       box-shadow: inset white 0 0 0 2px;
       transform: scale(0.5);
diff --git a/src/components/node/NodeImageBlock/index.tsx b/src/components/node/NodeImageBlock/index.tsx
index 9fe22919..0741da31 100644
--- a/src/components/node/NodeImageBlock/index.tsx
+++ b/src/components/node/NodeImageBlock/index.tsx
@@ -62,13 +62,6 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
 
   return (
     <div className={classNames(styles.wrap, { is_loading, is_animated })}>
-      <ImageSwitcher
-        total={images.length}
-        current={current}
-        onChange={setCurrent}
-        loaded={loaded}
-      />
-
       <div className={styles.image_container} style={{ height }} onClick={onOpenPhotoSwipe}>
         {(is_loading || !loaded[0] || !images.length) && (
           <div className={styles.placeholder}>
@@ -94,6 +87,13 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
           </div>
         ))}
       </div>
+
+      <ImageSwitcher
+        total={images.length}
+        current={current}
+        onChange={setCurrent}
+        loaded={loaded}
+      />
     </div>
   );
 };

From 511a8b5768bbb14d4144438cd1b08ddf23fa3370 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 23 Apr 2020 14:12:43 +0700
Subject: [PATCH 4/4] fixed switcher appearance

---
 src/components/node/ImageSwitcher/styles.scss  | 9 +++++----
 src/components/node/NodeImageBlock/index.tsx   | 4 ++--
 src/components/node/NodeImageBlock/styles.scss | 4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/node/ImageSwitcher/styles.scss b/src/components/node/ImageSwitcher/styles.scss
index dae7fef9..77ee2f10 100644
--- a/src/components/node/ImageSwitcher/styles.scss
+++ b/src/components/node/ImageSwitcher/styles.scss
@@ -7,14 +7,15 @@
 
 .switcher {
   position: absolute;
-  background: darken($content_bg, 2%);
+  // background: darken($content_bg, 2%);
+  background: url('../../../../src/sprites/noise.png') $main_bg_color;
   display: flex;
   left: 50%;
   transform: translate(-50%, 0);
-  top: 0;
+  top: -5px;
   border-radius: 24px;
-  padding: 0 13px;
-  flex-wrap: wrap;
+  padding: 0 3px;
+  // flex-wrap: wrap;
   transition: background-color 0.5s;
 
   & > div {
diff --git a/src/components/node/NodeImageBlock/index.tsx b/src/components/node/NodeImageBlock/index.tsx
index 0741da31..124200d7 100644
--- a/src/components/node/NodeImageBlock/index.tsx
+++ b/src/components/node/NodeImageBlock/index.tsx
@@ -20,7 +20,7 @@ interface IProps {
 const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowPhotoswipe }) => {
   const [is_animated, setIsAnimated] = useState(false);
   const [current, setCurrent] = useState(0);
-  const [height, setHeight] = useState(window.innerHeight - 140);
+  const [height, setHeight] = useState(window.innerHeight - 150);
   const [loaded, setLoaded] = useState<Record<number, boolean>>({});
   const refs = useRef<Record<number, HTMLDivElement>>({});
 
@@ -41,7 +41,7 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
 
   useEffect(() => {
     if (!refs || !refs.current[current] || !loaded[current])
-      return setHeight(window.innerHeight - 140);
+      return setHeight(window.innerHeight - 150);
 
     const el = refs.current[current];
     const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
diff --git a/src/components/node/NodeImageBlock/styles.scss b/src/components/node/NodeImageBlock/styles.scss
index 8c931586..a9529f4d 100644
--- a/src/components/node/NodeImageBlock/styles.scss
+++ b/src/components/node/NodeImageBlock/styles.scss
@@ -23,7 +23,7 @@
   user-select: none;
 
   .image {
-    max-height: calc(100vh - 140px);
+    max-height: calc(100vh - 150px);
     max-width: 100%;
     opacity: 1;
     border-radius: $radius;
@@ -52,7 +52,7 @@
 
 .placeholder {
   width: 100%;
-  height: calc(100vh - 140px);
+  height: calc(100vh - 130px);
   border-radius: $radius;
   display: flex;
   align-items: center;