From 4af7e00728ad07691b4fe4f3b5f6b116e3b9c203 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 8 Nov 2019 18:43:01 +0700 Subject: [PATCH] fixed boris layout --- src/components/main/Header/index.tsx | 1 + src/containers/node/BorisLayout/index.tsx | 58 +- src/containers/node/BorisLayout/styles.scss | 58 +- src/sprites/boris_bg.svg | 697 ++++++++++ src/sprites/boris_robot.svg | 1267 +++++++++++++++++++ src/styles/variables.scss | 1 + 6 files changed, 2045 insertions(+), 37 deletions(-) create mode 100644 src/sprites/boris_bg.svg create mode 100644 src/sprites/boris_robot.svg diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx index 5fe17874..99074f4a 100644 --- a/src/components/main/Header/index.tsx +++ b/src/components/main/Header/index.tsx @@ -37,6 +37,7 @@ const HeaderUnconnected: FC = memo(
+ ((( boris ))) flow
diff --git a/src/containers/node/BorisLayout/index.tsx b/src/containers/node/BorisLayout/index.tsx index 16dc0556..0f811e77 100644 --- a/src/containers/node/BorisLayout/index.tsx +++ b/src/containers/node/BorisLayout/index.tsx @@ -7,9 +7,8 @@ import { connect } from 'react-redux'; import { NodeComments } from '~/components/node/NodeComments'; import styles from './styles.scss'; import { CommentForm } from '~/components/node/CommentForm'; -import { Filler } from '~/components/containers/Filler'; import { Group } from '~/components/containers/Group'; -import { GodRays } from '~/components/main/GodRays'; +import boris from '~/sprites/boris_robot.svg'; const mapStateToProps = state => ({ node: selectNode(state), @@ -44,33 +43,44 @@ const BorisLayoutUnconnected: FC = ({ return (
-
-
-
Убежищу сегодня:
-
10
-
лет
-
2
-
месяца
-
- -
Мы собрали:
-
2374
-
поста
-
14765
-
комментариев
-
4260
-
файла
-
54
-
жителя
+
+
+
СНОВА
+
ВМЕСТЕ
+
- - {is_user && } +
+
+
+
Убежищу сегодня:
+
10
+
лет
+
2
+
месяца
- - +
+ +
Мы собрали:
+
2374
+
поста
+
14765
+
комментариев
+
4260
+
файла
+
54
+
жителя
+
+
+ + + {is_user && } + + + +
); }; diff --git a/src/containers/node/BorisLayout/styles.scss b/src/containers/node/BorisLayout/styles.scss index 88770f91..1cc12029 100644 --- a/src/containers/node/BorisLayout/styles.scss +++ b/src/containers/node/BorisLayout/styles.scss @@ -2,11 +2,10 @@ display: flex; align-items: flex-start; justify-content: center; - flex-direction: row; + flex-direction: column; } -.container { - margin-top: 33vh; +.content { flex: 3; z-index: 2; padding: $gap; @@ -19,20 +18,19 @@ background: $content_bg; position: relative; z-index: 2; - margin-top: 33vh; margin-right: $gap; border-radius: $radius; padding: $gap * 2; } -.content { - padding: $gap; - text-align: center; - font: $font_24_bold; - text-transform: uppercase; - position: relative; - display: none; -} +// .content { +// padding: $gap; +// text-align: center; +// font: $font_24_bold; +// text-transform: uppercase; +// position: relative; +// display: none; +// } .cover { position: fixed; @@ -43,7 +41,8 @@ height: 100vh; overflow: hidden; // background: linear-gradient($red, transparentize($red, 1)); - background: 50% 0% no-repeat/cover url('~/sprites/illustrate.svg'); + background: 50% 0% no-repeat/cover url('~/sprites/boris_bg.svg'); + // display: none; } .header { @@ -75,3 +74,36 @@ grid-column: 1/3; height: $gap * 4; } + +.container { + display: flex; + align-items: flex-start; + justify-content: center; + flex-direction: row; +} + +.image { + position: relative; + z-index: 2; + display: flex; + align-items: center; + justify-content: flex-end; + + img { + width: 90%; + } +} + +.caption { + position: absolute; + left: 0; + bottom: 0; + width: 50%; + height: 100%; + display: flex; + align-items: flex-start; + justify-content: flex-end; + font: $font_48_bold; + flex-direction: column; + padding-bottom: $gap * 2; +} diff --git a/src/sprites/boris_bg.svg b/src/sprites/boris_bg.svg new file mode 100644 index 00000000..27b1767b --- /dev/null +++ b/src/sprites/boris_bg.svg @@ -0,0 +1,697 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sprites/boris_robot.svg b/src/sprites/boris_robot.svg new file mode 100644 index 00000000..282622ce --- /dev/null +++ b/src/sprites/boris_robot.svg @@ -0,0 +1,1267 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 25860aa8..34a970a2 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -34,6 +34,7 @@ $font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helve 'Noto Color Emoji'; $font_48_semibold: $semibold 48px $font; +$font_48_bold: $bold 48px $font; $font_24_bold: $bold 24px $font; $font_24_semibold: $bold 24px $font; $font_24_medium: $medium 24px $font;