From 41a35f1490814449977019e7bf94126f7788d69c Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sat, 18 Apr 2020 14:37:14 +0700 Subject: [PATCH] whatsnew --- src/components/flow/FlowGrid/styles.scss | 89 -------------------- src/components/flow/FlowRecent/index.tsx | 92 ++++++++++++--------- src/components/flow/FlowRecent/styles.scss | 9 +- src/components/input/InputText/index.tsx | 2 + src/components/node/NodeRelated/index.tsx | 3 +- src/components/node/NodeRelated/styles.scss | 15 +--- src/containers/flow/FlowLayout/styles.scss | 4 - src/styles/inputs.scss | 4 +- src/styles/variables.scss | 20 +++++ 9 files changed, 87 insertions(+), 151 deletions(-) diff --git a/src/components/flow/FlowGrid/styles.scss b/src/components/flow/FlowGrid/styles.scss index adceefc7..e69de29b 100644 --- a/src/components/flow/FlowGrid/styles.scss +++ b/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; - } -} diff --git a/src/components/flow/FlowRecent/index.tsx b/src/components/flow/FlowRecent/index.tsx index 2cf872e7..430054e7 100644 --- a/src/components/flow/FlowRecent/index.tsx +++ b/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 = ({ recent, updated }) => ( -
-
- +const FlowRecent: FC = ({ recent, updated }) => { + const [search, setSearch] = useState(''); + + const onSearchSubmit = useCallback((event: FormEvent) => { + event.preventDefault(); + }, []); + + return ( +
+
+ + + +
+
+ Что нового? +
+ + {updated && + updated.slice(0, 20).map(node => ( + +
+ +
+
{node.title}
+
{getPrettyDate(node.created_at)}
+
+ + ))} + + {recent && + recent.slice(0, 20).map(node => ( + +
+ +
+ +
+
{node.title}
+
{getPrettyDate(node.created_at)}
+
+ + ))} +
- -
- {updated && - updated.slice(0, 20).map(node => ( - -
- -
-
{node.title}
-
{getPrettyDate(node.created_at)}
-
- - ))} - - {recent && - recent.slice(0, 20).map(node => ( - -
- -
- -
-
{node.title}
-
{getPrettyDate(node.created_at)}
-
- - ))} -
-
-); + ); +}; export { FlowRecent }; diff --git a/src/components/flow/FlowRecent/styles.scss b/src/components/flow/FlowRecent/styles.scss index be87761a..dfb7b656 100644 --- a/src/components/flow/FlowRecent/styles.scss +++ b/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; diff --git a/src/components/input/InputText/index.tsx b/src/components/input/InputText/index.tsx index 5428ff41..cadf4c34 100644 --- a/src/components/input/InputText/index.tsx +++ b/src/components/input/InputText/index.tsx @@ -71,11 +71,13 @@ const InputText: FC = ({
+ {title && (
{title}
)} + {error && (
{error} diff --git a/src/components/node/NodeRelated/index.tsx b/src/components/node/NodeRelated/index.tsx index 07c70da7..f119d9f2 100644 --- a/src/components/node/NodeRelated/index.tsx +++ b/src/components/node/NodeRelated/index.tsx @@ -13,10 +13,9 @@ const NodeRelated: FC = ({ title, items }) => { return (
-
{title}
-
+
{items.map(item => ( diff --git a/src/components/node/NodeRelated/styles.scss b/src/components/node/NodeRelated/styles.scss index f11b52ac..fabf438e 100644 --- a/src/components/node/NodeRelated/styles.scss +++ b/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 { diff --git a/src/containers/flow/FlowLayout/styles.scss b/src/containers/flow/FlowLayout/styles.scss index 33ba8b7b..688821d5 100644 --- a/src/containers/flow/FlowLayout/styles.scss +++ b/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; diff --git a/src/styles/inputs.scss b/src/styles/inputs.scss index 31fa6c69..74bb370e 100644 --- a/src/styles/inputs.scss +++ b/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; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 13b62fd5..b53b40b4 100644 --- a/src/styles/variables.scss +++ b/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); + } +}