From 2a6604afaf2d0702e782f1c49f81d2d5cc3ba4c9 Mon Sep 17 00:00:00 2001 From: muerwre Date: Fri, 26 Jul 2019 18:26:35 +0700 Subject: [PATCH] comments mock --- src/components/containers/Card/index.tsx | 16 ++++++ src/components/containers/Card/styles.scss | 6 +++ src/components/containers/Grid/index.tsx | 53 +++++++++++++++++++ src/components/containers/Grid/styles.scss | 18 +++++++ src/components/containers/Group/index.tsx | 39 ++++++++++++++ src/components/containers/Group/styles.scss | 42 +++++++++++++++ src/components/containers/Padder/index.tsx | 29 ++++++++++ src/components/containers/Padder/styles.scss | 13 +++++ src/components/flow/Cell/index.tsx | 1 - src/components/flow/Cell/styles.scss | 6 +-- src/components/flow/TestGrid/styles.scss | 1 - src/components/main/SidePane/index.tsx | 6 ++- src/components/main/SidePane/styles.scss | 11 ++-- src/components/node/Comment/index.tsx | 19 +++++++ src/components/node/Comment/styles.scss | 22 ++++++++ .../examples/ImageExample/index.tsx | 30 ++++++++++- .../examples/ImageExample/styles.scss | 13 +++++ src/styles/variables.scss | 27 ++++++++++ 18 files changed, 340 insertions(+), 12 deletions(-) create mode 100644 src/components/containers/Card/index.tsx create mode 100644 src/components/containers/Card/styles.scss create mode 100644 src/components/containers/Grid/index.tsx create mode 100644 src/components/containers/Grid/styles.scss create mode 100644 src/components/containers/Group/index.tsx create mode 100644 src/components/containers/Group/styles.scss create mode 100644 src/components/containers/Padder/index.tsx create mode 100644 src/components/containers/Padder/styles.scss create mode 100644 src/components/node/Comment/index.tsx create mode 100644 src/components/node/Comment/styles.scss create mode 100644 src/containers/examples/ImageExample/styles.scss diff --git a/src/components/containers/Card/index.tsx b/src/components/containers/Card/index.tsx new file mode 100644 index 00000000..41b55257 --- /dev/null +++ b/src/components/containers/Card/index.tsx @@ -0,0 +1,16 @@ +import React, { FC } from 'react'; +import classNames = require("classnames"); +import * as styles from './styles.scss'; + +type IProps = React.HTMLAttributes & {} + +const Card: FC = ({ + className, + children, +}) => ( +
+ {children} +
+); + +export { Card }; diff --git a/src/components/containers/Card/styles.scss b/src/components/containers/Card/styles.scss new file mode 100644 index 00000000..eecdee35 --- /dev/null +++ b/src/components/containers/Card/styles.scss @@ -0,0 +1,6 @@ +.card { + background-color: #111111; + border-radius: $panel_radius; + + @include outer_shadow(); +} diff --git a/src/components/containers/Grid/index.tsx b/src/components/containers/Grid/index.tsx new file mode 100644 index 00000000..5c4089d4 --- /dev/null +++ b/src/components/containers/Grid/index.tsx @@ -0,0 +1,53 @@ +import React, { FC } from 'react'; +import classNames from 'classnames'; +import * as styles from './styles.scss'; + +type IProps = React.HTMLAttributes & { + horizontal?: boolean; + vertical?: boolean; + columns?: string; + rows?: string; + size?: string; + square?: boolean; + gap?: number; +}; + +const Grid: FC = ({ + children, + className = '', + horizontal = false, + vertical = false, + square = false, + size = 'auto', + style = {}, + columns = 'auto', + rows = 'auto', + gap = 20, + ...props +}) => ( +
+ {children} +
+); + +export { Grid }; diff --git a/src/components/containers/Grid/styles.scss b/src/components/containers/Grid/styles.scss new file mode 100644 index 00000000..45fd131e --- /dev/null +++ b/src/components/containers/Grid/styles.scss @@ -0,0 +1,18 @@ +.grid { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + grid-row-gap: $gap; + grid-column-gap: $gap; + grid-auto-flow: row; + grid-auto-rows: auto; + grid-auto-columns: auto; + + &.horizontal { + grid-auto-flow: column; + } + + &.square { + grid-auto-flow: dense; + } +} diff --git a/src/components/containers/Group/index.tsx b/src/components/containers/Group/index.tsx new file mode 100644 index 00000000..2385ce77 --- /dev/null +++ b/src/components/containers/Group/index.tsx @@ -0,0 +1,39 @@ +import React, { FC } from 'react'; +import classNames from 'classnames'; +import * as styles from './styles.scss'; + +type IProps = React.HTMLAttributes & { + horizontal?: boolean; + top?: boolean; + bottom?: boolean; + wrap?: boolean; +}; + +const Group: FC = ({ + children, + className = '', + horizontal = false, + top = false, + bottom = false, + wrap = false, + ...props +}) => ( +
+ {children} +
+); + +export { Group }; diff --git a/src/components/containers/Group/styles.scss b/src/components/containers/Group/styles.scss new file mode 100644 index 00000000..2eb26a50 --- /dev/null +++ b/src/components/containers/Group/styles.scss @@ -0,0 +1,42 @@ +.group { + display: flex; + + > :global(.group_filler) { + flex: 1; + } + + &.vertical { + flex-direction: column; + + & > * { + margin: $gap/2 0; + + &:first-child { margin-top: 0; } + &:last-child { margin-bottom: 0; } + } + } + + &.horizontal { + flex-direction: row; + align-items: center; + + &.top { + align-items: flex-start; + } + + &.bottom { + align-items: flex-end; + } + + & > * { + margin: 0 $gap; + + &:first-child { margin-left: 0; } + &:last-child { margin-right: 0; } + } + } + + &.wrap { + flex-wrap: wrap; + } +} diff --git a/src/components/containers/Padder/index.tsx b/src/components/containers/Padder/index.tsx new file mode 100644 index 00000000..25a74e9e --- /dev/null +++ b/src/components/containers/Padder/index.tsx @@ -0,0 +1,29 @@ +import React, { FC } from 'react'; +import * as styles from './styles.scss'; +import classNames = require("classnames"); + +type IProps = React.HTMLAttributes & { + padding?: number; + vertical?: boolean; + horizontal?: boolean; +} + +const Padder: FC = ({ + padding, + children, + className, + style = {}, + vertical, + horizontal, + ...props +}) => ( +
+ {children} +
+); + +export { Padder }; diff --git a/src/components/containers/Padder/styles.scss b/src/components/containers/Padder/styles.scss new file mode 100644 index 00000000..91ed76e3 --- /dev/null +++ b/src/components/containers/Padder/styles.scss @@ -0,0 +1,13 @@ +.padder { + padding: $gap; + + &:global(.horizontal) { + padding-top: 0; + padding-bottom: 0; + } + + &:global(.vertical) { + padding-left: 0; + padding-right: 0; + } +} diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx index 67af7343..182e94b9 100644 --- a/src/components/flow/Cell/index.tsx +++ b/src/components/flow/Cell/index.tsx @@ -15,7 +15,6 @@ const Cell: FC = ({ height = 1, title, is_hero, - is_stamp, }) => (
= ({ return (
-
+
+
V
+
diff --git a/src/components/main/SidePane/styles.scss b/src/components/main/SidePane/styles.scss index 703be087..75995843 100644 --- a/src/components/main/SidePane/styles.scss +++ b/src/components/main/SidePane/styles.scss @@ -16,18 +16,20 @@ margin: ($gap / 2) 0; background: #191919; box-sizing: border-box; - box-shadow: #222222 0 0 0 1px; &:global(.logo) { - color: white; height: (54px * 1.5) + $gap / 2; background: white; background-size: 140px; font-weight: 600; font-size: 14px; text-align: center; - padding-top: 66px; box-shadow: inset #111111 0 -1px, inset #222222 0 1px; + color: black; + display: flex; + align-items: center; + justify-content: center; + font: $font_24_semibold; } .btn { @@ -47,8 +49,9 @@ .btn { height: 54px; - box-shadow: inset #111111 0 -1px, inset #222222 0 1px; + box-shadow: inset transparentize(black, 0.9) 0 -1px, inset transparentize(white, 0.95) 0 1px; border-radius: $panel_radius; + background: #191919; } .flexy { diff --git a/src/components/node/Comment/index.tsx b/src/components/node/Comment/index.tsx new file mode 100644 index 00000000..af130b9a --- /dev/null +++ b/src/components/node/Comment/index.tsx @@ -0,0 +1,19 @@ +import React, { FC } from 'react'; +import { Card } from "~/components/containers/Card"; +import * as styles from './styles.scss'; + +interface IProps {} + +const Comment: FC = () => ( + +
+
+
+ +
+ Lorem Ipsum +
+ +); + +export { Comment }; diff --git a/src/components/node/Comment/styles.scss b/src/components/node/Comment/styles.scss new file mode 100644 index 00000000..8448bb5a --- /dev/null +++ b/src/components/node/Comment/styles.scss @@ -0,0 +1,22 @@ +.wrap { + background: #191919; + min-height: 200px; + display: flex; +} + +.text { + padding: $gap; + flex: 1; +} + +.thumb { + flex: 0 0 64px; + background: transparentize(black, 0.9); + border-radius: $panel_radius 0 0 $panel_radius; +} + +.thumb_image { + height: 64px; + background: transparentize(white, 0.97); + border-radius: $panel_radius 0 0 $panel_radius; +} diff --git a/src/containers/examples/ImageExample/index.tsx b/src/containers/examples/ImageExample/index.tsx index 97564dc4..ff8ea2a7 100644 --- a/src/containers/examples/ImageExample/index.tsx +++ b/src/containers/examples/ImageExample/index.tsx @@ -1,9 +1,37 @@ import React, { FC } from 'react'; +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 range from 'ramda/es/range'; +import { Comment } from "~/components/node/Comment"; interface IProps {} const ImageExample: FC = () => ( -
image example
+ + +
+ + + + + { + range(1,6).map(el => ( + + )) + } + + +
+ +
+ + + + ); export { ImageExample }; diff --git a/src/containers/examples/ImageExample/styles.scss b/src/containers/examples/ImageExample/styles.scss new file mode 100644 index 00000000..f8ca3404 --- /dev/null +++ b/src/containers/examples/ImageExample/styles.scss @@ -0,0 +1,13 @@ +.image_container { + width: 100%; + height: 600px; + background: #131313; +} + +.comments { + flex: 3 1; +} + +.panel { + flex: 1 3; +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 077c0d9a..42535f9f 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -14,8 +14,35 @@ $input_height: 32px; $input_radius: 2px; $info_height: 24px; + +$semibold: 600; +$regular: 400; +$medium: 500; +$light: 300; +$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_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_14_regular: $regular 14px $font; +$font_14_semibold: $semibold 14px $font; +$font_14_medium: $medium 14px $font; +$font_12_medium: $medium 12px $font; +$font_12_semibold: $semibold 12px $font; +$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_hero_title: $font_48_semibold; + @mixin outer_shadow() { box-shadow: inset transparentize(white, 0.95) 0 1px, inset transparentize(black, 0.5) 0 -1px;