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

fixed flow face appearance

Browse source
This commit is contained in:
Fedor Katurov 2019-10-31 13:40:50 +07:00
parent 225e5b6cda
commit 48cce8f127
3 changed files with 27 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/flow/Cell/index.tsx
View file

@ -1,6 +1,6 @@
import React, { FC, useState, useCallback, useEffect } from 'react'; import React, { FC, useState, useCallback, useEffect } from 'react';
import { INode } from '~/redux/types'; import { INode } from '~/redux/types';
import { getURL } from '~/utils/dom'; import { getURL, formatCellText } from '~/utils/dom';
import classNames from 'classnames'; import classNames from 'classnames';
import * as styles from './styles.scss'; import * as styles from './styles.scss';
@ -84,7 +84,12 @@ const Cell: FC<IProps> = ({
<div className={classNames(styles.face, { [styles.has_text]: text })}> <div className={classNames(styles.face, { [styles.has_text]: text })}>
<div className={styles.face_content}> <div className={styles.face_content}>
{title && <div className={styles.title}>{title}</div>} {title && <div className={styles.title}>{title}</div>}
{text && <div className={styles.text}>{text}</div>} {text && (
<div
className={styles.text}
dangerouslySetInnerHTML={{ __html: formatCellText(text) }}
/>
)}
</div> </div>
</div> </div>

20
src/components/flow/Cell/styles.scss
View file

@ -28,7 +28,11 @@
font: $font_18_regular; font: $font_18_regular;
line-height: 22px; line-height: 22px;
margin-top: $gap; margin-top: $gap;
letter-spacing: 0.5px; // letter-spacing: 0.5px;
p {
margin-bottom: $gap;
}
&::after { &::after {
content: ' '; content: ' ';
@ -153,9 +157,21 @@
.face_content { .face_content {
padding: $gap; padding: $gap;
background: rgba(25, 25, 25, 0.8); background: rgba(25, 25, 25, 0.9);
border-radius: $radius; border-radius: $radius;
overflow: hidden; overflow: hidden;
position: relative;
&:after {
content: '';
background: linear-gradient(transparentize($content_bg, 1), $content_bg);
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
border-radius: 0 0 $cell_radius $cell_radius;
}
} }
.text::after { .text::after {

2
src/utils/dom.ts
View file

@ -95,6 +95,8 @@ export const formatCommentText = (author: string, text: string): string =>
) )
: ''; : '';
export const formatCellText = (text: string): string => formatText(text);
export const getPrettyDate = (date: string): string => export const getPrettyDate = (date: string): string =>
formatDistanceToNow(new Date(date), { locale: ru, includeSeconds: true, addSuffix: true }); formatDistanceToNow(new Date(date), { locale: ru, includeSeconds: true, addSuffix: true });