mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
removed examples folder
This commit is contained in:
Fedor Katurov
parent
54f5125b8f
commit
d6cb9bcb8e
6 changed files with 0 additions and 391 deletions
|
|
@ -1,71 +0,0 @@
|
||||||
import React, { FC } from 'react';
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import { Card } from '~/components/containers/Card';
|
|
||||||
import * as styles from './styles.scss';
|
|
||||||
import { Group } from '~/components/containers/Group';
|
|
||||||
import { CellGrid } from '~/components/containers/CellGrid';
|
|
||||||
import { Panel } from '~/components/containers/Panel';
|
|
||||||
import { Scroll } from '~/components/containers/Scroll';
|
|
||||||
import { Tags } from '~/components/node/Tags';
|
|
||||||
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>
|
|
||||||
|
|
||||||
<Panel>
|
|
||||||
<Grid columns="1fr" stretchy>
|
|
||||||
<Card className={styles.feature_card}>
|
|
||||||
<div className={styles.cover} />
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
</Panel>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.panel}>
|
|
||||||
<Panel>
|
|
||||||
<Group>
|
|
||||||
<InputText title="Заголовок" />
|
|
||||||
|
|
||||||
<Tags
|
|
||||||
tags={[
|
|
||||||
{ title: 'Избранный' },
|
|
||||||
{ title: 'Плейлист' },
|
|
||||||
{ title: 'Просто' },
|
|
||||||
{ title: '+ фото' },
|
|
||||||
{ title: '+ с музыкой' },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
</Panel>
|
|
||||||
|
|
||||||
<Panel stretchy />
|
|
||||||
|
|
||||||
<Panel>
|
|
||||||
<Button iconRight="play" stretchy>
|
|
||||||
Submit?
|
|
||||||
</Button>
|
|
||||||
</Panel>
|
|
||||||
</div>
|
|
||||||
</Group>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
|
|
||||||
export { EditorExample };
|
|
||||||
|
|
@ -1,87 +0,0 @@
|
||||||
.wrap {
|
|
||||||
align-items: stretch;
|
|
||||||
justify-content: center;
|
|
||||||
display: flex;
|
|
||||||
background: $editor_bg;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group {
|
|
||||||
display: flex;
|
|
||||||
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;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor {
|
|
||||||
flex: 2;
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor_image_panel {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor_image_container {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor_image {
|
|
||||||
background: transparentize(white, 0.95);
|
|
||||||
padding-bottom: 100%;
|
|
||||||
border-radius: $radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature_card {
|
|
||||||
height: 120px;
|
|
||||||
background: darken($main_bg_color, 6%);
|
|
||||||
color: transparentize(white, 0.5);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font: $font_18_semibold;
|
|
||||||
box-shadow: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover {
|
|
||||||
border-radius: $radius;
|
|
||||||
background: url("http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg");
|
|
||||||
flex: 1;
|
|
||||||
height: 120px;
|
|
||||||
background-size: cover;
|
|
||||||
opacity: 0.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.views {
|
|
||||||
div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
import React, { FC } from 'react';
|
|
||||||
import { Card } from '~/components/containers/Card';
|
|
||||||
import * as styles from './styles.scss';
|
|
||||||
import { Padder } from '~/components/containers/Padder';
|
|
||||||
import { Group } from '~/components/containers/Group';
|
|
||||||
import { InputText } from '~/components/input/InputText';
|
|
||||||
import { Button } from '~/components/input/Button';
|
|
||||||
import { Filler } from '~/components/containers/Filler';
|
|
||||||
import { Icon } from '~/components/input/Icon';
|
|
||||||
|
|
||||||
interface IProps {}
|
|
||||||
|
|
||||||
const HorizontalExample: FC<IProps> = () => (
|
|
||||||
<div className={styles.wrap}>
|
|
||||||
<Card seamless className={styles.card}>
|
|
||||||
<div className={styles.editor}>
|
|
||||||
<div className={styles.uploads}>
|
|
||||||
<div className={styles.cell} />
|
|
||||||
<div className={styles.cell} />
|
|
||||||
<div className={styles.cell} />
|
|
||||||
<div className={styles.cell} />
|
|
||||||
<div className={styles.cell} />
|
|
||||||
<div className={styles.cell} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Padder className={styles.features}>
|
|
||||||
<Group horizontal>
|
|
||||||
<div className={styles.feature_add_btn}>
|
|
||||||
<Icon icon="plus" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.feature}>
|
|
||||||
<Group horizontal>
|
|
||||||
<div>ОБЛОЖКА</div>
|
|
||||||
<Icon icon="close" />
|
|
||||||
</Group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Filler />
|
|
||||||
|
|
||||||
<div className={styles.feature_cell}>
|
|
||||||
<Icon icon="cell-single" size={24} />
|
|
||||||
</div>
|
|
||||||
</Group>
|
|
||||||
</Padder>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Padder className={styles.panel}>
|
|
||||||
<Group horizontal>
|
|
||||||
<InputText title="Название" />
|
|
||||||
|
|
||||||
<Button title="Сохранить" iconRight="check" />
|
|
||||||
</Group>
|
|
||||||
</Padder>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
export { HorizontalExample };
|
|
||||||
|
|
@ -1,91 +0,0 @@
|
||||||
.wrap {
|
|
||||||
flex: 1;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
background: darken($content_bg, 4%);
|
|
||||||
box-shadow: transparentize(black, 0.7) 0 10px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor {
|
|
||||||
background: $content_bg;
|
|
||||||
min-height: 200px;
|
|
||||||
min-width: 50vw;
|
|
||||||
|
|
||||||
border-radius: $radius;
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
justify-content: stretch;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
@include outer_shadow();
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
}
|
|
||||||
|
|
||||||
.features {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature_add_btn {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 24px;
|
|
||||||
background: $red_gradient;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature {
|
|
||||||
background: lighten($content_bg, 4%);
|
|
||||||
padding: $gap $gap $gap 20px;
|
|
||||||
border-radius: 24px;
|
|
||||||
font: $font_14_semibold;
|
|
||||||
height: 40px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature_cell {
|
|
||||||
background: lighten($content_bg, 4%);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: $radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uploads {
|
|
||||||
flex: 1;
|
|
||||||
padding: $gap;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
display: grid;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
grid-column-gap: $gap;
|
|
||||||
grid-row-gap: $gap;
|
|
||||||
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell {
|
|
||||||
background: lighten($content_bg, 6%);
|
|
||||||
border-radius: $radius;
|
|
||||||
padding-bottom: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
import React, { FC } from 'react';
|
|
||||||
import range from 'ramda/es/range';
|
|
||||||
import { Card } from '~/components/containers/Card';
|
|
||||||
import * as styles from './styles.scss';
|
|
||||||
import { Group } from '~/components/containers/Group';
|
|
||||||
import { Padder } from '~/components/containers/Padder';
|
|
||||||
import { Comment } from '~/components/node/Comment';
|
|
||||||
import { NodePanel } from '~/components/node/NodePanel';
|
|
||||||
import { NodeRelated } from '~/components/node/NodeRelated';
|
|
||||||
import { Tags } from '~/components/node/Tags';
|
|
||||||
import { NodeNoComments } from '~/components/node/NodeNoComments';
|
|
||||||
import { ImageSwitcher } from '~/components/node/ImageSwitcher';
|
|
||||||
|
|
||||||
interface IProps {}
|
|
||||||
|
|
||||||
const ImageExample: FC<IProps> = () => <Card className={styles.node} seamless></Card>;
|
|
||||||
|
|
||||||
export { ImageExample };
|
|
||||||
|
|
||||||
/*
|
|
||||||
<Padder className={styles.buttons}>
|
|
||||||
<Group>
|
|
||||||
<MenuButton title="На главной" description="плывет по течению" icon="star" />
|
|
||||||
|
|
||||||
<MenuButton title="Видно всем" icon="star" />
|
|
||||||
|
|
||||||
<MenuButton title="Редактировать" icon="star" />
|
|
||||||
</Group>
|
|
||||||
</Padder>
|
|
||||||
*/
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
.image_container {
|
|
||||||
width: 100%;
|
|
||||||
background: $node_image_bg;
|
|
||||||
border-radius: $panel_radius 0 0 $panel_radius;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.image {
|
|
||||||
max-height: 800px;
|
|
||||||
opacity: 1;
|
|
||||||
width: 100%;
|
|
||||||
border-radius: $radius $radius 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
align-items: stretch !important;
|
|
||||||
|
|
||||||
@include vertical_at_tablet;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comments {
|
|
||||||
flex: 3 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
flex: 1 3;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: flex-start;
|
|
||||||
padding-left: $gap / 2;
|
|
||||||
|
|
||||||
@include tablet {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.node {
|
|
||||||
background: $node_bg;
|
|
||||||
box-shadow: $node_shadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
background: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
|
||||||
background: $node_buttons_bg;
|
|
||||||
flex: 1;
|
|
||||||
border-radius: $panel_radius;
|
|
||||||
box-shadow: $comment_shadow;
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue