muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

fixed some styles

Browse source
This commit is contained in:
muerwre 2019-08-01 18:44:11 +07:00
parent b5bc5d7c6c
commit 85ee879c2f
5 changed files with 113 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,18 +2,15 @@ import React, { FC } from 'react';
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 { CellGrid } from "~/components/containers/CellGrid";
import { Panel } from "~/components/containers/Panel";
import { TextInput } from "~/components/input/TextInput";
import classNames = require("classnames");
import classNames from "classnames";
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 {Grid} from "~/components/containers/Grid";
import {Icon} from "~/components/input/Icon";
import { Icon } from "~/components/input/Icon";
interface IProps {}
@ -52,12 +49,21 @@ const EditorExample: FC<IProps> = () => (
<Panel stretchy>
<Group>
<Card className={styles.feature_card}>ОБОИ ПОСТА</Card>
<Card className={styles.feature_card}>
<div className={styles.cover} />
</Card>
<Card className={styles.feature_card}>МУЗЫКА</Card>
<Card className={styles.feature_card} style={{ justifyContent: 'flex-start', height: 72 }}>
<Icon icon="play" size={48} />
</Card>
<Card className={styles.feature_card}>
<Icon icon="cell-single" />
<Group horizontal className={styles.views}>
<Icon icon="cell-single" size={48} />
<Icon icon="cell-double-h" size={48} />
<Icon icon="cell-single" size={48} />
<Icon icon="cell-double-h" size={48} />
</Group>
</Card>
<Filler />

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

@ -29,9 +29,6 @@
flex-direction: column;
}
.editor_panel {
}
.editor_image_panel {
flex: 1;
}
@ -47,7 +44,7 @@
}
.feature_card {
height: 120px;
// height: 120px;
background: darken($main_bg_color, 6%);
color: transparentize(white, 0.5);
display: flex;
@ -56,6 +53,16 @@
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 {
@ -70,3 +77,7 @@
flex: 0 0 24px;
border-radius: $radius;
}
.views {
}

125
src/containers/examples/ImageExample/index.tsx
View file

@ -1,88 +1,77 @@
import React, { FC } from 'react';
import React, { FC } from "react";
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 range from 'ramda/es/range';
import range from "ramda/es/range";
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 { MenuButton } from "~/components/node/MenuButton";
import { NodeNoComments } from "~/components/node/NodeNoComments";
import { InputText } from "~/components/input/InputText";
interface IProps {}
const ImageExample: FC<IProps> = () => (
<Card className={styles.node} seamless>
<div
className={styles.image_container}
>
<img className={styles.image} src="http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg" />
</div>
<Card className={styles.node} seamless>
<InputText />
<div className={styles.image_container}>
<img
className={styles.image}
src="http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg"
/>
</div>
<NodePanel />
<NodePanel />
<Group>
<Padder>
<Group horizontal className={styles.content}>
<Group className={styles.comments}>
<NodeNoComments />
<Group>
<Padder>
<Group horizontal className={styles.content}>
<Group className={styles.comments}>
<NodeNoComments />
{
range(1,6).map(el => (
<Comment
key={el}
/>
))
}
</Group>
<div className={styles.panel}>
<Group style={{ flex: 1 }}>
<Padder className={styles.buttons}>
<Group>
<MenuButton
title="На главной"
description="плывет по течению"
icon="star"
/>
<MenuButton
title="Видно всем"
icon="star"
/>
<MenuButton
title="Редактировать"
icon="star"
/>
</Group>
</Padder>
<Tags
tags={[
{ title: 'Избранный', feature: 'red' },
{ title: 'Плейлист', feature: 'green' },
{ title: 'Просто' },
{ title: '+ фото', feature: 'black' },
{ title: '+ с музыкой', feature: 'black' },
]}
/>
<NodeRelated
title="First album"
/>
<NodeRelated
title="Second album"
/>
</Group>
</div>
{range(1, 6).map(el => (
<Comment key={el} />
))}
</Group>
</Padder>
</Group>
</Card>
<div className={styles.panel}>
<Group style={{ flex: 1 }}>
<Padder className={styles.buttons}>
<Group>
<MenuButton
title="На главной"
description="плывет по течению"
icon="star"
/>
<MenuButton title="Видно всем" icon="star" />
<MenuButton title="Редактировать" icon="star" />
</Group>
</Padder>
<Tags
tags={[
{ title: "Избранный", feature: "red" },
{ title: "Плейлист", feature: "green" },
{ title: "Просто" },
{ title: "+ фото", feature: "black" },
{ title: "+ с музыкой", feature: "black" }
]}
/>
<NodeRelated title="First album" />
<NodeRelated title="Second album" />
</Group>
</div>
</Group>
</Padder>
</Group>
</Card>
);
export { ImageExample };