fixed shadows, added author panel

src/components/node/NodeAuthorBlock/index.tsx

@@ -0,0 +1,32 @@
+import React, { FC, useCallback } from 'react';
+import { INode } from '~/redux/types';
+import styles from './styles.module.scss';
+import { CommentAvatar } from '~/components/comment/CommentAvatar';
+import { openUserProfile } from '~/utils/user';
+
+interface Props {
+  node?: INode;
+}
+
+const NodeAuthorBlock: FC<Props> = ({ node }) => {
+  if (!node?.user) {
+    return null;
+  }
+
+  const { fullname, username, description, photo } = node.user;
+
+  const onOpenProfile = useCallback(() => openUserProfile(username), [username]);
+
+  return (
+    <div className={styles.block} onClick={onOpenProfile}>
+      <CommentAvatar username={username} url={photo?.url} className={styles.avatar} />
+
+      <div className={styles.info}>
+        <div className={styles.username}>{fullname || username}</div>
+        {description && <div className={styles.description}>{description}</div>}
+      </div>
+    </div>
+  );
+};
+
+export { NodeAuthorBlock };

src/components/node/NodeAuthorBlock/styles.module.scss

@@ -0,0 +1,39 @@
+@import "~/styles/variables.scss";
+
+div.block {
+  @include inner_shadow_active;
+
+  cursor: pointer;
+  background: $inset_bg;
+  padding: $gap;
+  border-radius: $radius;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: stretch;
+}
+
+.info {
+}
+
+.username {
+  font: $font_16_semibold;
+  line-height: 21px;
+}
+
+.description {
+  @include clamp(3, 12 * 1.25);
+
+  margin-top: 3px;
+  font: $font_12_regular;
+  line-height: 1.25em;
+  opacity: 0.5;
+}
+
+.avatar {
+  width: 48px;
+  height: 48px;
+  margin-right: 10px;
+  flex-shrink: 0;
+  align-self: flex-start;
+}

src/components/node/NodeBottomBlock/index.tsx

@@ -12,6 +12,7 @@ import { NodeTagsBlock } from '~/components/node/NodeTagsBlock';
 import { INodeRelated } from '~/redux/node/types';
 import StickyBox from 'react-sticky-box/dist/esnext';
 import styles from './styles.module.scss';
+import { NodeAuthorBlock } from '~/components/node/NodeAuthorBlock';
 
 interface IProps {
   node: INode;
@@ -60,10 +61,17 @@ const NodeBottomBlock: FC<IProps> = ({
 
           <div className={styles.panel}>
             <StickyBox className={styles.sticky} offsetTop={72}>
-              <Group className={styles.left}>
-                <NodeTagsBlock node={node} isLoading={isLoading} />
-                <NodeRelatedBlock isLoading={isLoading} node={node} related={related} />
-              </Group>
+              <div className={styles.left}>
+                <div className={styles.left_item}>
+                  <NodeAuthorBlock node={node} />
+                </div>
+                <div className={styles.left_item}>
+                  <NodeTagsBlock node={node} isLoading={isLoading} />
+                </div>
+                <div className={styles.left_item}>
+                  <NodeRelatedBlock isLoading={isLoading} node={node} related={related} />
+                </div>
+              </div>
             </StickyBox>
           </div>
         </Group>

src/components/node/NodeBottomBlock/styles.module.scss

@@ -28,7 +28,6 @@
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-left: $gap / 2;
   min-width: 0;
   position: relative;
   z-index: 10;
@@ -51,3 +50,7 @@
   flex: 1;
   min-width: 0;
 }
+
+.left_item {
+  padding-bottom: $gap * 2;
+}

src/components/node/NodeImageSwiperBlock/styles.module.scss

@@ -11,7 +11,7 @@
     left: 50%;
     bottom: $gap * 2;
     transform: translate(-50%, 0);
-    background: darken($comment_bg, 4%);
+    background: darken($content_bg, 4%);
     width: auto;
     padding: 5px 10px;
     border-radius: 10px;

src/components/node/NodePanel/styles.module.scss

@@ -1,7 +1,7 @@
 @import "src/styles/variables";
 
 .place {
-  // height: 72px;
+  @include row_shadow;
   position: relative;
   z-index: 3;
   margin-top: -$radius;

src/components/node/NodePanelInner/styles.module.scss

@@ -38,7 +38,6 @@
   justify-content: center;
   box-sizing: border-box;
   min-width: 0;
-  background-color: $content_bg;
 
   &:global(.stack) {
     padding: 0 $gap;
@@ -59,12 +58,10 @@
   justify-content: stretch;
   border-radius: $radius $radius 0 0;
   box-sizing: border-box;
-  padding: $gap $gap;
+  padding: $gap;
   height: 64px;
   min-width: 0;
 
-  @include outer_shadow();
-
   @include tablet {
     border-radius: 0;
     height: auto;

src/components/node/NodeRelatedItem/index.tsx

@@ -5,6 +5,7 @@ import { INode } from '~/redux/types';
 import { PRESETS, URLS } from '~/constants/urls';
 import { RouteComponentProps, withRouter } from 'react-router';
 import { getURL, stringToColour } from '~/utils/dom';
+import { CommentAvatar } from '~/components/comment/CommentAvatar';
 
 type IProps = RouteComponentProps & {
   item: Partial<INode>;
@@ -59,6 +60,8 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
     return 'small';
   }, [width]);
 
+  const image = useMemo(() => getURL({ url: item.thumbnail }, PRESETS.avatar), [item.thumbnail]);
+
   return (
     <div
       className={classNames(styles.item, styles[size], { [styles.is_loaded]: is_loaded })}
@@ -66,11 +69,10 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
       onClick={onClick}
       ref={ref}
     >
-      <div
-        className={styles.thumb}
-        style={{
-          backgroundImage: `url("${thumb}")`,
-        }}
+      <CommentAvatar
+        username={item.title}
+        url={item.thumbnail}
+        className={classNames(styles.thumb, { [styles.is_loaded]: is_loaded })}
       />
 
       {!item.thumbnail && size === 'small' && (
@@ -85,11 +87,7 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
         </div>
       )}
 
-      <img
-        src={getURL({ url: item.thumbnail }, PRESETS.avatar)}
-        alt="loader"
-        onLoad={() => setIsLoaded(true)}
-      />
+      <img src={image} alt="loader" onLoad={() => setIsLoaded(true)} />
     </div>
   );
 });

src/components/node/NodeRelatedItem/styles.module.scss

@@ -16,13 +16,10 @@
   }
 }
 
-.thumb {
+div.thumb {
   position: absolute;
   width: 100%;
   height: 100%;
-  border-radius: $cell_radius;
-  background: lighten($content_bg, 2%) 50% 50% no-repeat;
-  background-size: cover;
   opacity: 0;
   transition: opacity 0.5s;
   will-change: opacity;
@@ -33,6 +30,8 @@
 }
 
 .letters, .title {
+  @include outer_shadow;
+
   position: absolute;
   display: flex;
   align-items: center;