muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

changed profile stats appearance

Browse source
This commit is contained in:
Fedor Katurov 2021-10-04 14:34:15 +07:00
parent 33c17616e9
commit fb8ad315c0
11 changed files with 1033 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/containers/profile/ProfilePageStats/index.tsx
View file

@ -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 }) => (
<div className={styles.row}>
{icon && (
<div className={styles.icon}>
<Icon icon={icon} size={24} />
</div>
)}
<div className={styles.counter}>{count > 999 ? '999+' : count}</div>
<div className={styles.title}>{title}</div>
<div className={styles.counter}>{count > 999 ? '999+' : count}</div>
</div>
);
const ProfilePageStats: FC<Props> = () => (
<div className={styles.wrap}>
<Row count={9} title="лет в бункере" />
<Row count={99} title="постов" />
<Row count={99999} title="комментариев" icon="comment" />
<Row count={99} title="лайков" icon="heart_full" />
<SubTitle>Ачивментс</SubTitle>
<ul>
<StatsRow isLoading={false} label="лет в бункере">
9
</StatsRow>
<StatsRow isLoading={false} label="постов">
99
</StatsRow>
<StatsRow isLoading={false} label="комментариев">
999+
</StatsRow>
<StatsRow isLoading={false} label="лайков">
99
</StatsRow>
</ul>
</div>
);

22
src/containers/profile/ProfilePageStats/styles.module.scss
View file

@ -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;
}