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;
 

src/components/input/InputText/index.tsx

@@ -71,11 +71,13 @@ const InputText: FC<IInputTextProps> = ({
           <LoaderCircle size={20} />
         </div>
       </div>
+
       {title && (
         <div className={styles.title}>
           <span>{title}</span>
         </div>
       )}
+
       {error && (
         <div className={styles.error}>
           <span>{error}</span>

src/components/node/NodeRelated/index.tsx

@@ -13,10 +13,9 @@ const NodeRelated: FC<IProps> = ({ title, items }) => {
   return (
     <Group className={styles.wrap}>
       <div className={styles.title}>
-        <div className={styles.line} />
         <div className={styles.text}>{title}</div>
-        <div className={styles.line} />
       </div>
+
       <div className={styles.grid}>
         {items.map(item => (
           <NodeRelatedItem item={item} key={item.id} />

src/components/node/NodeRelated/styles.scss

@@ -17,20 +17,9 @@
     grid-template-columns: repeat(6, 1fr);
   }
 }
-.title {
-  font: $font_14_semibold;
-  text-transform: uppercase;
-  color: transparentize(white, 0.3);
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-}
 
-.line {
-  display: none;
-  flex: 1;
-  height: 2px;
-  background: transparentize(white, 0.95);
+.title {
+  @include title_with_line();
 }
 
 .text {

src/containers/flow/FlowLayout/styles.scss

@@ -73,13 +73,9 @@ $cols: $content_width / $cell;
 }
 
 .stamp {
-  @include outer_shadow();
-
   grid-row-end: span 2;
   grid-column: -2 / -1;
   display: flex;
-  font: $font_24_semibold;
-  display: flex;
   align-items: stretch;
   justify-content: stretch;
   overflow: hidden;

src/styles/inputs.scss

@@ -215,7 +215,7 @@
   .textarea {
     outline: none;
     border: none;
-    font: inherit;
+    font: $font_16_medium;
     box-sizing: border-box;
     background: transparent;
     color: white;
@@ -270,7 +270,7 @@
     transition: top 0.25s, bottom 0.25s, font 0.25s, color 0.25s;
     pointer-events: none;
     touch-action: none;
-    color: transparentize(white, 0.3);
+    color: transparentize(white, 0.5);
     text-transform: capitalize;
     background: $input_bg_color;
 

src/styles/variables.scss

@@ -152,3 +152,23 @@ $input_shadow_filled: $input_shadow;
     @content;
   }
 }
+
+@mixin title_with_line {
+  font: $font_14_semibold;
+  text-transform: uppercase;
+  color: transparentize(white, 0.3);
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+
+  & > * {
+    padding-right: $gap;
+  }
+
+  &:after {
+    content: ' ';
+    flex: 1;
+    height: 2px;
+    background: transparentize(white, 0.95);
+  }
+}