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:
parent
7350201e22
commit
f922536ffa
3 changed files with 32 additions and 1 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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
4
src/constants/texts.ts
Normal 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',
|
||||||
|
};
|
Loading…
Add table
Add a link
Reference in a new issue