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

Merge remote-tracking branch 'origin/master'

Browse source
This commit is contained in:
Fedor Katurov 2021-03-24 21:10:49 +07:00
commit c2d71ae245
56 changed files with 985 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/containers/lab/LabGrid/index.tsx
View file

@ -12,7 +12,12 @@ const LabGrid: FC<IProps> = () => {
return (
<div className={styles.wrap}>
{nodes.map(node => (
<LabNode node={node} key={node.id} />
<LabNode
node={node.node}
key={node.node.id}
lastSeen={node.last_seen}
commentCount={node.comment_count}
/>
))}
</div>
);

2
src/containers/lab/LabGrid/styles.module.scss
View file

@ -4,5 +4,5 @@
display: grid;
grid-auto-flow: row;
grid-auto-rows: auto;
grid-row-gap: $gap;
grid-row-gap: $gap * 2;
}

77
src/containers/lab/LabLayout/index.tsx
View file

@ -5,7 +5,7 @@ import { Sticky } from '~/components/containers/Sticky';
import { Container } from '~/containers/main/Container';
import { LabGrid } from '~/containers/lab/LabGrid';
import { useDispatch } from 'react-redux';
import { labGetList } from '~/redux/lab/actions';
import { labGetList, labGetStats } from '~/redux/lab/actions';
import { Placeholder } from '~/components/placeholders/Placeholder';
import { Grid } from '~/components/containers/Grid';
import { Group } from '~/components/containers/Group';
@ -13,14 +13,19 @@ import { LabHero } from '~/components/lab/LabHero';
import { LabBanner } from '~/components/lab/LabBanner';
import { LabHead } from '~/components/lab/LabHead';
import { Filler } from '~/components/containers/Filler';
import { LabStats } from '~/containers/lab/LabStats';
import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
import { selectLabList, selectLabListNodes, selectLabStatsLoading } from '~/redux/lab/selectors';
interface IProps {}
const LabLayout: FC<IProps> = () => {
const { is_loading } = useShallowSelect(selectLabList);
const dispatch = useDispatch();
useEffect(() => {
dispatch(labGetList());
dispatch(labGetStats());
}, [dispatch]);
return (
@ -28,79 +33,13 @@ const LabLayout: FC<IProps> = () => {
<Container>
<div className={styles.wrap}>
<Group className={styles.content}>
<LabHead />
<LabHead isLoading={is_loading} />
<LabGrid />
</Group>
<div className={styles.panel}>
<Sticky>
<Group>
<LabBanner />
<Card>
<Group>
<Placeholder height={36} width="100%" />
<Group horizontal>
<Filler />
<Placeholder height={32} width="120px" />
</Group>
<div />
<div />
<Placeholder height={14} width="100px" />
<div />
<div className={styles.tags}>
<Placeholder height={20} width="100px" />
<Placeholder height={20} width="64px" />
<Placeholder height={20} width="100%" />
<Placeholder height={20} width="100px" />
<Placeholder height={20} width="100px" />
<Placeholder height={20} width="64px" />
</div>
<div />
<div />
<Placeholder height={14} width="180px" />
<div />
<Group className={styles.heroes}>
<LabHero />
<div />
<LabHero />
<div />
<LabHero />
<div />
<LabHero />
<div />
<LabHero />
<div />
<LabHero />
<div />
<LabHero />
</Group>
<div />
<div />
<Group>
<Placeholder width="100%" height={100} />
<Placeholder width="120px" height={16} />
</Group>
<div />
<Group>
<Placeholder width="100%" height={100} />
<Placeholder width="120px" height={16} />
</Group>
</Group>
</Card>
</Group>
<LabStats />
</Sticky>
</div>
</div>

6
src/containers/lab/LabLayout/styles.module.scss
View file

@ -4,6 +4,12 @@
display: grid;
grid-template-columns: 3fr 1fr;
column-gap: $gap;
@include tablet {
grid-template-columns: 1fr;
grid-auto-flow: row;
padding: 0 $gap / 2;
}
}
.panel {

60
src/containers/lab/LabStats/index.tsx Normal file
View file

@ -0,0 +1,60 @@
import React, { FC } from 'react';
import styles from './styles.module.scss';
import { LabBanner } from '~/components/lab/LabBanner';
import { Card } from '~/components/containers/Card';
import { Group } from '~/components/containers/Group';
import { Placeholder } from '~/components/placeholders/Placeholder';
import { Filler } from '~/components/containers/Filler';
import { LabHero } from '~/components/lab/LabHero';
import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
import {
selectLabStatsHeroes,
selectLabStatsLoading,
selectLabStatsTags,
} from '~/redux/lab/selectors';
import { LabTags } from '~/components/lab/LabTags';
import { LabHeroes } from '~/components/lab/LabHeroes';
interface IProps {}
const LabStats: FC<IProps> = () => {
const tags = useShallowSelect(selectLabStatsTags);
const heroes = useShallowSelect(selectLabStatsHeroes);
const isLoading = useShallowSelect(selectLabStatsLoading);
return (
<Group>
<LabBanner />
<div className={styles.card}>
<Group>
{isLoading ? (
<Placeholder height={14} width="100px" />
) : (
tags.length && <div className={styles.title}>Тэги</div>
)}
<div className={styles.tags}>
<LabTags tags={tags} isLoading={isLoading} />
</div>
<div />
<div />
<div />
{isLoading ? (
<Placeholder height={14} width="100px" />
) : (
heroes.length > 0 && <div className={styles.title}>Важные</div>
)}
<div className={styles.heroes}>
<LabHeroes nodes={heroes} isLoading={isLoading} />
</div>
</Group>
</div>
</Group>
);
};
export { LabStats };

25
src/containers/lab/LabStats/styles.module.scss Normal file
View file

@ -0,0 +1,25 @@
@import "~/styles/variables.scss";
.title {
font: $font_14_semibold;
color: darken(white, 50%);
text-transform: uppercase;
padding: 0 $gap / 2;
padding-bottom: $gap / 2;
}
.tags.tags {
margin: 0 -$gap / 2;
}
.heroes {
margin-top: -$gap;
}
.card {
@include lab_shadow;
border-radius: $radius;
background-color: $comment_bg;
padding: $gap;
}