1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00

added text nodes

This commit is contained in:
muerwre 2019-08-19 17:27:45 +07:00
parent 7350201e22
commit f922536ffa
3 changed files with 32 additions and 1 deletions

View file

@ -1,5 +1,6 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import * as styles from './styles.scss'; import * as styles from './styles.scss';
import { TEXTS } from '~/constants/texts';
import classNames = require('classnames'); import classNames = require('classnames');
@ -9,6 +10,7 @@ interface IProps {
title?: string; title?: string;
is_hero?: boolean; is_hero?: boolean;
is_stamp?: boolean; is_stamp?: boolean;
is_text?: boolean;
} }
const Cell: FC<IProps> = ({ const Cell: FC<IProps> = ({
@ -16,14 +18,22 @@ const Cell: FC<IProps> = ({
height = 1, height = 1,
title, title,
is_hero, is_hero,
is_text = (Math.random() > 0.8),
}) => ( }) => (
<div <div
className={classNames(styles.cell, `vert-${height}`, `hor-${width}`)} className={
classNames(
styles.cell,
`vert-${height}`,
`hor-${width}`,
{ is_text },
)}
style={{ style={{
// gridRowEnd: `span ${height}`, // gridRowEnd: `span ${height}`,
// gridColumnEnd: `span ${width}`, // gridColumnEnd: `span ${width}`,
}} }}
> >
{is_text && <div className={styles.text}>{TEXTS.LOREM_IPSUM}</div>}
{ title && <div className={styles.title}>{title}</div> } { title && <div className={styles.title}>{title}</div> }
</div> </div>
); );

View file

@ -6,6 +6,7 @@
background: $cell_bg; background: $cell_bg;
border-radius: $cell_radius; border-radius: $cell_radius;
position: relative; position: relative;
overflow: hidden;
&:global(.is_hero) { &:global(.is_hero) {
.title { .title {
@ -16,6 +17,16 @@
@include outer_shadow(); @include outer_shadow();
} }
.text {
line-height: 1.6em;
font-size: 18px;
font: $font_18_regular;
position: absolute;
top: 0;
left: 0;
padding: $gap;
}
.title { .title {
font: $font_cell_title; font: $font_cell_title;
@ -49,4 +60,10 @@
.hor-2 { .hor-2 {
grid-column-end: span 2; grid-column-end: span 2;
} }
.is_text {
background: none;
padding: 10px;
box-shadow: inset #444 0 0 0 1px;
}
} }

4
src/constants/texts.ts Normal file
View file

@ -0,0 +1,4 @@
export const TEXTS = {
LOREM_IPSUM:
'Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32',
};