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

fixed features at editor

Browse source
This commit is contained in:
muerwre 2019-08-01 19:11:01 +07:00
parent 85ee879c2f
commit 393813ce4e
9 changed files with 204 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

108
src/containers/examples/EditorExample/index.tsx
View file

@ -1,6 +1,6 @@
import React, { FC } from 'react';
import React, { FC } from "react";
import { Card } from "~/components/containers/Card";
import * as styles from './styles.scss';
import * as styles from "./styles.scss";
import { Group } from "~/components/containers/Group";
import { CellGrid } from "~/components/containers/CellGrid";
import { Panel } from "~/components/containers/Panel";
@ -11,71 +11,63 @@ import { Button } from "~/components/input/Button";
import { Filler } from "~/components/containers/Filler";
import { InputText } from "~/components/input/InputText";
import { Icon } from "~/components/input/Icon";
import { Grid } from "~/components/containers/Grid";
interface IProps {}
const EditorExample: FC<IProps> = () => (
<Card className={styles.wrap} seamless>
<Group horizontal className={styles.group} seamless>
<div className={styles.editor}>
<Panel className={classNames(styles.editor_panel, styles.editor_image_panel)}>
<Scroll>
<CellGrid className={styles.editor_image_container} size={200}>
<div className={styles.editor_image} />
<div className={styles.editor_image} />
<div className={styles.editor_image} />
<div className={styles.editor_image} />
</CellGrid>
</Scroll>
</Panel>
</div>
<Card className={styles.wrap} seamless>
<Group horizontal className={styles.group} seamless>
<div className={styles.editor}>
<Panel
className={classNames(styles.editor_panel, styles.editor_image_panel)}
>
<Scroll>
<CellGrid className={styles.editor_image_container} size={200}>
<div className={styles.editor_image} />
<div className={styles.editor_image} />
<div className={styles.editor_image} />
<div className={styles.editor_image} />
</CellGrid>
</Scroll>
</Panel>
<div className={styles.panel}>
<Panel>
<Group>
<InputText title="Заголовок" />
<Panel>
<Grid columns="1fr" stretchy>
<Card className={styles.feature_card}>
<div className={styles.cover} />
</Card>
</Grid>
</Panel>
</div>
<Tags
tags={[
{ title: 'Избранный', feature: 'red' },
{ title: 'Плейлист', feature: 'green' },
{ title: 'Просто' },
{ title: '+ фото', feature: 'black' },
{ title: '+ с музыкой', feature: 'black' },
]}
/>
</Group>
</Panel>
<div className={styles.panel}>
<Panel>
<Group>
<InputText title="Заголовок" />
<Panel stretchy>
<Group>
<Card className={styles.feature_card}>
<div className={styles.cover} />
</Card>
<Tags
tags={[
{ title: "Избранный", feature: "red" },
{ title: "Плейлист", feature: "green" },
{ title: "Просто" },
{ title: "+ фото", feature: "black" },
{ title: "+ с музыкой", feature: "black" }
]}
/>
</Group>
</Panel>
<Card className={styles.feature_card} style={{ justifyContent: 'flex-start', height: 72 }}>
<Icon icon="play" size={48} />
</Card>
<Panel stretchy />
<Card className={styles.feature_card}>
<Group horizontal className={styles.views}>
<Icon icon="cell-single" size={48} />
<Icon icon="cell-double-h" size={48} />
<Icon icon="cell-single" size={48} />
<Icon icon="cell-double-h" size={48} />
</Group>
</Card>
<Filler />
</Group>
</Panel>
<Panel>
<Button>Submit?</Button>
</Panel>
</div>
</Group>
</Card>
<Panel>
<Button iconRight="play" stretchy>
Submit?
</Button>
</Panel>
</div>
</Group>
</Card>
);
export { EditorExample };

12
src/containers/examples/EditorExample/styles.scss
View file

@ -44,7 +44,7 @@
}
.feature_card {
// height: 120px;
height: 120px;
background: darken($main_bg_color, 6%);
color: transparentize(white, 0.5);
display: flex;
@ -58,7 +58,7 @@
.cover {
border-radius: $radius;
background: url('http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg');
background: url("http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg");
flex: 1;
height: 120px;
background-size: cover;
@ -79,5 +79,9 @@
}
.views {
}
div {
display: flex;
align-items: center;
justify-content: center;
}
}