diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx index e85c2576..c88bf53b 100644 --- a/src/components/flow/Cell/index.tsx +++ b/src/components/flow/Cell/index.tsx @@ -1,23 +1,18 @@ import React, { FC, useState, useCallback } from 'react'; import { INode } from '~/redux/types'; -import { URLS } from '~/constants/urls'; -import { getImageSize, getURL } from '~/utils/dom'; -import classNames = require('classnames'); +import { getURL } from '~/utils/dom'; +import classNames from 'classnames'; import * as styles from './styles.scss'; +import path from 'ramda/es/path'; interface IProps { node: INode; - // height?: number; - // width?: number; - // title?: string; - // is_hero?: boolean; - // is_stamp?: boolean; onSelect: (id: INode['id'], type: INode['type']) => void; is_text?: boolean; } -const Cell: FC = ({ node: { id, title, brief, type }, onSelect, is_text = false }) => { +const Cell: FC = ({ node: { id, title, brief, type, blocks }, onSelect }) => { const [is_loaded, setIsLoaded] = useState(false); const onImageLoad = useCallback(() => { @@ -26,12 +21,17 @@ const Cell: FC = ({ node: { id, title, brief, type }, onSelect, is_text const onClick = useCallback(() => onSelect(id, type), [onSelect, id]); + const text = path([0, 'text'], blocks); + return (
-
{title &&
{title}
}
+
+ {title &&
{title}
} + {text &&
{text}
} +
{brief && brief.thumbnail && (
= ({ node: { id, title, brief, type }, onSelect, is_text }; export { Cell }; + +/* + {type === NODE_TYPES.TEXT && ( +
{path(['blocks', 0, 'text'], blocks)}
+ )} + } +*/ diff --git a/src/components/flow/Cell/styles.scss b/src/components/flow/Cell/styles.scss index 4b020662..539ab88c 100644 --- a/src/components/flow/Cell/styles.scss +++ b/src/components/flow/Cell/styles.scss @@ -26,16 +26,10 @@ } .text { - font: $font_16_regular; - line-height: 1.3em; + font: $font_18_regular; + line-height: 23px; + margin-top: $gap; letter-spacing: 0.5px; - position: absolute; - top: 0; - left: 0; - padding: $gap; - background: darken($content_bg, 4%); - height: 100%; - overflow: hidden; &::after { content: ' '; @@ -43,10 +37,10 @@ bottom: 0; left: 0; width: 100%; - height: 100px; + height: 160px; pointer-events: none; touch-action: none; - background: linear-gradient(transparentize($content_bg, 1), $content_bg 70px); + background: linear-gradient(transparentize($content_bg, 1), $content_bg 95%); z-index: 1; border-radius: 0 0 $radius $radius; } @@ -55,6 +49,7 @@ .title, .text_title { font: $font_cell_title; + line-height: 1.1em; text-transform: uppercase; overflow: hidden; @@ -63,7 +58,7 @@ } .title { - max-height: 2.6em; + // max-height: 3.3em; } .text_title { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index cd9a6404..e86b5b2f 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -52,7 +52,7 @@ $font_10_semibold: $semibold 10px $font; $font_8_regular: $regular 8px $font; $font_8_semibold: $semibold 8px $font; -$font_cell_title: $font_24_bold; +$font_cell_title: $bold 30px $font; $font_hero_title: $font_48_semibold; $shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px; diff --git a/src/utils/dom.ts b/src/utils/dom.ts index 155bdb66..e52f98cc 100644 --- a/src/utils/dom.ts +++ b/src/utils/dom.ts @@ -68,21 +68,23 @@ export const getImageSize = (file: IFile, size?: string): string => getURL(file) // `${process.env.API_HOST}${image}`.replace('{size}', size); export const formatText = (text: string): string => - text - .replace(/(\n{2,})/gi, '\n') - .replace(//g, '>') - .replace(/:\/\//gim, ':|--|') - .replace(/(\/\/[^\n]+)/gim, '$1') - .replace(/:\|--\|/gim, '://') - .split('\n') - .map(el => `

${el}

`) - // .map((el, index) => - // index === 0 - // ? `${author ? `

${author}: ` : ''}${el}

` - // : `

${el}

` - // ) - .join(''); + !text + ? '' + : text + .replace(/(\n{2,})/gi, '\n') + .replace(//g, '>') + .replace(/:\/\//gim, ':|--|') + .replace(/(\/\/[^\n]+)/gim, '$1') + .replace(/:\|--\|/gim, '://') + .split('\n') + .map(el => `

${el}

`) + // .map((el, index) => + // index === 0 + // ? `${author ? `

${author}: ` : ''}${el}

` + // : `

${el}

` + // ) + .join(''); export const formatCommentText = (author: string, text: string): string => text