muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

editor changes

Browse source
This commit is contained in:
muerwre 2019-07-30 05:13:27 +07:00
parent d7e638153b
commit 696ac8d69f
8 changed files with 76 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/containers/Group/styles.scss
View file

@ -1,5 +1,6 @@
.group { .group {
display: flex; display: flex;
flex: 1;
> :global(.group_filler) { > :global(.group_filler) {
flex: 1; flex: 1;

6
src/components/containers/Panel/styles.scss
View file

@ -1,5 +1,11 @@
.panel { .panel {
padding: $gap; padding: $gap;
min-height: $input_height + $gap;
display: flex;
align-items: center;
justify-content: stretch;
box-sizing: border-box;
flex-direction: row;
@include outer_shadow(); @include outer_shadow();

1
src/components/input/Button/style.scss
View file

@ -9,6 +9,7 @@
font-weight: 600; font-weight: 600;
font-size: $text_small; font-size: $text_small;
cursor: pointer; cursor: pointer;
flex: 1;
@include outer_shadow(); @include outer_shadow();
} }

1
src/components/input/TextInput/styles.scss
View file

@ -4,6 +4,7 @@
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
position: relative; position: relative;
flex: 1;
} }
.label { .label {

2
src/components/main/SidePane/index.tsx
View file

@ -33,8 +33,6 @@ export const SidePane: FC<IProps> = ({
return ( return (
<div className={styles.pane} style={{ transform: `translate(${left}px, 0px)` }}> <div className={styles.pane} style={{ transform: `translate(${left}px, 0px)` }}>
<Group> <Group>
<div className={classNames(styles.btn, "orange")}><div>‹</div></div>
<div <div
className={classNames(styles.group, 'logo')} className={classNames(styles.group, 'logo')}
> >

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

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

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

@ -15,16 +15,17 @@
.panel { .panel {
background: $editor_panel_bg; background: $editor_panel_bg;
flex: 0 0 33%; flex: 1;
border-radius: 0 $radius $radius 0; //border-radius: 0 $radius $radius 0;
border-radius: $radius 0 $radius 0;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include outer_shadow(); //@include outer_shadow();
} }
.editor { .editor {
flex: 1; flex: 2;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
@ -56,3 +57,11 @@
flex: 1; flex: 1;
display: flex; display: flex;
} }
.close_icon {
height: 24px;
width: 24px;
background: transparentize(white, 0.95);
flex: 0 0 24px;
border-radius: $radius;
}

9
src/styles/global.scss
View file

@ -5,10 +5,10 @@ html {
} }
body { body {
background: $main_bg_color; background: darken($main_bg_color, 12%);
min-height: 100vh; min-height: 100vh;
//background: $main_bg_color url("../sprites/dots.svg"); //background: $main_bg_color url("../sprites/dots.svg");
background: url("http://vault48.org/pixmaps/texture.jpg"); // background: url("http://vault48.org/pixmaps/texture.jpg");
//background: #111111; //background: #111111;
color: $main_text_color; color: $main_text_color;
font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@ -23,8 +23,9 @@ body {
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
//background: url("../sprites/circles.svg"); // background: url("../sprites/circles.svg");
background: url("http://vault48.org/pixmaps/texture_alt.jpg"); // background: url("http://vault48.org/pixmaps/texture_alt.jpg");
background: linear-gradient(darken($main_bg_color, 15%), darken($main_bg_color, 12%));
pointer-events: none; pointer-events: none;
//background-size: cover; //background-size: cover;
} }