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/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 cabbf1a0..42ad799e 100644 --- a/src/containers/node/NodeLayout/index.tsx +++ b/src/containers/node/NodeLayout/index.tsx @@ -21,6 +21,7 @@ import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholde 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), @@ -186,6 +187,8 @@ const NodeLayoutUnconnected: FC = memo( )} + +