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

added search form

Browse source
This commit is contained in:
Fedor Katurov 2020-04-18 14:10:12 +07:00
parent 02885b89d5
commit 81c9a5d7b3
5 changed files with 52 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/flow/FlowGrid/styles.scss
View file

@ -67,17 +67,8 @@ $stamp_color: $content_bg;
}
.stamp {
@include outer_shadow();
grid-row-end: span 2;
grid-column: -2 / -1;
background: $stamp_color;
border-radius: $radius;
padding: $gap;
display: flex;
align-items: center;
justify-content: center;
font: $font_24_semibold;
display: flex;
align-items: stretch;
justify-content: stretch;

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

@ -6,6 +6,7 @@ import { Link } from 'react-router-dom';
import { URLS, PRESETS } from '~/constants/urls';
import classNames from 'classnames';
import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
import { InputText } from '~/components/input/InputText';
interface IProps {
recent: IFlowState['recent'];
@ -13,35 +14,43 @@ interface IProps {
}
const FlowRecent: FC<IProps> = ({ recent, updated }) => (
<div className={styles.grid}>
{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)}")` }}
/>
<div>
<div className={styles.search}>
<InputText title="Поиск" />
</div>
<div className={styles.info}>
<div className={styles.title}>{node.title}</div>
<div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
</div>
</Link>
))}
<div className={styles.grid}>
{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)}")`,
}}
/>
{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>
))}
<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>
))}
</div>
</div>
);

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

@ -3,12 +3,18 @@
justify-content: stretch;
flex-direction: column;
flex: 1;
background: $content_bg;
padding: $gap;
& > div {
// background: $content_bg;
// @include outer_shadow();
// background: darken($content_bg, 4%);
}
@include outer_shadow();
}
.search {
background: lighten($content_bg, 3%);
border-radius: $radius $radius 0 0;
padding: $gap;
@include outer_shadow();
}
.item {

8
src/containers/flow/FlowLayout/styles.scss
View file

@ -6,7 +6,6 @@
}
$cols: $content_width / $cell;
$stamp_color: $content_bg;
.grid {
display: grid;
@ -78,12 +77,7 @@ $stamp_color: $content_bg;
grid-row-end: span 2;
grid-column: -2 / -1;
background: $stamp_color;
border-radius: $radius;
padding: $gap;
display: flex;
align-items: center;
justify-content: center;
font: $font_24_semibold;
display: flex;
align-items: stretch;
@ -98,7 +92,7 @@ $stamp_color: $content_bg;
left: 0;
height: 60px;
width: 100%;
background: linear-gradient(transparentize($stamp_color, 1), $stamp_color 90%);
background: linear-gradient(transparentize($content_bg, 1), $content_bg 90%);
pointer-events: none;
touch-action: none;
}

15
src/styles/inputs.scss
View file

@ -13,12 +13,8 @@
background: $input_bg_color;
&::before {
content: " ";
background: linear-gradient(
270deg,
$input_bg_color $gap,
transparentize($input_bg_color, 1)
);
content: ' ';
background: linear-gradient(270deg, $input_bg_color $gap, transparentize($input_bg_color, 1));
position: absolute;
width: $gap * 2;
height: $input_height;
@ -98,7 +94,7 @@
&.required {
&::after {
content: " ";
content: ' ';
width: 5px;
height: 5px;
border-radius: 3px;
@ -261,11 +257,10 @@
}
.title {
font: $font;
font: $font_16_semibold;
position: absolute;
left: 6px;
// width: 100%;
top: 12px;
top: 10px;
bottom: auto;
padding: 0 4px;
box-sizing: border-box;