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

fixed editor layout

Browse source
This commit is contained in:
muerwre 2019-08-01 04:01:16 +07:00
parent 5c5beabba6
commit a2bb40bb14
3 changed files with 46 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,67 +18,58 @@ interface IProps {}
const EditorExample: FC<IProps> = () => ( const EditorExample: FC<IProps> = () => (
<Card className={styles.wrap} seamless> <Card className={styles.wrap} seamless>
<Group seamless style={{ flex: 1 }}> <Group horizontal className={styles.group} seamless>
<Panel> <div className={styles.editor}>
<Group horizontal> <Panel>
<Filler>TITLE</Filler> <TextInput onChange={console.log} label="Название" value="Значение" />
<div className={styles.close_icon} /> </Panel>
</Group>
</Panel>
<Group horizontal className={styles.group} seamless> <Panel>
<div className={styles.editor}> <InputText title="Заголовок" />
<Panel> </Panel>
<TextInput onChange={console.log} label="Название" value="Значение" />
</Panel>
<Panel> <Panel className={classNames(styles.editor_panel, styles.editor_image_panel)}>
<InputText title="Заголовок" /> <Scroll>
</Panel> <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>
<Panel className={classNames(styles.editor_panel, styles.editor_image_panel)}> <div className={styles.panel}>
<Scroll> <Filler>
<CellGrid className={styles.editor_image_container} size={200}> <Padder>
<div className={styles.editor_image} /> <Group>
<div className={styles.editor_image} /> <Card className={styles.feature_card}>Layout setup</Card>
<div className={styles.editor_image} />
<div className={styles.editor_image} />
</CellGrid>
</Scroll>
</Panel>
</div>
<div className={styles.panel}> <Card className={styles.feature_card}>Cover changer</Card>
<Filler>
<Padder>
<Group>
<Card className={styles.feature_card}>Layout setup</Card>
<Card className={styles.feature_card}>Cover changer</Card> <Card className={styles.feature_card}>Track</Card>
<Card className={styles.feature_card}>Track</Card> <Tags
tags={[
{ title: 'Избранный', feature: 'red' },
{ title: 'Плейлист', feature: 'green' },
{ title: 'Просто' },
{ title: '+ фото', feature: 'black' },
{ title: '+ с музыкой', feature: 'black' },
]}
/>
<Tags <Filler />
tags={[
{ title: 'Избранный', feature: 'red' },
{ title: 'Плейлист', feature: 'green' },
{ title: 'Просто' },
{ title: '+ фото', feature: 'black' },
{ title: '+ с музыкой', feature: 'black' },
]}
/>
<Filler /> </Group>
</Padder>
</Filler>
</Group> <Panel>
</Padder> <Button>Submit?</Button>
</Filler> </Panel>
</div>
<Panel>
<Button>Submit?</Button>
</Panel>
</div>
</Group>
</Group> </Group>
</Card> </Card>
); );

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

@ -17,7 +17,7 @@
background: $editor_panel_bg; background: $editor_panel_bg;
flex: 1; flex: 1;
//border-radius: 0 $radius $radius 0; //border-radius: 0 $radius $radius 0;
border-radius: $radius 0 $radius 0; border-radius: $radius;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

3
src/styles/inputs.scss
View file

@ -254,7 +254,8 @@
} }
&.focused .title, &.has_value .title { &.focused .title, &.has_value .title {
font: $font_10_semibold; // font: $font_10_semibold;
font-size: 10px;
top: -6px; top: -6px;
bottom: auto; bottom: auto;
} }