diff --git a/src/components/containers/BlurWrapper/index.tsx b/src/components/containers/BlurWrapper/index.tsx index 913afa0c..e7e7a0a3 100644 --- a/src/components/containers/BlurWrapper/index.tsx +++ b/src/components/containers/BlurWrapper/index.tsx @@ -1,10 +1,9 @@ import React, { AllHTMLAttributes, FC } from 'react'; import * as styles from './styles.scss'; +import classNames from 'classnames'; type IProps = AllHTMLAttributes & { is_blurred: boolean }; export const BlurWrapper: FC = ({ children, is_blurred }) => ( -
- {children} -
+
{children}
); diff --git a/src/components/containers/BlurWrapper/styles.scss b/src/components/containers/BlurWrapper/styles.scss index 113865fb..7347e452 100644 --- a/src/components/containers/BlurWrapper/styles.scss +++ b/src/components/containers/BlurWrapper/styles.scss @@ -2,7 +2,17 @@ filter: blur(0); transition: filter 0.25s; will-change: filter; - // max-height: 100vh; - // width: 100vw; - // overflow: visible auto; + padding-top: 100px + $gap; + + @include tablet { + padding-top: 64px + $gap; + } + + &.is_blurred { + filter: blur(15px); + + @include can_backdrop { + filter: blur(0); + } + } } diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx index ec988bb7..23a16b16 100644 --- a/src/components/main/Header/index.tsx +++ b/src/components/main/Header/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useCallback, memo } from 'react'; +import React, { FC, useCallback, memo, useState, useEffect } from 'react'; import { connect } from 'react-redux'; import { push as historyPush } from 'connected-react-router'; import { Link } from 'react-router-dom'; @@ -13,9 +13,10 @@ import * as AUTH_ACTIONS from '~/redux/auth/actions'; import { DIALOGS } from '~/redux/modal/constants'; import { pick } from 'ramda'; import { UserButton } from '../UserButton'; -import { Icon } from '~/components/input/Icon'; import { Notifications } from '../Notifications'; import { URLS } from '~/constants/urls'; +import { createPortal } from 'react-dom'; +import classNames from 'classnames'; const mapStateToProps = state => ({ user: pick(['username', 'is_user', 'photo'])(selectUser(state)), @@ -32,41 +33,61 @@ type IProps = ReturnType & typeof mapDispatchToProps & { const HeaderUnconnected: FC = memo( ({ user, user: { username, is_user }, showDialog, authLogout, authOpenProfile }) => { + const [is_scrolled, setIsScrolled] = useState(false); + const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]); const onProfileClick = useCallback(() => authOpenProfile(username), [authOpenProfile, user]); - return ( -
- + const onScroll = useCallback(() => { + const active = window.scrollY > 64; - + if (active !== is_scrolled) setIsScrolled(active); + }, [is_scrolled, setIsScrolled]); - {is_user && ( -
- - FLOW - + useEffect(() => { + onScroll(); + }, []); - - BORIS - + useEffect(() => { + window.addEventListener('scroll', onScroll); + return () => window.removeEventListener('scroll', onScroll); + }, [onScroll]); -
- + return createPortal( +
+
+ + + + + {is_user && ( +
+ + FLOW + + + + BORIS + + +
+ +
-
- )} + )} - {is_user && ( - - )} + {is_user && ( + + )} - {!is_user && ( - -
ВДОХ
- - )} -
+ {!is_user && ( + +
ВДОХ
+ + )} +
+
, + document.body ); } ); diff --git a/src/components/main/Header/style.scss b/src/components/main/Header/style.scss index c6df522c..002e5860 100644 --- a/src/components/main/Header/style.scss +++ b/src/components/main/Header/style.scss @@ -1,10 +1,39 @@ +.wrap { + height: 64px; + z-index: 5; + position: fixed; + top: 0; + left: 0; + width: 100%; + display: flex; + align-items: stretch; + justify-content: center; + box-sizing: border-box; + transition: background-color 0.5s; + + @include tablet { + height: 64px; + } + + &.is_scrolled { + background: transparentize($content_bg, 0.05); + + @include can_backdrop { + background: transparentize($content_bg, 0.25); + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + } + } +} + .container { display: flex; align-items: center; justify-content: flex-end; font-weight: 500; - height: 120px; - z-index: 5; + // padding: $gap; + box-sizing: border-box; + flex: 0 1 $content_width; } .spacer { @@ -56,6 +85,14 @@ // display: none; // } } + + @include tablet { + padding: $gap / 2; + + &::after { + margin-left: $gap; + } + } } } diff --git a/src/containers/dialogs/Modal/styles.scss b/src/containers/dialogs/Modal/styles.scss index 4229aa18..bbc9d691 100644 --- a/src/containers/dialogs/Modal/styles.scss +++ b/src/containers/dialogs/Modal/styles.scss @@ -49,6 +49,11 @@ left: 0; width: 100%; height: 100%; - // background: transparentize($color: #000000, $amount: 0.5); + background: transparentize($color: #000000, $amount: 0.9); cursor: pointer; + animation: appear 0.25s forwards; + + @include can_backdrop { + backdrop-filter: blur(15px); + } } diff --git a/src/index.tsx b/src/index.tsx index b22cf9ed..db29a021 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -23,7 +23,6 @@ render( [Stage 0]: - check if email is registered at social login - friendship - - password restore - signup? - cover change - sticky header @@ -47,6 +46,7 @@ render( - comment editing Done: +- password restore - avatar upload - flow updates - flow infinite scroll diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 6a41e8ce..0278c8c3 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,4 +1,4 @@ -@import "colors"; +@import 'colors'; $cell: 280px; $gap: 10px; @@ -31,9 +31,9 @@ $extra_light: 200; $upload_button_height: 52px; -$font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +$font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, + 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; $font_48_semibold: $semibold 48px $font; $font_48_bold: $bold 48px $font; @@ -61,14 +61,11 @@ $font_8_semibold: $semibold 8px $font; $font_cell_title: $bold 30px $font; $font_hero_title: $bold 40px $font; -$shadow_depth_1: transparentize(black, 0.8) 0 1px, - inset transparentize(white, 0.98) 0 1px; -$shadow_depth_2: transparentize(black, 0.8) 0 2px, - inset transparentize(white, 0.98) 0 1px; +$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px; +$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset transparentize(white, 0.98) 0 1px; $comment_shadow: $shadow_depth_2; -$node_shadow: transparentize(black, 0.8) 0 2px, - transparentize(black, 0.8) 0 2px 4px; +$node_shadow: transparentize(black, 0.8) 0 2px, transparentize(black, 0.8) 0 2px 4px; $tag_height: 26px; @@ -77,18 +74,15 @@ $input_shadow_error: inset $red 0 0 0 1px; $input_shadow_filled: $input_shadow; @mixin outer_shadow() { - box-shadow: inset transparentize(white, 0.95) 0 1px, - transparentize(black, 0.8) -1px -1px; + box-shadow: inset transparentize(white, 0.95) 0 1px, transparentize(black, 0.8) -1px -1px; } @mixin inner_shadow() { - box-shadow: inset transparentize(white, 0.95) 0 -1px, - inset transparentize(black, 0.5) 0 1px; + box-shadow: inset transparentize(white, 0.95) 0 -1px, inset transparentize(black, 0.5) 0 1px; } @mixin input_shadow() { - box-shadow: inset transparentize(white, 0.92) 0 -1px, - inset transparentize(black, 0.8) 0 1px; + box-shadow: inset transparentize(white, 0.92) 0 -1px, inset transparentize(black, 0.8) 0 1px; } @mixin modal_mixin() { @@ -104,7 +98,7 @@ $input_shadow_filled: $input_shadow; position: $position; &::after { - content: " "; + content: ' '; position: absolute; bottom: 0; left: 0; @@ -150,3 +144,9 @@ $input_shadow_filled: $input_shadow; } } } + +@mixin can_backdrop { + @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) { + @content; + } +}