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

fixed boris layout

Browse source
This commit is contained in:
Fedor Katurov 2019-11-08 18:43:01 +07:00
parent a0d4025890
commit 4af7e00728
6 changed files with 2045 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,9 +7,8 @@ import { connect } from 'react-redux';
import { NodeComments } from '~/components/node/NodeComments';
import styles from './styles.scss';
import { CommentForm } from '~/components/node/CommentForm';
import { Filler } from '~/components/containers/Filler';
import { Group } from '~/components/containers/Group';
import { GodRays } from '~/components/main/GodRays';
import boris from '~/sprites/boris_robot.svg';
const mapStateToProps = state => ({
node: selectNode(state),
@ -44,33 +43,44 @@ const BorisLayoutUnconnected: FC<IProps> = ({
return (
<div className={styles.wrap}>
<div className={styles.cover} />
<div className={styles.column}>
<div className={styles.daygrid}>
<div className={styles.label}>Убежищу сегодня:</div>
<div className={styles.day}>10</div>
<div>лет</div>
<div className={styles.day}>2</div>
<div>месяца</div>
<div className={styles.line} />
<div className={styles.label}>Мы собрали:</div>
<div className={styles.day}>2374</div>
<div>поста</div>
<div className={styles.day}>14765</div>
<div>комментариев</div>
<div className={styles.day}>4260</div>
<div>файла</div>
<div className={styles.day}>54</div>
<div>жителя</div>
<div className={styles.image}>
<div className={styles.caption}>
<div>СНОВА</div>
<div>ВМЕСТЕ</div>
</div>
<img src={boris} />
</div>
<Group className={styles.container}>
{is_user && <CommentForm id={0} />}
<div className={styles.container}>
<div className={styles.column}>
<div className={styles.daygrid}>
<div className={styles.label}>Убежищу сегодня:</div>
<div className={styles.day}>10</div>
<div>лет</div>
<div className={styles.day}>2</div>
<div>месяца</div>
<NodeComments comments={comments} />
</Group>
<div className={styles.line} />
<div className={styles.label}>Мы собрали:</div>
<div className={styles.day}>2374</div>
<div>поста</div>
<div className={styles.day}>14765</div>
<div>комментариев</div>
<div className={styles.day}>4260</div>
<div>файла</div>
<div className={styles.day}>54</div>
<div>жителя</div>
</div>
</div>
<Group className={styles.content}>
{is_user && <CommentForm id={0} />}
<NodeComments comments={comments} />
</Group>
</div>
</div>
);
};

58
src/containers/node/BorisLayout/styles.scss
View file

@ -2,11 +2,10 @@
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: row;
flex-direction: column;
}
.container {
margin-top: 33vh;
.content {
flex: 3;
z-index: 2;
padding: $gap;
@ -19,20 +18,19 @@
background: $content_bg;
position: relative;
z-index: 2;
margin-top: 33vh;
margin-right: $gap;
border-radius: $radius;
padding: $gap * 2;
}
.content {
padding: $gap;
text-align: center;
font: $font_24_bold;
text-transform: uppercase;
position: relative;
display: none;
}
// .content {
// padding: $gap;
// text-align: center;
// font: $font_24_bold;
// text-transform: uppercase;
// position: relative;
// display: none;
// }
.cover {
position: fixed;
@ -43,7 +41,8 @@
height: 100vh;
overflow: hidden;
// background: linear-gradient($red, transparentize($red, 1));
background: 50% 0% no-repeat/cover url('~/sprites/illustrate.svg');
background: 50% 0% no-repeat/cover url('~/sprites/boris_bg.svg');
// display: none;
}
.header {
@ -75,3 +74,36 @@
grid-column: 1/3;
height: $gap * 4;
}
.container {
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: row;
}
.image {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-end;
img {
width: 90%;
}
}
.caption {
position: absolute;
left: 0;
bottom: 0;
width: 50%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-end;
font: $font_48_bold;
flex-direction: column;
padding-bottom: $gap * 2;
}