muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-26 13:26:40 +07:00
Code Packages Activity Actions

clearing search

Browse source
This commit is contained in:
Fedor Katurov 2020-04-18 18:46:51 +07:00
parent 9498c7b7a0
commit 47adbdf6f0
13 changed files with 215 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/flow/FlowRecent/index.tsx
View file

@ -1,11 +1,6 @@
import React, { FC } from 'react';
import * as styles from './styles.scss';
import { IFlowState } from '~/redux/flow/reducer';
import { getURL, getPrettyDate } from '~/utils/dom';
import { Link } from 'react-router-dom';
import { URLS, PRESETS } from '~/constants/urls';
import classNames from 'classnames';
import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
import { FlowRecentItem } from '../FlowRecentItem';
interface IProps {
recent: IFlowState['recent'];
@ -15,36 +10,9 @@ interface IProps {
const FlowRecent: FC<IProps> = ({ recent, updated }) => {
return (
<>
{updated &&
updated.slice(0, 20).map(node => (
<Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
<div
className={classNames(styles.thumb, styles.new)}
style={{
backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")`,
}}
/>
{updated && updated.map(node => <FlowRecentItem node={node} key={node.id} has_new />)}
<div className={styles.info}>
<div className={styles.title}>{node.title}</div>
<div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
</div>
</Link>
))}
{recent &&
recent.slice(0, 20).map(node => (
<Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
<div className={styles.thumb}>
<NodeRelatedItem item={node} />
</div>
<div className={styles.info}>
<div className={styles.title}>{node.title}</div>
<div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
</div>
</Link>
))}
{recent && recent.map(node => <FlowRecentItem node={node} key={node.id} />)}
</>
);
};

56
src/components/flow/FlowRecent/styles.scss
View file

@ -1,56 +0,0 @@
.item {
display: flex;
align-items: center;
justify-content: center;
font: $font_12_regular;
border-radius: $radius;
flex-direction: row;
margin-bottom: $gap;
color: white;
text-decoration: none;
}
.thumb {
height: 48px;
margin-right: $gap;
background: 50% 50% no-repeat;
background-size: cover;
border-radius: $radius;
flex: 0 0 48px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
&.new {
&::after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 100%;
background: $red;
box-shadow: $content_bg 0 0 0 5px;
position: absolute;
right: -2px;
bottom: -2px;
}
}
}
.info {
flex: 1;
min-width: 0;
}
.title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font: $font_16_semibold;
}
.comment {
font: $font_12_regular;
margin-top: 4px;
opacity: 0.5;
}