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

#35 added containers everywhere

Browse source
This commit is contained in:
Fedor Katurov 2021-03-06 12:18:23 +07:00
parent 4f6476666f
commit 428c7e7a06
7 changed files with 200 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/node/NodeImageSwiperBlock/index.tsx Normal file
View file

@ -0,0 +1,9 @@
import React, { FC } from 'react';
interface IProps {}
const NodeImageSwiperBlock: FC<IProps> = () => (
<div>SWIPER</div>
)
export { NodeImageSwiperBlock };

43
src/containers/flow/FlowLayout/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useEffect, useCallback } from 'react'; import React, { FC, useCallback, useEffect } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { FlowGrid } from '~/components/flow/FlowGrid'; import { FlowGrid } from '~/components/flow/FlowGrid';
import { selectFlow } from '~/redux/flow/selectors'; import { selectFlow } from '~/redux/flow/selectors';
@ -10,6 +10,7 @@ import { FlowHero } from '~/components/flow/FlowHero';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
import { IState } from '~/redux/store'; import { IState } from '~/redux/store';
import { FlowStamp } from '~/components/flow/FlowStamp'; import { FlowStamp } from '~/components/flow/FlowStamp';
import { Container } from '~/containers/main/Container';
const mapStateToProps = (state: IState) => ({ const mapStateToProps = (state: IState) => ({
flow: pick(['nodes', 'heroes', 'recent', 'updated', 'is_loading', 'search'], selectFlow(state)), flow: pick(['nodes', 'heroes', 'recent', 'updated', 'is_loading', 'search'], selectFlow(state)),
@ -61,28 +62,30 @@ const FlowLayoutUnconnected: FC<IProps> = ({
}, []); }, []);
return ( return (
<div className={styles.grid}> <Container>
<div className={styles.hero}> <div className={styles.grid}>
<FlowHero heroes={heroes} /> <div className={styles.hero}>
</div> <FlowHero heroes={heroes} />
</div>
<div className={styles.stamp}> <div className={styles.stamp}>
<FlowStamp <FlowStamp
recent={recent} recent={recent}
updated={updated} updated={updated}
search={search} search={search}
flowChangeSearch={flowChangeSearch} flowChangeSearch={flowChangeSearch}
onLoadMore={onLoadMoreSearch} onLoadMore={onLoadMoreSearch}
/>
</div>
<FlowGrid
nodes={nodes}
user={user}
onSelect={nodeGotoNode}
onChangeCellView={flowSetCellView}
/> />
</div> </div>
</Container>
<FlowGrid
nodes={nodes}
user={user}
onSelect={nodeGotoNode}
onChangeCellView={flowSetCellView}
/>
</div>
); );
}; };

13
src/containers/main/Container/index.tsx Normal file
View file

@ -0,0 +1,13 @@
import React, { FC } from 'react';
import styles from './styles.module.scss';
import classNames from 'classnames';
interface IProps {
className?: string;
}
const Container: FC<IProps> = ({ className, children }) => (
<div className={classNames(styles.container, className)}>{children}</div>
);
export { Container };

7
src/containers/main/Container/styles.module.scss Normal file
View file

@ -0,0 +1,7 @@
@import "~/styles/variables.scss";
.container {
width: 100%;
max-width: $content_width;
margin: auto;
}

1
src/containers/main/MainLayout/styles.module.scss
View file

@ -19,7 +19,6 @@
flex: 1; flex: 1;
position: relative; position: relative;
width: 100%; width: 100%;
max-width: $content_width;
display: flex; display: flex;
padding-bottom: 29px; padding-bottom: 29px;
flex-direction: column; flex-direction: column;

97
src/containers/node/BorisLayout/index.tsx
View file

@ -19,6 +19,7 @@ import { selectBorisStats } from '~/redux/boris/selectors';
import { authSetUser } from '~/redux/auth/actions'; import { authSetUser } from '~/redux/auth/actions';
import { nodeLoadNode } from '~/redux/node/actions'; import { nodeLoadNode } from '~/redux/node/actions';
import { borisLoadStats } from '~/redux/boris/actions'; import { borisLoadStats } from '~/redux/boris/actions';
import { Container } from '~/containers/main/Container';
type IProps = {}; type IProps = {};
@ -55,59 +56,61 @@ const BorisLayout: FC<IProps> = () => {
}, [dispatch]); }, [dispatch]);
return ( return (
<div className={styles.wrap}> <Container>
<div className={styles.cover} /> <div className={styles.wrap}>
<div className={styles.cover} />
<div className={styles.image}> <div className={styles.image}>
<div className={styles.caption}> <div className={styles.caption}>
<div className={styles.caption_text}>{title}</div> <div className={styles.caption_text}>{title}</div>
</div>
<img src={boris} alt="Борис" />
</div> </div>
<img src={boris} alt="Борис" /> <div className={styles.container}>
</div> <Card className={styles.content}>
<Group className={styles.grid}>
{user.is_user && <NodeCommentForm isBefore nodeId={node.current.id} />}
<div className={styles.container}> {node.is_loading_comments ? (
<Card className={styles.content}> <NodeNoComments is_loading count={7} />
<Group className={styles.grid}> ) : (
{user.is_user && <NodeCommentForm isBefore nodeId={node.current.id} />} <NodeComments
comments={comments}
{node.is_loading_comments ? ( count={node.comment_count}
<NodeNoComments is_loading count={7} /> user={user}
) : ( order="ASC"
<NodeComments />
comments={comments} )}
count={node.comment_count}
user={user}
order="ASC"
/>
)}
</Group>
<Footer />
</Card>
<Group className={styles.stats}>
<Sticky>
<Group className={styles.stats__container}>
<div className={styles.stats__about}>
<h4>Господи-боженьки, где это я?</h4>
<p>
Всё впорядке, это &mdash; главный штаб Суицидальных Роботов, строителей Убежища.
</p>
<p>Здесь мы сидим и слушаем всё, что вас беспокоит.</p>
<p>Все виновные будут наказаны. Невиновные, впрочем, тоже. </p>
<p className="grey">//&nbsp;Такова&nbsp;жизнь.</p>
</div>
<div className={styles.stats__wrap}>
<BorisStats stats={stats} />
</div>
</Group> </Group>
</Sticky>
</Group> <Footer />
</Card>
<Group className={styles.stats}>
<Sticky>
<Group className={styles.stats__container}>
<div className={styles.stats__about}>
<h4>Господи-боженьки, где это я?</h4>
<p>
Всё впорядке, это &mdash; главный штаб Суицидальных Роботов, строителей Убежища.
</p>
<p>Здесь мы сидим и слушаем всё, что вас беспокоит.</p>
<p>Все виновные будут наказаны. Невиновные, впрочем, тоже. </p>
<p className="grey">//&nbsp;Такова&nbsp;жизнь.</p>
</div>
<div className={styles.stats__wrap}>
<BorisStats stats={stats} />
</div>
</Group>
</Sticky>
</Group>
</div>
</div> </div>
</div> </Container>
); );
}; };

188
src/containers/node/NodeLayout/index.tsx
View file

