From fb8ad315c06f7de7344e7fd253959953e0decc64 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 4 Oct 2021 14:34:15 +0700 Subject: [PATCH] changed profile stats appearance --- .../boris/BorisStatsBackend/index.tsx | 105 +-- .../BorisStatsBackend/styles.module.scss | 28 +- src/components/common/StatsRow/index.tsx | 21 + .../common/StatsRow/styles.module.scss | 23 + src/components/common/SubTitle/index.tsx | 19 + .../common/SubTitle/styles.module.scss | 7 + .../profile/ProfilePageStats/index.tsx | 30 +- .../ProfilePageStats/styles.module.scss | 22 +- src/layouts/ProfileLayout/index.tsx | 11 +- src/layouts/ProfileLayout/styles.module.scss | 9 +- src/sprites/boris_lab.svg | 883 ++++++++++++++++++ 11 files changed, 1033 insertions(+), 125 deletions(-) create mode 100644 src/components/common/StatsRow/index.tsx create mode 100644 src/components/common/StatsRow/styles.module.scss create mode 100644 src/components/common/SubTitle/index.tsx create mode 100644 src/components/common/SubTitle/styles.module.scss create mode 100644 src/sprites/boris_lab.svg diff --git a/src/components/boris/BorisStatsBackend/index.tsx b/src/components/boris/BorisStatsBackend/index.tsx index e3a034e3..2fbb779c 100644 --- a/src/components/boris/BorisStatsBackend/index.tsx +++ b/src/components/boris/BorisStatsBackend/index.tsx @@ -1,102 +1,73 @@ import React, { FC } from 'react'; import { IBorisState } from '~/redux/boris/reducer'; import styles from './styles.module.scss'; -import { Placeholder } from '~/components/placeholders/Placeholder'; import { sizeOf } from '~/utils/dom'; +import { StatsRow } from '~/components/common/StatsRow'; +import { SubTitle } from '~/components/common/SubTitle'; interface IProps { stats: IBorisState['stats']; } -const Row: FC<{ isLoading: boolean }> = ({ isLoading, children }) => ( -
  • - {isLoading ? ( - <> - - - - ) : ( - children - )} -
    • -); - const BorisStatsBackend: FC = ({ stats: { is_loading, backend } }) => { - // const is_loading = true; - if (!backend && !is_loading) { return null; } return (
    -
    - - Юнитс - -
    + + Юнитс +
      - - В сознании - {backend.users.alive} - + + {backend.users.alive} + - - Криокамера - {backend.users.total - backend.users.alive} - + + {backend.users.total - backend.users.alive} +
    -
    - - Контент - -
    + + Контент +
      - - Фотографии - {backend.nodes.images} - + + {backend.nodes.images} + - - Письма - {backend.nodes.texts} - + + {backend.nodes.texts} + - - Видеозаписи - {backend.nodes.videos} - + + {backend.nodes.videos} + - - Аудиозаписи - {backend.nodes.audios} - + + {backend.nodes.audios} + - - Комментарии - {backend.comments.total} - + + {backend.comments.total} +
    -
    - - Сторедж - -
    + + Сторедж +
      - - Файлы - {backend.files.count} - + + {backend.files.count} + - - На диске - {sizeOf(backend.files.size)} - + + {sizeOf(backend.files.size)} +
    ); diff --git a/src/components/boris/BorisStatsBackend/styles.module.scss b/src/components/boris/BorisStatsBackend/styles.module.scss index 16fe4a3c..638e4277 100644 --- a/src/components/boris/BorisStatsBackend/styles.module.scss +++ b/src/components/boris/BorisStatsBackend/styles.module.scss @@ -1,34 +1,10 @@ @import "src/styles/variables"; -.value { - float: right; - color: white; - font: $font_12_semibold; - line-height: 24px; +.title { + margin: $gap * 2 0 $gap; } .wrap { - ul { - font: $font_12_regular; - line-height: 24px; - text-transform: uppercase; - - li { - border-bottom: 1px solid #333333; - color: #aaaaaa; - - &:last-child { - border-bottom: none; - } - } - } -} - -.title { - font: $font_12_semibold; - text-transform: uppercase; - opacity: 0.3; - margin: $gap * 2 0 $gap; } .subtitle { diff --git a/src/components/common/StatsRow/index.tsx b/src/components/common/StatsRow/index.tsx new file mode 100644 index 00000000..d8931c85 --- /dev/null +++ b/src/components/common/StatsRow/index.tsx @@ -0,0 +1,21 @@ +import React, { FC } from 'react'; +import { Placeholder } from '~/components/placeholders/Placeholder'; +import styles from './styles.module.scss'; + +const StatsRow: FC<{ isLoading: boolean; label: string }> = ({ isLoading, label, children }) => ( +
  • + {isLoading ? ( + <> + + + + ) : ( + <> +
    {label}
    +
    {children}
    + + )} +
    • +); + +export { StatsRow }; diff --git a/src/components/common/StatsRow/styles.module.scss b/src/components/common/StatsRow/styles.module.scss new file mode 100644 index 00000000..fd970b35 --- /dev/null +++ b/src/components/common/StatsRow/styles.module.scss @@ -0,0 +1,23 @@ +@import '~/styles/variables.scss'; + +.row { + @include row_shadow; + color: #aaaaaa; + display: flex; + flex-direction: row; + font: $font_12_regular; + line-height: 24px; + text-transform: uppercase; +} + +.label { + flex: 1; + margin-right: $gap; +} + +.value { + float: right; + color: white; + font: $font_12_semibold; + line-height: 24px; +} diff --git a/src/components/common/SubTitle/index.tsx b/src/components/common/SubTitle/index.tsx new file mode 100644 index 00000000..49da1ddf --- /dev/null +++ b/src/components/common/SubTitle/index.tsx @@ -0,0 +1,19 @@ +import React, { FC } from 'react'; +import { Placeholder } from '~/components/placeholders/Placeholder'; +import { DivProps } from '~/utils/types'; +import classNames from 'classnames'; +import styles from './styles.module.scss'; + +interface Props extends DivProps { + isLoading?: boolean; +} + +const SubTitle: FC = ({ isLoading, children, ...rest }) => ( +
    + + {children} + +
    +); + +export { SubTitle }; diff --git a/src/components/common/SubTitle/styles.module.scss b/src/components/common/SubTitle/styles.module.scss new file mode 100644 index 00000000..b53a4451 --- /dev/null +++ b/src/components/common/SubTitle/styles.module.scss @@ -0,0 +1,7 @@ +@import "~/styles/variables.scss"; + +.title { + font: $font_12_semibold; + text-transform: uppercase; + opacity: 0.3; +} diff --git a/src/containers/profile/ProfilePageStats/index.tsx b/src/containers/profile/ProfilePageStats/index.tsx index 432a3689..bd2aba85 100644 --- a/src/containers/profile/ProfilePageStats/index.tsx +++ b/src/containers/profile/ProfilePageStats/index.tsx @@ -1,27 +1,35 @@ import React, { FC } from 'react'; import styles from './styles.module.scss'; -import { Icon } from '~/components/input/Icon'; +import { StatsRow } from '~/components/common/StatsRow'; +import { SubTitle } from '~/components/common/SubTitle'; interface Props {} const Row: FC<{ count: number; title: string; icon?: string }> = ({ count, title, icon }) => (
    - {icon && ( -
    - -
    - )} -
    {count > 999 ? '999+' : count}
    {title}
    +
    {count > 999 ? '999+' : count}
    ); const ProfilePageStats: FC = () => (
    - - - - + Ачивментс + +
      + + 9 + + + 99 + + + 999+ + + + 99 + +
    ); diff --git a/src/containers/profile/ProfilePageStats/styles.module.scss b/src/containers/profile/ProfilePageStats/styles.module.scss index 8cd17f7b..51d24c8e 100644 --- a/src/containers/profile/ProfilePageStats/styles.module.scss +++ b/src/containers/profile/ProfilePageStats/styles.module.scss @@ -7,10 +7,9 @@ background: $content_bg; border-radius: $radius; display: grid; - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); - grid-row-gap: $gap; grid-column-gap: $gap; grid-auto-flow: row; + grid-row-gap: $gap; & > .row:not(:last-child) { margin-bottom: $gap; @@ -19,12 +18,12 @@ .row { width: 100%; - background-color: lighten($content_bg, 4%); border-radius: $radius; - padding: $gap; box-sizing: border-box; height: 100%; position: relative; + display: flex; + flex-direction: row; } .counter { @@ -32,22 +31,13 @@ align-items: center; justify-content: center; text-align: center; - font: $font_32_bold; - height: 60px; + font: $font_16_semibold; } .title { font: $font_12_semibold; - text-align: center; + text-align: left; word-wrap: break-word; opacity: 0.5; -} - -.icon { - position: absolute; - opacity: 0.5; - top: 5px; - left: 5px; - fill: transparentize(black, 0.5); - stroke: none; + flex: 1; } diff --git a/src/layouts/ProfileLayout/index.tsx b/src/layouts/ProfileLayout/index.tsx index 27f1df73..4412a23b 100644 --- a/src/layouts/ProfileLayout/index.tsx +++ b/src/layouts/ProfileLayout/index.tsx @@ -1,6 +1,6 @@ import React, { FC, useEffect } from 'react'; import styles from './styles.module.scss'; -import { Route, RouteComponentProps, Switch } from 'react-router'; +import { RouteComponentProps } from 'react-router'; import { useDispatch } from 'react-redux'; import { authLoadProfile } from '~/redux/auth/actions'; import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; @@ -8,10 +8,10 @@ import { selectAuthProfile, selectUser } from '~/redux/auth/selectors'; import { ProfilePageLeft } from '~/containers/profile/ProfilePageLeft'; import { Container } from '~/containers/main/Container'; import { FlowGrid } from '~/components/flow/FlowGrid'; -import { FlowLayout } from '~/layouts/FlowLayout'; import { Sticky } from '~/components/containers/Sticky'; import { selectFlow } from '~/redux/flow/selectors'; import { ProfilePageStats } from '~/containers/profile/ProfilePageStats'; +import { Card } from '~/components/containers/Card'; type Props = RouteComponentProps<{ username: string }> & {}; @@ -38,6 +38,13 @@ const ProfileLayout: FC = ({
    + + {!!profile.user?.description && ( +
    + {profile.user.description} +
    + )} +
    diff --git a/src/layouts/ProfileLayout/styles.module.scss b/src/layouts/ProfileLayout/styles.module.scss index 5f1f1c20..9182e8df 100644 --- a/src/layouts/ProfileLayout/styles.module.scss +++ b/src/layouts/ProfileLayout/styles.module.scss @@ -12,9 +12,12 @@ .left { } -.right { -} - .row { margin-bottom: $gap; } + +.description { + font: $font_14_semibold; + text-align: center; + padding: $gap * 2 $gap; +} diff --git a/src/sprites/boris_lab.svg b/src/sprites/boris_lab.svg new file mode 100644 index 00000000..446867d8 --- /dev/null +++ b/src/sprites/boris_lab.svg @@ -0,0 +1,883 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +