mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
fixed some styles
This commit is contained in:
muerwre
parent
b5bc5d7c6c
commit
85ee879c2f
5 changed files with 113 additions and 90 deletions
|
|
@ -2,17 +2,14 @@ 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";
|
||||
|
||||
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 />
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
|
|
@ -1,24 +1,27 @@
|
|||
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" />
|
||||
<InputText />
|
||||
<div className={styles.image_container}>
|
||||
<img
|
||||
className={styles.image}
|
||||
src="http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<NodePanel />
|
||||
|
|
@ -29,13 +32,9 @@ const ImageExample: FC<IProps> = () => (
|
|||
<Group className={styles.comments}>
|
||||
<NodeNoComments />
|
||||
|
||||
{
|
||||
range(1,6).map(el => (
|
||||
<Comment
|
||||
key={el}
|
||||
/>
|
||||
))
|
||||
}
|
||||
{range(1, 6).map(el => (
|
||||
<Comment key={el} />
|
||||
))}
|
||||
</Group>
|
||||
|
||||
<div className={styles.panel}>
|
||||
|
|
@ -48,35 +47,25 @@ const ImageExample: FC<IProps> = () => (
|
|||
icon="star"
|
||||
/>
|
||||
|
||||
<MenuButton
|
||||
title="Видно всем"
|
||||
icon="star"
|
||||
/>
|
||||
<MenuButton title="Видно всем" 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' },
|
||||
{ title: "Избранный", feature: "red" },
|
||||
{ title: "Плейлист", feature: "green" },
|
||||
{ title: "Просто" },
|
||||
{ title: "+ фото", feature: "black" },
|
||||
{ title: "+ с музыкой", feature: "black" }
|
||||
]}
|
||||
/>
|
||||
|
||||
<NodeRelated
|
||||
title="First album"
|
||||
/>
|
||||
<NodeRelated title="First album" />
|
||||
|
||||
<NodeRelated
|
||||
title="Second album"
|
||||
/>
|
||||
<NodeRelated title="Second album" />
|
||||
</Group>
|
||||
</div>
|
||||
</Group>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,32 @@ import React, {FC} from 'react';
|
|||
|
||||
const Sprites: FC<{}> = () => (
|
||||
<svg width={0} height={0} viewBox="0 0 20 20">
|
||||
<g id="cell-single">
|
||||
<path d="M0 0L20 20L0 10Z" />
|
||||
<g id="cell-single" stroke="none">
|
||||
<path d="M0,0 L9,0 L9,9 L0,9 L0,0 Z M1,1 L1,8 L8,8 L8,1 L1,1 Z"></path>
|
||||
<path d="M11,0 L20,0 L20,9 L11,9 L11,0 Z M12,1 L12,8 L19,8 L19,1 L12,1 Z"></path>
|
||||
<path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z"></path>
|
||||
<path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z"></path>
|
||||
</g>
|
||||
|
||||
<g id="cell-double-h" stroke="none">
|
||||
<path d="M0,0 L20,0 L20,9 L0,9 L0,0 Z M1,1 L1,8 L19,8 L19,1 L1,1 Z"></path>
|
||||
<path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z"></path>
|
||||
<path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z"></path>
|
||||
</g>
|
||||
|
||||
<g id="cell-double-v" stroke="none">
|
||||
<path d="M0,0 L20,0 L20,9 L0,9 L0,0 Z M1,1 L1,8 L19,8 L19,1 L1,1 Z"></path>
|
||||
<path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z"></path>
|
||||
<path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z"></path>
|
||||
</g>
|
||||
|
||||
<g id="play">
|
||||
<path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z"/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
);
|
||||
|
||||
export { Sprites };
|
||||
|
||||
// <path d="M0 0H8V8H-8V-8Z" fillRule="evenodd" />
|
||||
|
|
@ -12,17 +12,12 @@
|
|||
"target": "es2018",
|
||||
"isolatedModules": true,
|
||||
"jsx": "react",
|
||||
"lib": [ "es2015", "DOM", "es6" ],
|
||||
"lib": ["es2015", "dom", "es6"],
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"./src/**/*",
|
||||
"./custom.d.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"./__tests__/**/*"
|
||||
]
|
||||
"include": ["./src/**/*", "./custom.d.ts"],
|
||||
"exclude": ["./__tests__/**/*"]
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue