From 4ebeed76aaeb07dc90c2816bce81a5521080b5d4 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 8 Apr 2020 12:19:56 +0700
Subject: [PATCH] title appearance fixed

---
 .../containers/BlurWrapper/styles.scss        |  4 ---
 src/components/node/NodeComments/index.tsx    |  2 --
 src/components/node/NodeNoComments/index.tsx  | 26 +++++++-------
 .../node/NodeNoComments/styles.scss           | 36 +++++++++----------
 .../node/NodePanelInner/styles.scss           | 13 ++++---
 .../examples/ImageExample/styles.scss         |  2 --
 .../profile/ProfileInfo/styles.scss           |  2 --
 7 files changed, 37 insertions(+), 48 deletions(-)

diff --git a/src/components/containers/BlurWrapper/styles.scss b/src/components/containers/BlurWrapper/styles.scss
index 93120294..bcd83f5e 100644
--- a/src/components/containers/BlurWrapper/styles.scss
+++ b/src/components/containers/BlurWrapper/styles.scss
@@ -8,10 +8,6 @@
   flex-direction: column;
   min-height: 100vh;
 
-  @include tablet {
-    padding-top: 72px + $gap;
-  }
-
   &.is_blurred {
     filter: blur(15px);
 
diff --git a/src/components/node/NodeComments/index.tsx b/src/components/node/NodeComments/index.tsx
index 49579c58..5d37cd9d 100644
--- a/src/components/node/NodeComments/index.tsx
+++ b/src/components/node/NodeComments/index.tsx
@@ -35,8 +35,6 @@ const NodeComments: FC<IProps> = memo(({ comments, comment_data, user, onDelete,
           onEdit={onEdit}
         />
       ))}
-
-      <Filler />
     </div>
   );
 });
diff --git a/src/components/node/NodeNoComments/index.tsx b/src/components/node/NodeNoComments/index.tsx
index e884db73..7eca2a5f 100644
--- a/src/components/node/NodeNoComments/index.tsx
+++ b/src/components/node/NodeNoComments/index.tsx
@@ -1,23 +1,21 @@
-import React, { FC } from "react";
-import * as styles from "./styles.scss";
-import { Group } from "~/components/containers/Group";
-import classNames from "classnames";
-import { Filler } from "~/components/containers/Filler";
-import { ERRORS } from "~/constants/errors";
-import { t } from "~/utils/trans";
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+import { Group } from '~/components/containers/Group';
+import classNames from 'classnames';
+import { Filler } from '~/components/containers/Filler';
+import { ERRORS } from '~/constants/errors';
+import { t } from '~/utils/trans';
 
 interface IProps {
   is_loading?: boolean;
 }
 
 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>
-  </>
+  <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>
 );
 
 export { NodeNoComments };
diff --git a/src/components/node/NodeNoComments/styles.scss b/src/components/node/NodeNoComments/styles.scss
index c191b425..baebc792 100644
--- a/src/components/node/NodeNoComments/styles.scss
+++ b/src/components/node/NodeNoComments/styles.scss
@@ -1,18 +1,20 @@
-@keyframes fade {
-  0% {
-    // opacity: 0.25;
-  }
-  100% {
-    // opacity: 0.1;
-  }
-}
 .wrap {
   user-select: none;
-  height: 300px;
+  // height: 300px;
   overflow: hidden;
   position: relative;
+  flex: 0 0 auto;
 
-  // @include after_shade($node_bg);
+  &::after {
+    content: ' ';
+    position: absolute;
+    background: linear-gradient(transparentize($node_bg, 1), $node_bg);
+    border-radius: 0 0 $radius $radius;
+    height: 100px;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+  }
 
   &:global(.is_loading) {
     opacity: 1;
@@ -22,6 +24,10 @@
       animation: fade 0.5s infinite alternate;
     }
   }
+
+  @include tablet {
+    display: none;
+  }
 }
 
 .card {
@@ -36,14 +42,4 @@
   font: $font_18_semibold;
   color: transparentize(white, 0.5);
   flex: 0 0 $comment_height;
-
-  // @include outer_shadow();
-
-  &:nth-child(2) {
-    // animation-delay: -300ms !important;
-  }
-
-  &:nth-child(3) {
-    // animation-delay: -600ms !important;
-  }
 }
diff --git a/src/components/node/NodePanelInner/styles.scss b/src/components/node/NodePanelInner/styles.scss
index ad25cfb4..ee88cbf2 100644
--- a/src/components/node/NodePanelInner/styles.scss
+++ b/src/components/node/NodePanelInner/styles.scss
@@ -24,18 +24,19 @@
 .content {
   flex: 0 1 $content_width;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: stretch;
   border-radius: $radius $radius 0 0;
   box-sizing: border-box;
   padding: $gap;
   background: $node_bg;
-  // height: 72px;
 
   @include outer_shadow();
 
   @include tablet {
     border-radius: 0;
+    flex-direction: column;
+    align-items: flex-start;
   }
 
   @include can_backdrop {
@@ -51,7 +52,7 @@
   padding-bottom: 6px;
 
   @include tablet {
-    font-size: 16px;
+    // font-size: 16px;
     word-break: break-word;
     padding-bottom: 0;
     padding-top: 10px;
@@ -84,7 +85,6 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  margin-top: 10px;
 
   & > * {
     margin: 0 $gap;
@@ -125,6 +125,11 @@
       }
     }
   }
+
+  @include tablet {
+    margin-top: $gap * 2;
+    align-self: center;
+  }
 }
 
 .mark {
diff --git a/src/containers/examples/ImageExample/styles.scss b/src/containers/examples/ImageExample/styles.scss
index 20457ccb..1aaeca6d 100644
--- a/src/containers/examples/ImageExample/styles.scss
+++ b/src/containers/examples/ImageExample/styles.scss
@@ -50,6 +50,4 @@
   flex: 1;
   border-radius: $panel_radius;
   box-shadow: $comment_shadow;
-  //position: relative;
-  //top: -64px
 }
diff --git a/src/containers/profile/ProfileInfo/styles.scss b/src/containers/profile/ProfileInfo/styles.scss
index ef3b8bfe..ea0be792 100644
--- a/src/containers/profile/ProfileInfo/styles.scss
+++ b/src/containers/profile/ProfileInfo/styles.scss
@@ -1,8 +1,6 @@
 .wrap {
   justify-content: flex-start;
   align-items: flex-start !important;
-  // min-height: 64px;
-  // padding: $gap;
   box-sizing: border-box;
   position: relative;
 }