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 * as styles from './styles.scss';
|
||||
import { TEXTS } from '~/constants/texts';
|
||||
|
||||
import classNames = require('classnames');
|
||||
|
||||
|
@ -9,6 +10,7 @@ interface IProps {
|
|||
title?: string;
|
||||
is_hero?: boolean;
|
||||
is_stamp?: boolean;
|
||||
is_text?: boolean;
|
||||
}
|
||||
|
||||
const Cell: FC<IProps> = ({
|
||||
|
@ -16,14 +18,22 @@ const Cell: FC<IProps> = ({
|
|||
height = 1,
|
||||
title,
|
||||
is_hero,
|
||||
is_text = (Math.random() > 0.8),
|
||||
}) => (
|
||||
<div
|
||||
className={classNames(styles.cell, `vert-${height}`, `hor-${width}`)}
|
||||
className={
|
||||
classNames(
|
||||
styles.cell,
|
||||
`vert-${height}`,
|
||||
`hor-${width}`,
|
||||
{ is_text },
|
||||
)}
|
||||
style={{
|
||||
// gridRowEnd: `span ${height}`,
|
||||
// gridColumnEnd: `span ${width}`,
|
||||
}}
|
||||
>
|
||||
{is_text && <div className={styles.text}>{TEXTS.LOREM_IPSUM}</div>}
|
||||
{ title && <div className={styles.title}>{title}</div> }
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
background: $cell_bg;
|
||||
border-radius: $cell_radius;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:global(.is_hero) {
|
||||
.title {
|
||||
|
@ -16,6 +17,16 @@
|
|||
@include outer_shadow();
|
||||
}
|
||||
|
||||
.text {
|
||||
line-height: 1.6em;
|
||||
font-size: 18px;
|
||||
font: $font_18_regular;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: $gap;
|
||||
}
|
||||
|
||||
.title {
|
||||
font: $font_cell_title;
|
||||
|
||||
|
@ -49,4 +60,10 @@
|
|||
.hor-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