muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 21:06:42 +07:00
Code Packages Activity Actions

related items without cover now has letters

Browse source
This commit is contained in:
Fedor Katurov 2020-04-08 15:36:27 +07:00
parent 0f3ac203f7
commit eade3efc7c
4 changed files with 34 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import { getURL, getPrettyDate } from '~/utils/dom';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { URLS, PRESETS } from '~/constants/urls'; import { URLS, PRESETS } from '~/constants/urls';
import classNames from 'classnames'; import classNames from 'classnames';
import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
interface IProps { interface IProps {
recent: IFlowState['recent']; recent: IFlowState['recent'];
@ -31,10 +32,10 @@ const FlowRecent: FC<IProps> = ({ recent, updated }) => (
{recent && {recent &&
recent.slice(0, 20).map(node => ( recent.slice(0, 20).map(node => (
<Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}> <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
<div <div className={styles.thumb}>
className={styles.thumb} <NodeRelatedItem item={node} />
style={{ backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")` }} </div>
/>
<div className={styles.info}> <div className={styles.info}>
<div className={styles.title}>{node.title}</div> <div className={styles.title}>{node.title}</div>
<div className={styles.comment}>{getPrettyDate(node.created_at)}</div> <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>

2
src/components/main/Header/style.scss
View file

@ -11,7 +11,7 @@
box-sizing: border-box; box-sizing: border-box;
transition: background-color 0.5s; transition: background-color 0.5s;
@include tablet { @include desktop {
height: 64px; height: 64px;
padding: 0 $gap; padding: 0 $gap;
} }

14
src/components/node/NodeRelatedItem/index.tsx
View file

@ -10,6 +10,18 @@ type IProps = RouteComponentProps & {
item: Partial<INode>; item: Partial<INode>;
}; };
const getTitleLetters = (title: string): string => {
const words = title.split(' ');
return words.length > 1
? words
.slice(0, 2)
.map(word => word[0])
.join('')
.toUpperCase()
: words[0].substr(0, 2).toUpperCase();
};
const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => { const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
const [is_loaded, setIsLoaded] = useState(false); const [is_loaded, setIsLoaded] = useState(false);
const onClick = useCallback(() => history.push(URLS.NODE_URL(item.id)), [item, history]); const onClick = useCallback(() => history.push(URLS.NODE_URL(item.id)), [item, history]);
@ -25,6 +37,8 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
style={{ backgroundImage: `url("${getURL({ url: item.thumbnail }, PRESETS.avatar)}")` }} style={{ backgroundImage: `url("${getURL({ url: item.thumbnail }, PRESETS.avatar)}")` }}
/> />
{!item.thumbnail && <div className={styles.letters}>{getTitleLetters(item.title)}</div>}
<img <img
src={getURL({ url: item.thumbnail }, PRESETS.avatar)} src={getURL({ url: item.thumbnail }, PRESETS.avatar)}
alt="loader" alt="loader"

14
src/components/node/NodeRelatedItem/styles.scss
View file

@ -4,6 +4,7 @@
border-radius: $cell_radius; border-radius: $cell_radius;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
width: 100%;
img { img {
position: absolute; position: absolute;
@ -28,3 +29,16 @@
opacity: 1; opacity: 1;
} }
} }
.letters {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
font: $font_24_semibold;
opacity: 0.2;
}