muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +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 { .stamp {
@include outer_shadow();
grid-row-end: span 2; grid-row-end: span 2;
grid-column: -2 / -1; 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; display: flex;
align-items: stretch; align-items: stretch;
justify-content: 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 { URLS, PRESETS } from '~/constants/urls';
import classNames from 'classnames'; import classNames from 'classnames';
import { NodeRelatedItem } from '~/components/node/NodeRelatedItem'; import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
import { InputText } from '~/components/input/InputText';
interface IProps { interface IProps {
recent: IFlowState['recent']; recent: IFlowState['recent'];
@ -13,35 +14,43 @@ interface IProps {
} }
const FlowRecent: FC<IProps> = ({ recent, updated }) => ( const FlowRecent: FC<IProps> = ({ recent, updated }) => (
<div className={styles.grid}> <div>
{updated && <div className={styles.search}>
updated.slice(0, 20).map(node => ( <InputText title="Поиск" />
<Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}> </div>
<div
className={classNames(styles.thumb, styles.new)}
style={{ backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")` }}
/>
<div className={styles.info}> <div className={styles.grid}>
<div className={styles.title}>{node.title}</div> {updated &&
<div className={styles.comment}>{getPrettyDate(node.created_at)}</div> updated.slice(0, 20).map(node => (
</div> <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
</Link> <div
))} className={classNames(styles.thumb, styles.new)}
style={{
backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")`,
}}
/>
{recent && <div className={styles.info}>
recent.slice(0, 20).map(node => ( <div className={styles.title}>{node.title}</div>
<Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}> <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
<div className={styles.thumb}> </div>
<NodeRelatedItem item={node} /> </Link>
</div> ))}
<div className={styles.info}> {recent &&
<div className={styles.title}>{node.title}</div> recent.slice(0, 20).map(node => (
<div className={styles.comment}>{getPrettyDate(node.created_at)}</div> <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
</div> <div className={styles.thumb}>
</Link> <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> </div>
); );

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

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

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

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

15
src/styles/inputs.scss
View file

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