whatsnew

src/components/flow/FlowGrid/styles.scss

@@ -1,89 +0,0 @@
-$cols: $content_width / $cell;
-$stamp_color: $content_bg;
-
-.grid {
-  display: grid;
-
-  grid-template-columns: repeat(5, 1fr);
-  grid-template-rows: 50vh $cell;
-  grid-auto-rows: $cell;
-
-  grid-auto-flow: row dense;
-  grid-column-gap: $gap;
-  grid-row-gap: $gap;
-
-  @include tablet {
-    padding: 0 $gap;
-  }
-
-  @media (max-width: $cell * 6) {
-    grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: 50vh 20vw;
-    grid-auto-rows: 20vw;
-  }
-
-  @media (max-width: $cell * 5) {
-    grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: 40vh 25vw;
-    grid-auto-rows: 25vw;
-  }
-
-  @media (max-width: $cell * 4) {
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: 40vh 33vw;
-    grid-auto-rows: 33vw;
-  }
-
-  @media (max-width: $cell * 3) {
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: 40vh 50vw;
-    grid-auto-rows: 50vw;
-  }
-
-  @media (max-width: $cell * 2) {
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: 40vh 50vw;
-    grid-auto-rows: 50vw;
-    grid-column-gap: $gap;
-    grid-row-gap: $gap;
-  }
-}
-
-.pad_last {
-  grid-column-end: $cols + 1;
-}
-
-.hero {
-  grid-row-start: 1;
-  grid-row-end: span 1;
-  grid-column-start: 1;
-  grid-column-end: -1;
-  background: darken($content_bg, 2%);
-  border-radius: $radius;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font: $font_24_semibold;
-}
-
-.stamp {
-  grid-row-end: span 2;
-  grid-column: -2 / -1;
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  overflow: hidden;
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 60px;
-    width: 100%;
-    background: linear-gradient(transparentize($stamp_color, 1), $stamp_color 90%);
-    pointer-events: none;
-    touch-action: none;
-  }
-}

src/components/flow/FlowRecent/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useState, useCallback, FormEvent } from 'react';
 import * as styles from './styles.scss';
 import { IFlowState } from '~/redux/flow/reducer';
 import { getURL, getPrettyDate } from '~/utils/dom';
@@ -13,45 +13,57 @@ interface IProps {
   updated: IFlowState['updated'];
 }
 
-const FlowRecent: FC<IProps> = ({ recent, updated }) => (
-  <div>
-    <div className={styles.search}>
-      <InputText title="Поиск" />
+const FlowRecent: FC<IProps> = ({ recent, updated }) => {
+  const [search, setSearch] = useState('');
+
+  const onSearchSubmit = useCallback((event: FormEvent) => {
+    event.preventDefault();
+  }, []);
+
+  return (
+    <div>
+      <form className={styles.search} onSubmit={onSearchSubmit}>
+        <InputText title="Поиск" value={search} handler={setSearch} />
+      </form>
+
+      <div className={styles.grid}>
+        <div className={styles.grid_label}>
+          <span>Что нового?</span>
+        </div>
+
+        {updated &&
+          updated.slice(0, 20).map(node => (
+            <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
+              <div
+                className={classNames(styles.thumb, styles.new)}
+                style={{
+                  backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")`,
+                }}
+              />
+
+              <div className={styles.info}>
+                <div className={styles.title}>{node.title}</div>
+                <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
+              </div>
+            </Link>
+          ))}
+
+        {recent &&
+          recent.slice(0, 20).map(node => (
+            <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
+              <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>
+              </div>
+            </Link>
+          ))}
+      </div>
     </div>
-
-    <div className={styles.grid}>
-      {updated &&
-        updated.slice(0, 20).map(node => (
-          <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
-            <div
-              className={classNames(styles.thumb, styles.new)}
-              style={{
-                backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")`,
-              }}
-            />
-
-            <div className={styles.info}>
-              <div className={styles.title}>{node.title}</div>
-              <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
-            </div>
-          </Link>
-        ))}
-
-      {recent &&
-        recent.slice(0, 20).map(node => (
-          <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
-            <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>
-            </div>
-          </Link>
-        ))}
-    </div>
-  </div>
-);
+  );
+};
 
 export { FlowRecent };

src/components/flow/FlowRecent/styles.scss

@@ -5,12 +5,19 @@
   flex: 1;
   background: $content_bg;
   padding: $gap;
+  border-radius: 0 0 $radius $radius;
 
   @include outer_shadow();
 }
 
+.grid_label {
+  margin-bottom: $gap;
+  @include title_with_line();
+  color: transparentize(white, $amount: 0.8);
+}
+
 .search {
-  background: lighten($content_bg, 3%);
+  background: lighten($content_bg, 4%);
   border-radius: $radius $radius 0 0;
   padding: $gap;