@ -12,14 +12,9 @@ import { NodeNoComments } from '~/components/node/NodeNoComments';
import { NodeRelated } from '~/components/node/NodeRelated'; import { NodeRelated } from '~/components/node/NodeRelated';
import { NodeComments } from '~/components/node/NodeComments'; import { NodeComments } from '~/components/node/NodeComments';
import { NodeTags } from '~/components/node/NodeTags'; import { NodeTags } from '~/components/node/NodeTags';
import { import { INodeComponentProps, NODE_COMPONENTS, NODE_HEADS, NODE_INLINES } from '~/redux/node/constants';
INodeComponentProps,
NODE_COMPONENTS,
NODE_HEADS,
NODE_INLINES,
} from '~/redux/node/constants';
import { selectUser } from '~/redux/auth/selectors'; import { selectUser } from '~/redux/auth/selectors';
import { path, pick, prop } from 'ramda'; import { pick, prop } from 'ramda';
import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder'; import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge'; import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
import { NodeCommentForm } from '~/components/node/NodeCommentForm'; import { NodeCommentForm } from '~/components/node/NodeCommentForm';
@ -36,6 +31,7 @@ import { SidebarRouter } from '~/containers/main/SidebarRouter';
import { ITag } from '~/redux/types'; import { ITag } from '~/redux/types';
import { URLS } from '~/constants/urls'; import { URLS } from '~/constants/urls';
import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
import { Container } from '~/containers/main/Container';
const mapStateToProps = (state: IState) => ({ const mapStateToProps = (state: IState) => ({
node: selectNode(state), node: selectNode(state),
@ -154,96 +150,108 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
<> <>
{!!head && createNodeBlock(head)} {!!head && createNodeBlock(head)}
<Card className={styles.node} seamless> <Container>
{!!block && createNodeBlock(block)} <Card className={styles.node} seamless>
{!!block && createNodeBlock(block)}
<NodePanel <NodePanel
node={pick( node={pick(
['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at', 'like_count'], [
node 'title',
)} 'user',
layout={layout} 'is_liked',
can_edit={can_edit} 'is_heroic',
can_like={can_like} 'deleted_at',
can_star={can_star} 'created_at',
onEdit={onEdit} 'like_count',
onLike={onLike} ],
onStar={onStar} node
onLock={onLock} )}
is_loading={is_loading} layout={layout}
/> can_edit={can_edit}
can_like={can_like}
can_star={can_star}
onEdit={onEdit}
onLike={onLike}
onStar={onStar}
onLock={onLock}
is_loading={is_loading}
/>
{node.deleted_at ? ( {node.deleted_at ? (
<NodeDeletedBadge /> <NodeDeletedBadge />
) : ( ) : (
<Group> <Group>
<Padder> <Padder>
<Group horizontal className={styles.content}> <Group horizontal className={styles.content}>
<Group className={styles.comments}> <Group className={styles.comments}>
{inline && <div className={styles.inline}>{createNodeBlock(inline)}</div>} {inline && <div className={styles.inline}>{createNodeBlock(inline)}</div>}
{is_loading || is_loading_comments || (!comments.length && !inline) ? ( {is_loading || is_loading_comments || (!comments.length && !inline) ? (
<NodeNoComments is_loading={is_loading_comments || is_loading} /> <NodeNoComments is_loading={is_loading_comments || is_loading} />
) : ( ) : (
<NodeComments <NodeComments
count={comment_count} count={comment_count}
comments={comments} comments={comments}
user={user} user={user}
order="DESC" order="DESC"
/> />
)} )}
{is_user && !is_loading && <NodeCommentForm nodeId={node.id} />} {is_user && !is_loading && <NodeCommentForm nodeId={node.id} />}
</Group> </Group>
<div className={styles.panel}> <div className={styles.panel}>
<Sticky> <Sticky>
<Group style={{ flex: 1, minWidth: 0 }}> <Group style={{ flex: 1, minWidth: 0 }}>
{!is_loading && ( {!is_loading && (
<NodeTags <NodeTags
is_editable={is_user} is_editable={is_user}
tags={node.tags} tags={node.tags}
onChange={onTagsChange} onChange={onTagsChange}
onTagClick={onTagClick} onTagClick={onTagClick}
/> />
)}
{is_loading && <NodeRelatedPlaceholder />}
{!is_loading &&
related &&
related.albums &&
!!node?.id &&
Object.keys(related.albums)
.filter(album => related.albums[album].length > 0)
.map(album => (
<NodeRelated
title={
<Link to={URLS.NODE_TAG_URL(node.id!, encodeURIComponent(album))}>
{album}
</Link>
}
items={related.albums[album]}
key={album}
/>
))}
{!is_loading &&
related &&
related.similar &&
related.similar.length > 0 && (
<NodeRelated title="ПОХОЖИЕ" items={related.similar} />
)} )}
</Group>
</Sticky>
</div>
</Group>
</Padder>
</Group>
)}
<Footer /> {is_loading && <NodeRelatedPlaceholder />}
</Card>
{!is_loading &&
related &&
related.albums &&
!!node?.id &&
Object.keys(related.albums)
.filter(album => related.albums[album].length > 0)
.map(album => (
<NodeRelated
title={
<Link
to={URLS.NODE_TAG_URL(node.id!, encodeURIComponent(album))}
>
{album}
</Link>
}
items={related.albums[album]}
key={album}
/>
))}
{!is_loading &&
related &&
related.similar &&
related.similar.length > 0 && (
<NodeRelated title="ПОХОЖИЕ" items={related.similar} />
)}
</Group>
</Sticky>
</div>
</Group>
</Padder>
</Group>
)}
<Footer />
</Card>
</Container>
<SidebarRouter prefix="/post:id" /> <SidebarRouter prefix="/post:id" />
</> </>