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

fixed pushing tags

Browse source
This commit is contained in:
Fedor Katurov 2019-10-24 12:43:54 +07:00
parent 6836e00de1
commit 99426172b2
12 changed files with 79 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/node/NodeRelated/index.tsx
View file

@ -2,12 +2,14 @@ import React, { FC, HTMLAttributes } from 'react';
import { range } from 'ramda';
import * as styles from './styles.scss';
import { Group } from '~/components/containers/Group';
import { INode } from '~/redux/types';
import { getURL } from '~/utils/dom';
type IProps = HTMLAttributes<HTMLDivElement> & {}
type IProps = HTMLAttributes<HTMLDivElement> & {
items: Partial<INode>[];
};
const NodeRelated: FC<IProps> = ({
title,
}) => (
const NodeRelated: FC<IProps> = ({ title, items }) => (
<Group className={styles.wrap}>
<div className={styles.title}>
<div className={styles.line} />
@ -15,9 +17,13 @@ const NodeRelated: FC<IProps> = ({
<div className={styles.line} />
</div>
<div className={styles.grid}>
{
range(1, 7).map(el => (<div className={styles.item} key={el} />))
}
{items.map(item => (
<div
className={styles.item}
key={item.id}
style={{ backgroundImage: `url("${getURL({ url: item.thumbnail })}")` }}
/>
))}
</div>
</Group>
);

9
src/components/node/NodeRelated/styles.scss
View file

@ -7,15 +7,20 @@
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-auto-rows: auto;
grid-column-gap: $gap;
grid-row-gap: $gap;
@include tablet {
grid-template-columns: repeat(6, 1fr);
}
}
.item {
background: darken($content_bg, 2%);
background: darken($content_bg, 2%) 50% 50% no-repeat;
background-size: cover;
padding-bottom: 100%;
border-radius: $cell_radius;
}