From 67848ae061bd277dcc0f8a8165bb923e2dd7d514 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 27 Aug 2020 14:28:16 +0700
Subject: [PATCH] updated boris layout

---
 src/components/node/NodeNoComments/index.tsx  | 23 ++++++++++++-------
 .../node/NodeNoComments/styles.scss           | 16 +++++++++----
 src/containers/node/BorisLayout/index.tsx     |  2 +-
 src/containers/node/BorisLayout/styles.scss   |  4 ++++
 4 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/components/node/NodeNoComments/index.tsx b/src/components/node/NodeNoComments/index.tsx
index 7eca2a5f..c0c5ade0 100644
--- a/src/components/node/NodeNoComments/index.tsx
+++ b/src/components/node/NodeNoComments/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import * as styles from './styles.scss';
 import { Group } from '~/components/containers/Group';
 import classNames from 'classnames';
@@ -8,14 +8,21 @@ import { t } from '~/utils/trans';
 
 interface IProps {
   is_loading?: boolean;
+  count?: number;
 }
 
-const NodeNoComments: FC<IProps> = ({ is_loading = false }) => (
-  <Group className={classNames(styles.wrap, { is_loading })}>
-    <div className={styles.card} />
-    <div className={styles.card}>{!is_loading && t(ERRORS.NO_COMMENTS)}</div>
-    <div className={styles.card} />
-  </Group>
-);
+const NodeNoComments: FC<IProps> = ({ is_loading = false, count = 3 }) => {
+  const items = useMemo(
+    () => [...new Array(count)].map((_, i) => <div className={styles.card} key={i} />),
+    [count]
+  );
+
+  return (
+    <Group className={classNames(styles.wrap, { is_loading })}>
+      {items}
+      <div className={styles.nothing}>{!is_loading && t(ERRORS.NO_COMMENTS)}</div>
+    </Group>
+  );
+};
 
 export { NodeNoComments };
diff --git a/src/components/node/NodeNoComments/styles.scss b/src/components/node/NodeNoComments/styles.scss
index 0d95c013..d22d1fc0 100644
--- a/src/components/node/NodeNoComments/styles.scss
+++ b/src/components/node/NodeNoComments/styles.scss
@@ -1,6 +1,5 @@
 .wrap {
   user-select: none;
-  // height: 300px;
   overflow: hidden;
   position: relative;
   flex: 0 0 auto;
@@ -38,8 +37,17 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  text-transform: uppercase;
-  font: $font_18_semibold;
-  color: transparentize(white, 0.5);
   flex: 0 0 $comment_height;
 }
+
+.nothing {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font: $font_18_semibold;
+  text-transform: uppercase;
+  color: darken(white, 75%);
+  height: 20px;
+  margin-top: 0 !important;
+}
diff --git a/src/containers/node/BorisLayout/index.tsx b/src/containers/node/BorisLayout/index.tsx
index 644ca378..e4296445 100644
--- a/src/containers/node/BorisLayout/index.tsx
+++ b/src/containers/node/BorisLayout/index.tsx
@@ -96,7 +96,7 @@ const BorisLayoutUnconnected: FC<IProps> = ({
             {is_user && <NodeCommentForm is_before />}
 
             {is_loading_comments ? (
-              <NodeNoComments is_loading />
+              <NodeNoComments is_loading count={7} />
             ) : (
               <NodeComments
                 comments={comments}
diff --git a/src/containers/node/BorisLayout/styles.scss b/src/containers/node/BorisLayout/styles.scss
index 28c6e327..367baee0 100644
--- a/src/containers/node/BorisLayout/styles.scss
+++ b/src/containers/node/BorisLayout/styles.scss
@@ -14,6 +14,10 @@
   box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px;
 
   @include desktop {
+    flex: 2.5;
+  }
+
+  @media(max-width: 1024px) {
     flex: 2;
   }
 }