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

refined horizontal editor

Browse source
This commit is contained in:
muerwre 2019-08-02 04:30:08 +07:00
parent 4c20da6151
commit 819e988a2e
3 changed files with 29 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/containers/examples/HorizontalExample/index.tsx
View file

@ -1,66 +1,29 @@
import React, { FC } from "react"; import React, { FC } from "react";
import { Card } from "~/components/containers/Card"; 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 {Padder} from "~/components/containers/Padder";
import { Padder } from "~/components/containers/Padder"; import {Group} from "~/components/containers/Group";
import { CellGrid } from "~/components/containers/CellGrid"; import {InputText} from "~/components/input/InputText";
import { Panel } from "~/components/containers/Panel"; import {Button} from "~/components/input/Button";
import classNames = require("classnames");
import { Scroll } from "~/components/containers/Scroll";
import { Tags } from "~/components/node/Tags";
import { Button } from "~/components/input/Button";
import { InputText } from "~/components/input/InputText";
import { Grid } from "~/components/containers/Grid";
interface IProps {} interface IProps {}
const HorizontalExample: FC<IProps> = () => ( const HorizontalExample: FC<IProps> = () => (
<Card className={styles.wrap} seamless> <div className={styles.wrap}>
<Group className={styles.group} seamless> <Card seamless className={styles.card}>
<div className={styles.editor}> <div className={styles.editor}>
<Scroll>
<Padder>
<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} />
<div className={styles.editor_image} />
<div className={styles.editor_image} />
<div className={styles.editor_image} />
<div className={styles.editor_image} />
</CellGrid>
</Padder>
</Scroll>
</div> </div>
<div className={styles.panel}> <Padder className={styles.panel}>
<Padder> <Group horizontal>
<Grid columns="2fr 1fr 1fr">
<div>
<Group>
<InputText title="Название" /> <InputText title="Название" />
<Tags <Button title="Сохранить" iconRight="play" />
tags={[
{ title: "Избранный", feature: "red" },
{ title: "Плейлист", feature: "green" },
{ title: "Просто" },
{ title: "+ фото", feature: "black" },
{ title: "+ с музыкой", feature: "black" }
]}
/>
</Group> </Group>
</div>
<div />
<div />
</Grid>
</Padder> </Padder>
</div>
</Group>
</Card> </Card>
</div>
); );
export { HorizontalExample }; export { HorizontalExample };

61
src/containers/examples/HorizontalExample/styles.scss
View file

@ -1,65 +1,30 @@
.wrap { .wrap {
align-items: stretch; flex: 1;
align-items: center;
justify-content: center; justify-content: center;
display: flex; display: flex;
background: $editor_bg; flex-direction: column;
flex: 1;
} }
.group { .card {
display: flex; padding: 0;
align-items: stretch !important;
justify-content: stretch;
//flex: 1;
}
.panel {
background: $editor_panel_bg;
//flex: 1;
border-radius: $radius;
box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
} }
.editor { .editor {
flex: 1; min-height: 200px;
min-width: 50vw;
background: darken($content_bg, 4%);
border-radius: $radius;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
justify-content: stretch;
flex-direction: column; flex-direction: column;
}
.editor_panel {
}
.editor_image_panel {
// flex: 1;
}
.editor_image_container {
flex: 1; flex: 1;
@include outer_shadow();
} }
.editor_image { .panel {
background: transparentize(white, 0.95);
padding-bottom: 100%;
border-radius: $radius;
}
.feature_card {
height: 100px;
background: darken($main_bg_color, 3%);
}
.panel_main {
flex: 1;
display: flex;
}
.close_icon {
height: 24px;
width: 24px;
background: transparentize(white, 0.95);
flex: 0 0 24px;
border-radius: $radius;
} }

2
src/styles/variables.scss
View file

@ -64,7 +64,7 @@ $input_shadow_filled: $input_shadow;
@mixin outer_shadow() { @mixin outer_shadow() {
box-shadow: inset transparentize(white, 0.95) 0 1px, box-shadow: inset transparentize(white, 0.95) 0 1px,
inset transparentize(black, 0.5) 0 -1px; transparentize(black, 0.8) 0 3px;
} }
@mixin inner_shadow() { @mixin inner_shadow() {