updated boris layout

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 }) => (
+const NodeNoComments: FC<IProps> = ({ is_loading = false, count = 3 }) => {
-  <Group className={classNames(styles.wrap, { is_loading })}>
+  const items = useMemo(
-    <div className={styles.card} />
+    () => [...new Array(count)].map((_, i) => <div className={styles.card} key={i} />),
-    <div className={styles.card}>{!is_loading && t(ERRORS.NO_COMMENTS)}</div>
+    [count]
-    <div className={styles.card} />
+  );
-  </Group>
+
-);
+  return (
+    <Group className={classNames(styles.wrap, { is_loading })}>
+      {items}
+      <div className={styles.nothing}>{!is_loading && t(ERRORS.NO_COMMENTS)}</div>
+    </Group>
+  );
+};
 
 export { NodeNoComments };

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;
+}

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}

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;
   }
 }