From 163a46ace290ba175eeba3cbd511eec99dd7fcbc Mon Sep 17 00:00:00 2001 From: muerwre Date: Fri, 26 Jul 2019 20:02:23 +0700 Subject: [PATCH] image layout --- src/components/containers/Filler/index.tsx | 18 +++++ src/components/containers/Filler/styles.scss | 3 + src/components/containers/Group/styles.scss | 2 +- src/components/main/SidePane/index.tsx | 12 ++- src/components/node/NodePanel/index.tsx | 21 +++++ src/components/node/NodePanel/styles.scss | 76 +++++++++++++++++++ .../examples/ImageExample/index.tsx | 58 ++++++++++++-- .../examples/ImageExample/styles.scss | 45 +++++++++++ src/containers/flow/FlowLayout/index.tsx | 2 - src/containers/main/MainLayout/index.tsx | 6 +- src/index.html | 2 +- src/styles/colors.scss | 1 + src/styles/variables.scss | 19 +++-- 13 files changed, 237 insertions(+), 28 deletions(-) create mode 100644 src/components/containers/Filler/index.tsx create mode 100644 src/components/containers/Filler/styles.scss create mode 100644 src/components/node/NodePanel/index.tsx create mode 100644 src/components/node/NodePanel/styles.scss diff --git a/src/components/containers/Filler/index.tsx b/src/components/containers/Filler/index.tsx new file mode 100644 index 00000000..2f40c037 --- /dev/null +++ b/src/components/containers/Filler/index.tsx @@ -0,0 +1,18 @@ +import React, { FC } from 'react'; +import classNames from 'classnames'; +import * as styles from './styles.scss'; + +type IProps = React.HTMLAttributes; + +export const Filler: FC = ({ + className = '', + ...props +}) => ( +
+); diff --git a/src/components/containers/Filler/styles.scss b/src/components/containers/Filler/styles.scss new file mode 100644 index 00000000..599ffb33 --- /dev/null +++ b/src/components/containers/Filler/styles.scss @@ -0,0 +1,3 @@ +.filler { + flex: 1; +} diff --git a/src/components/containers/Group/styles.scss b/src/components/containers/Group/styles.scss index 2eb26a50..75f7c985 100644 --- a/src/components/containers/Group/styles.scss +++ b/src/components/containers/Group/styles.scss @@ -29,7 +29,7 @@ } & > * { - margin: 0 $gap; + margin: 0 $gap / 2; &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } diff --git a/src/components/main/SidePane/index.tsx b/src/components/main/SidePane/index.tsx index 702e7370..ef8a8197 100644 --- a/src/components/main/SidePane/index.tsx +++ b/src/components/main/SidePane/index.tsx @@ -3,22 +3,20 @@ import * as styles from './styles.scss'; import classNames from 'classnames'; interface IProps { - container: React.RefObject; } export const SidePane: FC = ({ - container, }) => { + const content_width = 1100; const [left, setLeft] = useState(0); const moveThis = useCallback(() => { - const shift = window.innerWidth > (1024 + 64 + 20) - ? ((window.innerWidth - 1024 - 64 - 20) / 2) - 54 - 10 + 64 + const shift = window.innerWidth > (content_width + 64 + 20) + ? ((window.innerWidth - content_width - 64 - 20) / 2) - 54 - 10 + 64 : 10; setLeft(shift); - console.log({ shift }); - }, [setLeft, container]); + }, [setLeft]); useEffect(() => { moveThis(); @@ -29,7 +27,7 @@ export const SidePane: FC = ({ window.removeEventListener('resize', moveThis); document.removeEventListener('DOMContentLoaded', moveThis); } - }, [container]); + }, []); return (
diff --git a/src/components/node/NodePanel/index.tsx b/src/components/node/NodePanel/index.tsx new file mode 100644 index 00000000..7c42c2a2 --- /dev/null +++ b/src/components/node/NodePanel/index.tsx @@ -0,0 +1,21 @@ +import React, { FC } from 'react'; +import * as styles from './styles.scss'; +import { Group } from "~/components/containers/Group"; +import { Filler } from "~/components/containers/Filler"; + +interface IProps {} + +const NodePanel: FC = () => ( +
+ + +
Node title
+
~author
+ + + +
+
+); + +export { NodePanel }; diff --git a/src/components/node/NodePanel/styles.scss b/src/components/node/NodePanel/styles.scss new file mode 100644 index 00000000..4fd4fc3b --- /dev/null +++ b/src/components/node/NodePanel/styles.scss @@ -0,0 +1,76 @@ +.wrap { + //height: $node_title_height; + //background: $node_title_background; + background: transparentize(black, 0.9); + padding: $gap; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: stretch; + //border-radius: $radius $radius 0 0; + //box-shadow: transparentize(black, 0.3) 0 2px, inset transparentize(white, 0.98) 0 1px; + box-shadow: transparentize(white, 0.97) 0 1px, inset transparentize(white, 0.97) 0 1px; + position: relative; +} + +.title { + text-transform: uppercase; + font: $font_24_semibold; + height: 24px; + padding-bottom: 6px; +} + +.name { + font: $font_12_regular; + color: transparentize(white, 0.5); +} + +.btn { + flex: 1; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + fill: transparentize(white, 0.5); +} + +.panel { + flex: 1; +} + +.buttons { + height: 54px; + border-radius: $radius $radius 0 0; + background: linear-gradient(176deg, #f42a00, #5c1085); + background: #222222; + position: absolute; + bottom: 0; + right: 10px; + width: 270px; + display: flex; +} + +.mark { + flex: 0 0 32px; + background: red; + position: relative; + + &::after { + content: ' '; + position: absolute; + top: -38px; + right: 4px; + width: 24px; + height: 52px; + background: #ff3344; + box-shadow: transparentize(black, 0.8) 4px 2px; + } +} + +.sep { + flex: 0 0 12px; + height: 6px; + width: 12px; + border-radius: 4px; + background: transparentize(black, 0.7); +} diff --git a/src/containers/examples/ImageExample/index.tsx b/src/containers/examples/ImageExample/index.tsx index 89d5d22e..78654efe 100644 --- a/src/containers/examples/ImageExample/index.tsx +++ b/src/containers/examples/ImageExample/index.tsx @@ -5,20 +5,28 @@ import { Group } from "~/components/containers/Group"; import { Padder } from "~/components/containers/Padder"; import range from 'ramda/es/range'; import { Comment } from "~/components/node/Comment"; +import { NodePanel } from "~/components/node/NodePanel"; +import { Filler } from "~/components/containers/Filler"; interface IProps {} const ImageExample: FC = () => ( +
+ { + // http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg + // http://37.192.131.144/full/photos/photo-20120702-99383.jpg + } + +
+ -
- -
+ - + { range(1,6).map(el => ( @@ -30,7 +38,45 @@ const ImageExample: FC = () => (
+ + +
+ +
+ +
+ +
На главной
+ + +
+ +
+ +
+ +
+ + +
Видно всем
+ + +
+ +
+ +
+ +
+ + +
Редактировать
+ + +
+ +
diff --git a/src/containers/examples/ImageExample/styles.scss b/src/containers/examples/ImageExample/styles.scss index 2a51cb19..48d4cf5e 100644 --- a/src/containers/examples/ImageExample/styles.scss +++ b/src/containers/examples/ImageExample/styles.scss @@ -8,15 +8,24 @@ .image { max-height: 800px; + opacity: 1; + width: 100%; } } +.content { + align-items: stretch !important; +} + .comments { flex: 3 1; } .panel { flex: 1 3; + display: flex; + align-items: flex-start; + justify-content: flex-start; } .node { @@ -26,3 +35,39 @@ .image { background: red; } + +.buttons { + background: #161616; + flex: 1; + border-radius: $panel_radius; + box-shadow: transparentize(black, 0.3) 0 4px, inset transparentize(white, 0.98) 0 1px; + //position: relative; + //top: -64px +} + +.button { + fill: white; + height: 48px; + display: flex; + align-items: center; +} + +.button_icon { + flex: 0 0 38px; + align-items: center; + justify-content: center; + display: flex; +} + +.button_title { + font: $font_16_semibold; + text-transform: uppercase; + margin-bottom: 2px; + white-space: nowrap; + flex: 1; +} + +.button_desc { + font: $font_12_regular; + color: transparentize(white, 0.7); +} diff --git a/src/containers/flow/FlowLayout/index.tsx b/src/containers/flow/FlowLayout/index.tsx index 581f431b..6ddb5110 100644 --- a/src/containers/flow/FlowLayout/index.tsx +++ b/src/containers/flow/FlowLayout/index.tsx @@ -1,7 +1,5 @@ import * as React from 'react'; -import { MainLayout } from "~/containers/main/MainLayout"; import { TestGrid } from "~/components/flow/TestGrid"; -// const style = require('./style.scss'); export const FlowLayout = () => (
diff --git a/src/containers/main/MainLayout/index.tsx b/src/containers/main/MainLayout/index.tsx index be560aee..23ff5537 100644 --- a/src/containers/main/MainLayout/index.tsx +++ b/src/containers/main/MainLayout/index.tsx @@ -1,18 +1,16 @@ import * as React from 'react'; import { SidePane } from "~/components/main/SidePane"; import * as styles from './styles.scss'; -import { useRef } from "react"; export const MainLayout = ({ children }) => { - const container = useRef(null); return (
-
+
{children}
- +
); }; diff --git a/src/index.html b/src/index.html index c22d6be0..a2695cef 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,7 @@ - + <%= htmlWebpackPlugin.options.title %> diff --git a/src/styles/colors.scss b/src/styles/colors.scss index cb0d00c7..0fda5a3e 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -25,3 +25,4 @@ $comment_bg: #191919; $panel_bg: #191919; $node_bg: #111111; $node_image_bg: #131313; +$node_title_background: #191919; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 7f8d3a05..67122224 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,21 +1,24 @@ @import 'colors'; $cell: 256px; -$content_width: $cell * 4; +$content_width: 1100px; $gap: 10px; $spc: $gap * 2; -$radius: 3px; -$cell_radius: $radius; +$radius: 6px; +$cell_radius: 4px; $panel_radius: $radius; $grid_line: 4px; $input_height: 32px; -$input_radius: 2px; - +$input_radius: $radius; $info_height: 24px; +$panel_size: 64px; +$node_title_height: $panel_size; + +$bold: 700; $semibold: 600; $regular: 400; $medium: 500; @@ -25,13 +28,15 @@ $extra_light: 200; $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_24_semibold: $semibold 24px $font; +$font_24_bold: $bold 24px $font; +$font_24_semibold: $bold 24px $font; $font_24_regular: $regular 24px $font; $font_18_regular: $regular 18px $font; $font_18_extra_light: $extra_light 18px $font; $font_18_semibold: $semibold 18px $font; $font_16_regular: $regular 16px $font; $font_16_semibold: $semibold 16px $font; +$font_16_medium: $medium 16px $font; $font_14_regular: $regular 14px $font; $font_14_semibold: $semibold 14px $font; $font_14_medium: $medium 14px $font; @@ -41,7 +46,7 @@ $font_12_regular: $regular 12px $font; $font_10_regular: $regular 10px $font; $font_10_semibold: $semibold 10px $font; -$font_cell_title: $font_24_semibold; +$font_cell_title: $font_24_bold; $font_hero_title: $font_48_semibold; @mixin outer_shadow() {