From eade3efc7c49c82124d1d90544fa85deb1af3aa3 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 8 Apr 2020 15:36:27 +0700
Subject: [PATCH] related items without cover now has letters

---
 src/components/flow/FlowRecent/index.tsx        |  9 +++++----
 src/components/main/Header/style.scss           |  2 +-
 src/components/node/NodeRelatedItem/index.tsx   | 14 ++++++++++++++
 src/components/node/NodeRelatedItem/styles.scss | 14 ++++++++++++++
 4 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/components/flow/FlowRecent/index.tsx b/src/components/flow/FlowRecent/index.tsx
index 64f04aa7..e569d8fb 100644
--- a/src/components/flow/FlowRecent/index.tsx
+++ b/src/components/flow/FlowRecent/index.tsx
@@ -5,6 +5,7 @@ import { getURL, getPrettyDate } from '~/utils/dom';
 import { Link } from 'react-router-dom';
 import { URLS, PRESETS } from '~/constants/urls';
 import classNames from 'classnames';
+import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
 
 interface IProps {
   recent: IFlowState['recent'];
@@ -31,10 +32,10 @@ const FlowRecent: FC<IProps> = ({ recent, updated }) => (
     {recent &&
       recent.slice(0, 20).map(node => (
         <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
-          <div
-            className={styles.thumb}
-            style={{ backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")` }}
-          />
+          <div className={styles.thumb}>
+            <NodeRelatedItem item={node} />
+          </div>
+
           <div className={styles.info}>
             <div className={styles.title}>{node.title}</div>
             <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
diff --git a/src/components/main/Header/style.scss b/src/components/main/Header/style.scss
index 4c81b3e2..4c0c8058 100644
--- a/src/components/main/Header/style.scss
+++ b/src/components/main/Header/style.scss
@@ -11,7 +11,7 @@
   box-sizing: border-box;
   transition: background-color 0.5s;
 
-  @include tablet {
+  @include desktop {
     height: 64px;
     padding: 0 $gap;
   }
diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx
index 93a57aad..26597050 100644
--- a/src/components/node/NodeRelatedItem/index.tsx
+++ b/src/components/node/NodeRelatedItem/index.tsx
@@ -10,6 +10,18 @@ type IProps = RouteComponentProps & {
   item: Partial<INode>;
 };
 
+const getTitleLetters = (title: string): string => {
+  const words = title.split(' ');
+
+  return words.length > 1
+    ? words
+        .slice(0, 2)
+        .map(word => word[0])
+        .join('')
+        .toUpperCase()
+    : words[0].substr(0, 2).toUpperCase();
+};
+
 const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
   const [is_loaded, setIsLoaded] = useState(false);
   const onClick = useCallback(() => history.push(URLS.NODE_URL(item.id)), [item, history]);
@@ -25,6 +37,8 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
         style={{ backgroundImage: `url("${getURL({ url: item.thumbnail }, PRESETS.avatar)}")` }}
       />
 
+      {!item.thumbnail && <div className={styles.letters}>{getTitleLetters(item.title)}</div>}
+
       <img
         src={getURL({ url: item.thumbnail }, PRESETS.avatar)}
         alt="loader"
diff --git a/src/components/node/NodeRelatedItem/styles.scss b/src/components/node/NodeRelatedItem/styles.scss
index d35af1e5..84974ef7 100644
--- a/src/components/node/NodeRelatedItem/styles.scss
+++ b/src/components/node/NodeRelatedItem/styles.scss
@@ -4,6 +4,7 @@
   border-radius: $cell_radius;
   cursor: pointer;
   position: relative;
+  width: 100%;
 
   img {
     position: absolute;
@@ -28,3 +29,16 @@
     opacity: 1;
   }
 }
+
+.letters {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  font: $font_24_semibold;
+  opacity: 0.2;
+}