mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
fixed editor layout
This commit is contained in:
parent
5c5beabba6
commit
a2bb40bb14
3 changed files with 46 additions and 54 deletions
|
@ -18,67 +18,58 @@ interface IProps {}
|
|||
|
||||
const EditorExample: FC<IProps> = () => (
|
||||
<Card className={styles.wrap} seamless>
|
||||
<Group seamless style={{ flex: 1 }}>
|
||||
<Panel>
|
||||
<Group horizontal>
|
||||
<Filler>TITLE</Filler>
|
||||
<div className={styles.close_icon} />
|
||||
</Group>
|
||||
</Panel>
|
||||
<Group horizontal className={styles.group} seamless>
|
||||
<div className={styles.editor}>
|
||||
<Panel>
|
||||
<TextInput onChange={console.log} label="Название" value="Значение" />
|
||||
</Panel>
|
||||
|
||||
<Group horizontal className={styles.group} seamless>
|
||||
<div className={styles.editor}>
|
||||
<Panel>
|
||||
<TextInput onChange={console.log} label="Название" value="Значение" />
|
||||
</Panel>
|
||||
<Panel>
|
||||
<InputText title="Заголовок" />
|
||||
</Panel>
|
||||
|
||||
<Panel>
|
||||
<InputText title="Заголовок" />
|
||||
</Panel>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<div className={styles.panel}>
|
||||
<Filler>
|
||||
<Padder>
|
||||
<Group>
|
||||
<Card className={styles.feature_card}>Layout setup</Card>
|
||||
|
||||
<div className={styles.panel}>
|
||||
<Filler>
|
||||
<Padder>
|
||||
<Group>
|
||||
<Card className={styles.feature_card}>Layout setup</Card>
|
||||
<Card className={styles.feature_card}>Cover changer</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
|
||||
tags={[
|
||||
{ title: 'Избранный', feature: 'red' },
|
||||
{ title: 'Плейлист', feature: 'green' },
|
||||
{ title: 'Просто' },
|
||||
{ title: '+ фото', feature: 'black' },
|
||||
{ title: '+ с музыкой', feature: 'black' },
|
||||
]}
|
||||
/>
|
||||
<Filler />
|
||||
|
||||
<Filler />
|
||||
</Group>
|
||||
</Padder>
|
||||
</Filler>
|
||||
|
||||
</Group>
|
||||
</Padder>
|
||||
</Filler>
|
||||
|
||||
<Panel>
|
||||
<Button>Submit?</Button>
|
||||
</Panel>
|
||||
</div>
|
||||
</Group>
|
||||
<Panel>
|
||||
<Button>Submit?</Button>
|
||||
</Panel>
|
||||
</div>
|
||||
</Group>
|
||||
</Card>
|
||||
);
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
background: $editor_panel_bg;
|
||||
flex: 1;
|
||||
//border-radius: 0 $radius $radius 0;
|
||||
border-radius: $radius 0 $radius 0;
|
||||
border-radius: $radius;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
@ -254,7 +254,8 @@
|
|||
}
|
||||
|
||||
&.focused .title, &.has_value .title {
|
||||
font: $font_10_semibold;
|
||||
// font: $font_10_semibold;
|
||||
font-size: 10px;
|
||||
top: -6px;
|
||||
bottom: auto;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue