diff --git a/package.json b/package.json index 89d4282b..a7010af3 100644 --- a/package.json +++ b/package.json @@ -99,6 +99,7 @@ "redux-persist": "^5.10.0", "redux-saga": "^1.1.1", "reduxsauce": "^1.0.0", + "resize-sensor": "^0.0.6", "sass-loader": "^7.3.1", "sass-resources-loader": "^2.0.0", "scrypt": "^6.0.3", diff --git a/src/components/containers/BlurWrapper/styles.scss b/src/components/containers/BlurWrapper/styles.scss index bcd83f5e..fd537904 100644 --- a/src/components/containers/BlurWrapper/styles.scss +++ b/src/components/containers/BlurWrapper/styles.scss @@ -1,7 +1,4 @@ .blur { - filter: blur(0); - transition: filter 0.25s; - will-change: filter; padding-top: $header_height + 2px; display: flex; box-sizing: border-box; diff --git a/src/components/containers/Sticky/index.tsx b/src/components/containers/Sticky/index.tsx new file mode 100644 index 00000000..e70d6727 --- /dev/null +++ b/src/components/containers/Sticky/index.tsx @@ -0,0 +1,41 @@ +import React, { FC, ReactComponentElement, DetailsHTMLAttributes, useEffect, useRef } from 'react'; +import styles from './styles.scss'; +import StickySidebar from 'sticky-sidebar'; +import classnames from 'classnames'; +import ResizeSensor from 'resize-sensor'; + +interface IProps extends DetailsHTMLAttributes {} + +(window as any).StickySidebar = StickySidebar; +(window as any).ResizeSensor = ResizeSensor; + +const Sticky: FC = ({ children }) => { + const ref = useRef(null); + let sb = null; + + useEffect(() => { + if (!ref.current) return; + + sb = new StickySidebar(ref.current, { + resizeSensor: true, + topSpacing: 72, + bottomSpacing: 10, + }); + + return () => sb.destroy(); + }, [ref.current, children]); + + if (sb) { + sb.updateSticky(); + } + + return ( +
+
+
{children}
+
+
+ ); +}; + +export { Sticky }; diff --git a/src/components/containers/Sticky/styles.scss b/src/components/containers/Sticky/styles.scss new file mode 100644 index 00000000..8bca8106 --- /dev/null +++ b/src/components/containers/Sticky/styles.scss @@ -0,0 +1,15 @@ +.wrap { + height: 100%; + width: 100%; + position: relative; + + :global(.sidebar) { + will-change: min-height; + } + + :global(.sidebar__inner) { + transform: translate(0, 0); /* For browsers don't support translate3d. */ + transform: translate3d(0, 0, 0); + will-change: position, transform; + } +} diff --git a/src/components/main/Footer/index.tsx b/src/components/main/Footer/index.tsx new file mode 100644 index 00000000..0ae17a29 --- /dev/null +++ b/src/components/main/Footer/index.tsx @@ -0,0 +1,13 @@ +import React, { FC, memo } from 'react'; +import styles from './styles.scss'; + +interface IProps {} + +const Footer: FC = memo(() => ( +
+
Уделяй больше времени тишине. Спасибо
+
2009 - {new Date().getFullYear()}
+
+)); + +export { Footer }; diff --git a/src/components/main/Footer/styles.scss b/src/components/main/Footer/styles.scss new file mode 100644 index 00000000..1fbf1779 --- /dev/null +++ b/src/components/main/Footer/styles.scss @@ -0,0 +1,23 @@ +.footer { + display: flex; + flex-direction: row; + font: $font_12_semibold; + background: transparentize(black, 0.9); + border-radius: 0 0 $radius $radius; + align-items: center; + text-transform: uppercase; + color: darken(white, 80%); + padding-top: 2px; + box-sizing: border-box; + + @include outer_shadow(); +} + +.slogan { + flex: 1; + padding: $gap; +} + +.copy { + padding: $gap; +} diff --git a/src/containers/App.tsx b/src/containers/App.tsx index 060b9e6e..a67ca5e5 100644 --- a/src/containers/App.tsx +++ b/src/containers/App.tsx @@ -6,8 +6,6 @@ import { Switch, Route, Redirect } from 'react-router-dom'; import { history } from '~/redux/store'; import { FlowLayout } from '~/containers/flow/FlowLayout'; import { MainLayout } from '~/containers/main/MainLayout'; -import { ImageExample } from '~/containers/examples/ImageExample'; -import { EditorExample } from '~/containers/examples/EditorExample'; import { Sprites } from '~/sprites/Sprites'; import { URLS } from '~/constants/urls'; import { Modal } from '~/containers/dialogs/Modal'; @@ -39,8 +37,6 @@ const Component: FC = ({ modal: { is_shown } }) => { - - @@ -57,7 +53,4 @@ const Component: FC = ({ modal: { is_shown } }) => { ); }; -export default connect( - mapStateToProps, - mapDispatchToProps -)(hot(module)(Component)); +export default connect(mapStateToProps, mapDispatchToProps)(hot(module)(Component)); diff --git a/src/containers/examples/EditorExample/index.tsx b/src/containers/examples/EditorExample/index.tsx deleted file mode 100644 index ef5bbce5..00000000 --- a/src/containers/examples/EditorExample/index.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React, { FC } from 'react'; -import classNames from 'classnames'; -import { Card } from '~/components/containers/Card'; -import * as styles from './styles.scss'; -import { Group } from '~/components/containers/Group'; -import { CellGrid } from '~/components/containers/CellGrid'; -import { Panel } from '~/components/containers/Panel'; -import { Scroll } from '~/components/containers/Scroll'; -import { Tags } from '~/components/node/Tags'; -import { Button } from '~/components/input/Button'; -import { Filler } from '~/components/containers/Filler'; -import { InputText } from '~/components/input/InputText'; -import { Icon } from '~/components/input/Icon'; -import { Grid } from '~/components/containers/Grid'; - -interface IProps {} - -const EditorExample: FC = () => ( - - -
- - - -
-
-
-
- - - - - - - -
- - - -
- -
- - - - - - - - - - - - - -
- - -); - -export { EditorExample }; diff --git a/src/containers/examples/EditorExample/styles.scss b/src/containers/examples/EditorExample/styles.scss deleted file mode 100644 index aad4e49e..00000000 --- a/src/containers/examples/EditorExample/styles.scss +++ /dev/null @@ -1,87 +0,0 @@ -.wrap { - align-items: stretch; - justify-content: center; - display: flex; - background: $editor_bg; - flex: 1; -} - -.group { - display: flex; - align-items: stretch !important; - justify-content: stretch; - //flex: 1; -} - -.panel { - background: $editor_panel_bg; - flex: 1; - border-radius: $radius; - box-sizing: border-box; - display: flex; - flex-direction: column; -} - -.editor { - flex: 2; - display: flex; - align-items: stretch; - flex-direction: column; -} - -.editor_image_panel { - flex: 1; -} - -.editor_image_container { - flex: 1; -} - -.editor_image { - background: transparentize(white, 0.95); - padding-bottom: 100%; - border-radius: $radius; -} - -.feature_card { - height: 120px; - background: darken($main_bg_color, 6%); - color: transparentize(white, 0.5); - display: flex; - align-items: center; - justify-content: center; - text-transform: uppercase; - font: $font_18_semibold; - box-shadow: none; - padding: 0; -} - -.cover { - border-radius: $radius; - background: url("http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg"); - flex: 1; - height: 120px; - background-size: cover; - opacity: 0.3; -} - -.panel_main { - flex: 1; - display: flex; -} - -.close_icon { - height: 24px; - width: 24px; - background: transparentize(white, 0.95); - flex: 0 0 24px; - border-radius: $radius; -} - -.views { - div { - display: flex; - align-items: center; - justify-content: center; - } -} diff --git a/src/containers/examples/HorizontalExample/index.tsx b/src/containers/examples/HorizontalExample/index.tsx deleted file mode 100644 index 45ce0935..00000000 --- a/src/containers/examples/HorizontalExample/index.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React, { FC } from 'react'; -import { Card } from '~/components/containers/Card'; -import * as styles from './styles.scss'; -import { Padder } from '~/components/containers/Padder'; -import { Group } from '~/components/containers/Group'; -import { InputText } from '~/components/input/InputText'; -import { Button } from '~/components/input/Button'; -import { Filler } from '~/components/containers/Filler'; -import { Icon } from '~/components/input/Icon'; - -interface IProps {} - -const HorizontalExample: FC = () => ( -
- -
-
-
-
-
-
-
-
-
- - - -
- -
- -
- -
ОБЛОЖКА
- - -
- - - -
- -
- - -
- - - - - -
-); - -export { HorizontalExample }; diff --git a/src/containers/examples/HorizontalExample/styles.scss b/src/containers/examples/HorizontalExample/styles.scss deleted file mode 100644 index f28ba120..00000000 --- a/src/containers/examples/HorizontalExample/styles.scss +++ /dev/null @@ -1,91 +0,0 @@ -.wrap { - flex: 1; - align-items: center; - justify-content: center; - display: flex; - flex-direction: column; -} - -.card { - padding: 0; - display: flex; - flex-direction: column; - justify-content: center; - background: darken($content_bg, 4%); - box-shadow: transparentize(black, 0.7) 0 10px 5px; -} - -.editor { - background: $content_bg; - min-height: 200px; - min-width: 50vw; - - border-radius: $radius; - display: flex; - align-items: stretch; - justify-content: stretch; - flex-direction: column; - flex: 1; - - @include outer_shadow(); -} - -.panel { -} - -.features { - display: flex; -} - -.feature_add_btn { - width: 40px; - height: 40px; - border-radius: 24px; - background: $red_gradient; - display: flex; - align-items: center; - justify-content: center; -} - -.feature { - background: lighten($content_bg, 4%); - padding: $gap $gap $gap 20px; - border-radius: 24px; - font: $font_14_semibold; - height: 40px; - box-sizing: border-box; -} - -.feature_cell { - background: lighten($content_bg, 4%); - display: flex; - align-items: center; - justify-content: center; - height: 40px; - width: 40px; - box-sizing: border-box; - border-radius: $radius; -} - -.uploads { - flex: 1; - padding: $gap; - // padding-bottom: 0; - display: grid; - align-items: center; - justify-content: center; - grid-column-gap: $gap; - grid-row-gap: $gap; - - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - - @media (max-width: 600px) { - grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr)); - } -} - -.cell { - background: lighten($content_bg, 6%); - border-radius: $radius; - padding-bottom: 100%; -} diff --git a/src/containers/examples/ImageExample/index.tsx b/src/containers/examples/ImageExample/index.tsx deleted file mode 100644 index 53ba8cb5..00000000 --- a/src/containers/examples/ImageExample/index.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { FC } from 'react'; -import range from 'ramda/es/range'; -import { Card } from '~/components/containers/Card'; -import * as styles from './styles.scss'; -import { Group } from '~/components/containers/Group'; -import { Padder } from '~/components/containers/Padder'; -import { Comment } from '~/components/node/Comment'; -import { NodePanel } from '~/components/node/NodePanel'; -import { NodeRelated } from '~/components/node/NodeRelated'; -import { Tags } from '~/components/node/Tags'; -import { NodeNoComments } from '~/components/node/NodeNoComments'; -import { ImageSwitcher } from '~/components/node/ImageSwitcher'; - -interface IProps {} - -const ImageExample: FC = () => ; - -export { ImageExample }; - -/* - - - - - - - - - - */ diff --git a/src/containers/examples/ImageExample/styles.scss b/src/containers/examples/ImageExample/styles.scss deleted file mode 100644 index 1aaeca6d..00000000 --- a/src/containers/examples/ImageExample/styles.scss +++ /dev/null @@ -1,53 +0,0 @@ -.image_container { - width: 100%; - background: $node_image_bg; - border-radius: $panel_radius 0 0 $panel_radius; - display: flex; - align-items: center; - justify-content: center; - - .image { - max-height: 800px; - opacity: 1; - width: 100%; - border-radius: $radius $radius 0 0; - } -} - -.content { - align-items: stretch !important; - - @include vertical_at_tablet; -} - -.comments { - flex: 3 1; -} - -.panel { - flex: 1 3; - display: flex; - align-items: flex-start; - justify-content: flex-start; - padding-left: $gap / 2; - - @include tablet { - padding-left: 0; - } -} - -.node { - background: $node_bg; - box-shadow: $node_shadow; -} - -.image { - background: red; -} - -.buttons { - background: $node_buttons_bg; - flex: 1; - border-radius: $panel_radius; - box-shadow: $comment_shadow; -} diff --git a/src/containers/main/MainLayout/styles.scss b/src/containers/main/MainLayout/styles.scss index f3f576b9..9e49d8f1 100644 --- a/src/containers/main/MainLayout/styles.scss +++ b/src/containers/main/MainLayout/styles.scss @@ -19,6 +19,6 @@ width: 100%; max-width: $content_width; display: flex; - padding-bottom: 64px; + padding-bottom: 29px; flex-direction: column; } diff --git a/src/containers/node/BorisLayout/index.tsx b/src/containers/node/BorisLayout/index.tsx index b66a30ee..b8058e69 100644 --- a/src/containers/node/BorisLayout/index.tsx +++ b/src/containers/node/BorisLayout/index.tsx @@ -14,6 +14,8 @@ import { NodeCommentForm } from '~/components/node/NodeCommentForm'; import * as NODE_ACTIONS from '~/redux/node/actions'; import * as AUTH_ACTIONS from '~/redux/auth/actions'; import isBefore from 'date-fns/isBefore'; +import { Card } from '~/components/containers/Card'; +import { Footer } from '~/components/main/Footer'; const mapStateToProps = state => ({ node: selectNode(state), @@ -68,58 +70,38 @@ const BorisLayoutUnconnected: FC = ({
{title}
- + + Борис
-
-
-
Убежищу сегодня:
-
10
-
лет
-
2
-
месяца
+ + + {is_user && } -
+ {is_loading_comments ? ( + + ) : ( + + )} + -
Мы собрали:
-
2374
-
поста
-
14765
-
комментариев
-
4260
-
файла
-
54
-
жителя
-
-
- - - {is_user && } - - {is_loading_comments ? ( - - ) : ( - - )} - +
+
); }; -const BorisLayout = connect( - mapStateToProps, - mapDispatchToProps -)(BorisLayoutUnconnected); +const BorisLayout = connect(mapStateToProps, mapDispatchToProps)(BorisLayoutUnconnected); export { BorisLayout }; diff --git a/src/containers/node/BorisLayout/styles.scss b/src/containers/node/BorisLayout/styles.scss index 19beaa23..a62b3215 100644 --- a/src/containers/node/BorisLayout/styles.scss +++ b/src/containers/node/BorisLayout/styles.scss @@ -8,21 +8,15 @@ .content { flex: 3; z-index: 2; - padding: $gap; - background: $content_bg; border-radius: $radius; flex: 0 1 $limited_width; + padding: 0; + background: $node_bg; + box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px; } -.column { - flex: 1; - background: $content_bg; - position: relative; - z-index: 2; - margin-right: $gap; - border-radius: $radius; - padding: $gap * 2; - display: none; +.grid { + padding: $gap; } .cover { @@ -33,7 +27,7 @@ width: 100%; height: 100vh; overflow: hidden; - background: 50% 0% no-repeat url("~/sprites/boris_bg.svg"); + background: 50% 0% no-repeat url('~/sprites/boris_bg.svg'); background-size: cover; } @@ -41,32 +35,6 @@ font-size: 2em; } -.daygrid { - display: grid; - grid-template-columns: 1fr 100%; - column-gap: $gap; - align-items: center; -} - -.day { - font-size: 2em; - font-weight: 600; - text-align: right; -} - -.label { - font: $font_14_regular; - text-transform: uppercase; - margin-bottom: 5px; - opacity: 0.5; - grid-column: 1/3; -} - -.line { - grid-column: 1/3; - height: $gap * 4; -} - .container { display: flex; align-items: flex-start; @@ -74,11 +42,6 @@ flex-direction: row; flex: 0 1 $limited_width; width: 100%; - // margin: auto; - - // @include tablet { - // width: 100%; - // } } .image { diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx index 10be9540..42ad799e 100644 --- a/src/containers/node/NodeLayout/index.tsx +++ b/src/containers/node/NodeLayout/index.tsx @@ -20,6 +20,8 @@ import pick from 'ramda/es/pick'; import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder'; import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge'; import { NodeCommentForm } from '~/components/node/NodeCommentForm'; +import { Sticky } from '~/components/containers/Sticky'; +import { Footer } from '~/components/main/Footer'; const mapStateToProps = state => ({ node: selectNode(state), @@ -158,39 +160,40 @@ const NodeLayoutUnconnected: FC = memo(
- - {!is_loading && ( - - )} + + + {!is_loading && ( + + )} - {is_loading && } + {is_loading && } - {!is_loading && - related && - related.albums && - Object.keys(related.albums) - .filter(album => related.albums[album].length > 0) - .map(album => ( - - ))} + {!is_loading && + related && + related.albums && + Object.keys(related.albums) + .filter(album => related.albums[album].length > 0) + .map(album => ( + + ))} - {!is_loading && related && related.similar && related.similar.length > 0 && ( - - )} - + {!is_loading && related && related.similar && related.similar.length > 0 && ( + + )} + +
)} + +