Merge branch 'master' into dev
commit
0e272f36df
|
@ -6,3 +6,8 @@ $color-primary-light: #3f51b5;
|
||||||
$color-primary-contrast: #fff;
|
$color-primary-contrast: #fff;
|
||||||
$color-divider: $color-divider;
|
$color-divider: $color-divider;
|
||||||
$color-content: #fafafa;
|
$color-content: #fafafa;
|
||||||
|
$animation-duration: 250ms;
|
||||||
|
$animation-ease: ease-in-out;
|
||||||
|
|
||||||
|
$code-font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||||
|
$code-font-size: 13px;
|
||||||
|
|
|
@ -1,23 +0,0 @@
|
||||||
@import "../globals";
|
|
||||||
@import "../mixins";
|
|
||||||
|
|
||||||
.editor {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
:global {
|
|
||||||
@import "~codemirror/lib/codemirror";
|
|
||||||
@import "solarized";
|
|
||||||
@import "custom";
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 3px 7px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #c2c0bc;
|
|
||||||
content: "Try Component";
|
|
||||||
background: #f1ede4;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,34 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { AppBar, Button } from 'react-toolbox';
|
|
||||||
import { Link } from 'react-router';
|
|
||||||
import Logo from '../../logo';
|
|
||||||
import Navigation from '../../navigation';
|
|
||||||
import PlaygroundArea from './playground_area';
|
|
||||||
import style from './appbar.scss';
|
|
||||||
|
|
||||||
class MainAppBar extends React.Component {
|
|
||||||
handlerPlayGroundClick = () => {
|
|
||||||
this.refs.playground.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
return (
|
|
||||||
<AppBar className={style.appbar} flat fixed>
|
|
||||||
<Link to='/' className={style.brand}>
|
|
||||||
<Logo className={style.logo} /> React Toolbox
|
|
||||||
</Link>
|
|
||||||
<Navigation className={style.navigation}/>
|
|
||||||
<Button
|
|
||||||
accent
|
|
||||||
className={style['playground-button']}
|
|
||||||
icon='code'
|
|
||||||
kind='floating'
|
|
||||||
onClick={this.handlerPlayGroundClick}
|
|
||||||
/>
|
|
||||||
<PlaygroundArea ref='playground' />
|
|
||||||
</AppBar>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MainAppBar;
|
|
|
@ -1,58 +0,0 @@
|
||||||
@import "../../globals";
|
|
||||||
@import "~react-toolbox/app_bar/config";
|
|
||||||
@import "~react-toolbox/button/config";
|
|
||||||
|
|
||||||
$appbar-brand-height: 2 * $unit;
|
|
||||||
$appbar-brand-v-padding: ($appbar-height - $appbar-brand-height) / 2;
|
|
||||||
$appbar-brand-logo-size: $appbar-height - 2.6 * $unit;
|
|
||||||
$appbar-shadow: 0 1px rgba(255,255,255,0.75);
|
|
||||||
|
|
||||||
.appbar {
|
|
||||||
composes: root from "sass!react-toolbox/app_bar/style";
|
|
||||||
background: $color-primary-dark;
|
|
||||||
box-shadow: $appbar-shadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand {
|
|
||||||
@include typo-title;
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
padding-top: $appbar-brand-v-padding;
|
|
||||||
padding-bottom: $appbar-brand-v-padding;
|
|
||||||
padding-left: $appbar-title-distance;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $color-primary-contrast;
|
|
||||||
> .logo {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
width: $appbar-brand-logo-size;
|
|
||||||
height: $appbar-brand-logo-size;
|
|
||||||
margin-top: - $appbar-brand-logo-size / 2;
|
|
||||||
fill: $color-primary-contrast;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation {
|
|
||||||
flex-grow: 1;
|
|
||||||
padding-right: $button-floating-height;
|
|
||||||
text-align: right;
|
|
||||||
> ul {
|
|
||||||
list-style: none;
|
|
||||||
> li {
|
|
||||||
display: inline-block;
|
|
||||||
> a {
|
|
||||||
@include typo-menu;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 2.5 * $unit $appbar-h-padding;
|
|
||||||
color: $color-primary-contrast;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.playground-button {
|
|
||||||
position: absolute;
|
|
||||||
right: $button-floating-height / 2;
|
|
||||||
bottom: -($button-floating-height / 2);
|
|
||||||
}
|
|
|
@ -0,0 +1,22 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { AppBar } from 'react-toolbox';
|
||||||
|
import { Link } from 'react-router';
|
||||||
|
import Logo from '../../../logo';
|
||||||
|
import Navigation from '../../../navigation';
|
||||||
|
import style from './appbar.scss';
|
||||||
|
|
||||||
|
class MainAppBar extends React.Component {
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<AppBar className={style.appbar} flat fixed>
|
||||||
|
<Link to='/'>
|
||||||
|
<Logo className={style.logo} />
|
||||||
|
</Link>
|
||||||
|
<Navigation className={style.navigation}/>
|
||||||
|
</AppBar>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MainAppBar;
|
|
@ -0,0 +1,37 @@
|
||||||
|
@import "../../../globals";
|
||||||
|
@import "~react-toolbox/app_bar/config";
|
||||||
|
$appbar-height: 11.2 * $unit;
|
||||||
|
$appbar-logo-size: 3.6 * $unit;
|
||||||
|
$appbar-shadow: 0 1px rgba(255,255,255,.75);
|
||||||
|
|
||||||
|
.appbar {
|
||||||
|
display: flex;
|
||||||
|
min-height: $appbar-height;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-end;
|
||||||
|
background: $color-primary-dark;
|
||||||
|
box-shadow: $appbar-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: $appbar-logo-size;
|
||||||
|
height: $appbar-logo-size;
|
||||||
|
fill: $color-primary-contrast;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation {
|
||||||
|
> ul {
|
||||||
|
list-style: none;
|
||||||
|
> li {
|
||||||
|
display: inline-block;
|
||||||
|
> a {
|
||||||
|
@include typo-menu;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: $appbar-h-padding;
|
||||||
|
line-height: $appbar-height / 2;
|
||||||
|
color: $color-primary-contrast;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,9 +1,9 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ToolboxComponents from './components';
|
import components from '../modules/components';
|
||||||
import style from './component.scss';
|
import style from './documentation.scss';
|
||||||
|
|
||||||
const Component = (props) => {
|
const Component = (props) => {
|
||||||
const html = { __html: ToolboxComponents[props.params.component].docs };
|
const html = { __html: components[props.params.component].docs };
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={style.documentation}
|
className={style.documentation}
|
|
@ -1,12 +1,10 @@
|
||||||
@import "../../globals";
|
@import "../../../globals";
|
||||||
|
|
||||||
$documentation-h1-size: 3.4 * $unit;
|
$documentation-h1-size: 3.4 * $unit;
|
||||||
$documentation-h2-size: 2.4 * $unit;
|
$documentation-h2-size: 2.4 * $unit;
|
||||||
$documentation-h-offset: 4 * $unit;
|
$documentation-h-offset: 4 * $unit;
|
||||||
$documentation-v-offset: ($documentation-h-offset / 2);
|
$documentation-v-offset: ($documentation-h-offset / 2);
|
||||||
$documentation-code-background: rgba(0, 0, 0, .0588235);
|
$documentation-code-background: rgba(0, 0, 0, .0588235);
|
||||||
$documentation-code-font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
|
||||||
$documentation-code-font-size: 13px;
|
|
||||||
|
|
||||||
.documentation {
|
.documentation {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
|
@ -44,8 +42,8 @@ $documentation-code-font-size: 13px;
|
||||||
}
|
}
|
||||||
pre {
|
pre {
|
||||||
padding: $documentation-v-offset $documentation-h-offset;
|
padding: $documentation-v-offset $documentation-h-offset;
|
||||||
font-family: $documentation-code-font-family;
|
font-family: $code-font-family;
|
||||||
font-size: $documentation-code-font-size;
|
font-size: $code-font-size;
|
||||||
background-color: $documentation-code-background;
|
background-color: $documentation-code-background;
|
||||||
}
|
}
|
||||||
table {
|
table {
|
|
@ -1,15 +1,19 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ToolboxComponents from './components';
|
|
||||||
import { History } from 'react-router';
|
import { History } from 'react-router';
|
||||||
import { List, ListItem } from 'react-toolbox';
|
import { List, ListItem } from 'react-toolbox';
|
||||||
import style from './drawer.scss';
|
import style from './drawer_components.scss';
|
||||||
|
import components from '../modules/components';
|
||||||
|
|
||||||
const MainDrawer = React.createClass({
|
const MainDrawer = React.createClass({
|
||||||
mixins: [History],
|
mixins: [History],
|
||||||
|
|
||||||
|
propTypes: {
|
||||||
|
active: React.PropTypes.bool
|
||||||
|
},
|
||||||
|
|
||||||
renderDrawerItems () {
|
renderDrawerItems () {
|
||||||
return Object.keys(ToolboxComponents).map((key) => {
|
return Object.keys(components).map((key) => {
|
||||||
const ToolboxComponent = ToolboxComponents[key];
|
const ToolboxComponent = components[key];
|
||||||
const to = this.context.history.createHref(ToolboxComponent.path);
|
const to = this.context.history.createHref(ToolboxComponent.path);
|
||||||
let className = style.item;
|
let className = style.item;
|
||||||
if (this.context.history.isActive(ToolboxComponent.path)) {
|
if (this.context.history.isActive(ToolboxComponent.path)) {
|
||||||
|
@ -29,8 +33,11 @@ const MainDrawer = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
|
let className = style.root;
|
||||||
|
if (this.props.active) className += ` ${style.active_drawer}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<aside className={style.root}>
|
<aside className={className}>
|
||||||
<List className={style.list} selectable>
|
<List className={style.list} selectable>
|
||||||
{ this.renderDrawerItems() }
|
{ this.renderDrawerItems() }
|
||||||
</List>
|
</List>
|
|
@ -1,5 +1,4 @@
|
||||||
@import "../../globals";
|
@import "../../../globals";
|
||||||
|
|
||||||
$drawer-h-offset: 2.4 * $unit;
|
$drawer-h-offset: 2.4 * $unit;
|
||||||
$drawer-v-offset: 1.2 * $unit;
|
$drawer-v-offset: 1.2 * $unit;
|
||||||
$drawer-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
|
$drawer-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
|
||||||
|
@ -7,13 +6,20 @@ $drawer-footer-border: solid 1px rgb(224, 224, 224);
|
||||||
$drawer-width: 22 * $unit;
|
$drawer-width: 22 * $unit;
|
||||||
|
|
||||||
.root {
|
.root {
|
||||||
z-index: $z-index-normal;
|
z-index: $z-index-high;
|
||||||
display: flex;
|
display: flex;
|
||||||
min-width: $drawer-width;
|
|
||||||
max-width: $drawer-width;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: $color-background;
|
background-color: $color-background;
|
||||||
|
transition: all $animation-duration $animation-ease;
|
||||||
|
&:not(.active_drawer) {
|
||||||
|
min-width: 0;
|
||||||
|
max-width: 0;
|
||||||
|
}
|
||||||
|
&.active_drawer {
|
||||||
|
min-width: $drawer-width;
|
||||||
|
max-width: $drawer-width;
|
||||||
box-shadow: $drawer-shadow;
|
box-shadow: $drawer-shadow;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
|
@ -39,6 +45,7 @@ $drawer-width: 22 * $unit;
|
||||||
font-size: $font-size-tiny;
|
font-size: $font-size-tiny;
|
||||||
color: $color-text-secondary;
|
color: $color-text-secondary;
|
||||||
border-top: $drawer-footer-border;
|
border-top: $drawer-footer-border;
|
||||||
|
overflow: hidden;
|
||||||
> span {
|
> span {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: ($drawer-h-offset / 2);
|
margin-bottom: ($drawer-h-offset / 2);
|
|
@ -0,0 +1,19 @@
|
||||||
|
import React from 'react';
|
||||||
|
import style from './drawer_playground.scss';
|
||||||
|
import Playground from '../../../playground';
|
||||||
|
import code from '../../../../examples/example.txt';
|
||||||
|
|
||||||
|
class PlaygroundArea extends React.Component {
|
||||||
|
render () {
|
||||||
|
let className = style.root;
|
||||||
|
if (this.props.active) className += ` ${style.active}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside className={className}>
|
||||||
|
<Playground codeText={code} layout='vertical' />
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PlaygroundArea;
|
|
@ -0,0 +1,17 @@
|
||||||
|
@import "../../../globals";
|
||||||
|
$drawer-shadow: 0 -4px 5px 0 rgba(0,0,0,.14),0 -1px 10px 0 rgba(0,0,0,.12), 0 -2px 4px -1px rgba(0,0,0,.2);
|
||||||
|
// $drawer-shadow: 0 -10px red;
|
||||||
|
.root {
|
||||||
|
z-index: $z-index-high;
|
||||||
|
background-color: $color-background;
|
||||||
|
transition: all $animation-duration $animation-ease;
|
||||||
|
&:not(.active) {
|
||||||
|
min-width: 0vw;
|
||||||
|
max-width: 0vw;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
min-width: 50vw;
|
||||||
|
max-width: 50vw;
|
||||||
|
box-shadow: $drawer-shadow;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,18 +1,39 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import MainAppBar from './appbar';
|
import { AppBar, Button } from 'react-toolbox';
|
||||||
import MainDrawer from './drawer';
|
import Appbar from './components/appbar';
|
||||||
|
import DrawerComponents from './components/drawer_components';
|
||||||
|
import DrawerPlayground from './components/drawer_playground';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
const Main = (props) => {
|
class Main extends React.Component {
|
||||||
|
|
||||||
|
state = {
|
||||||
|
playground: false
|
||||||
|
};
|
||||||
|
|
||||||
|
handlerPlayGroundClick = () => {
|
||||||
|
this.setState({ playground: !this.state.playground})
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
console.log('aaa', this.state.playground);
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<MainAppBar />
|
<Appbar />
|
||||||
|
<Button
|
||||||
|
accent
|
||||||
|
className={style.playground_button}
|
||||||
|
icon={this.state.playground ? 'close' : 'code'}
|
||||||
|
kind='floating'
|
||||||
|
onClick={this.handlerPlayGroundClick}
|
||||||
|
/>
|
||||||
<section className={style.content}>
|
<section className={style.content}>
|
||||||
<MainDrawer />
|
<DrawerComponents active={!this.state.playground}/>
|
||||||
{ props.children }
|
{ this.props.children }
|
||||||
|
<DrawerPlayground active={this.state.playground} />
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
}
|
||||||
export default Main;
|
export default Main;
|
||||||
|
|
|
@ -1,26 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { Button, Drawer } from 'react-toolbox';
|
|
||||||
import style from './playground_area.scss';
|
|
||||||
import Playground from '../../playground';
|
|
||||||
import code from '../../../examples/example.txt';
|
|
||||||
|
|
||||||
class PlaygroundArea extends React.Component {
|
|
||||||
render () {
|
|
||||||
return (
|
|
||||||
<Drawer className={style.drawer} ref='drawer' type='right'>
|
|
||||||
<Button label='Close' onClick={this.hide} />
|
|
||||||
<Playground codeText={code} layout='vertical' />
|
|
||||||
</Drawer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
show = () => {
|
|
||||||
this.refs.drawer.show();
|
|
||||||
};
|
|
||||||
|
|
||||||
hide = () => {
|
|
||||||
this.refs.drawer.hide();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default PlaygroundArea;
|
|
|
@ -1,5 +0,0 @@
|
||||||
@import "../../globals";
|
|
||||||
|
|
||||||
.drawer > aside {
|
|
||||||
width: 60%;
|
|
||||||
}
|
|
|
@ -1,5 +1,8 @@
|
||||||
@import "../../globals";
|
@import "../../globals";
|
||||||
@import "~react-toolbox/app_bar/config";
|
@import "~react-toolbox/app_bar/config";
|
||||||
|
@import "~react-toolbox/button/config";
|
||||||
|
|
||||||
|
$appbar-height: 11.2 * $unit;
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -7,3 +10,10 @@
|
||||||
padding-top: $appbar-height;
|
padding-top: $appbar-height;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.playground_button {
|
||||||
|
z-index: $z-index-higher;
|
||||||
|
position: absolute;
|
||||||
|
right: $button-floating-height / 2;
|
||||||
|
top: $appbar-height - ($button-floating-height / 2);
|
||||||
|
}
|
||||||
|
|
|
@ -5,11 +5,7 @@ import code from '../../../examples/example.txt';
|
||||||
const PlaygroundArea = () => {
|
const PlaygroundArea = () => {
|
||||||
return (
|
return (
|
||||||
<section>
|
<section>
|
||||||
<h1>Playground</h1>
|
<Playground codeText={code} layout='horizontal'/>
|
||||||
<p>
|
|
||||||
lorem ipsum...
|
|
||||||
</p>
|
|
||||||
<Playground codeText={code} />
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
|
@ -5,8 +5,8 @@ const Navigation = (props) => {
|
||||||
return (
|
return (
|
||||||
<nav className={props.className}>
|
<nav className={props.className}>
|
||||||
<ul>
|
<ul>
|
||||||
<li><Link to='/install'>Installation</Link></li>
|
|
||||||
<li><Link to='/components/app_bar'>Components</Link></li>
|
<li><Link to='/components/app_bar'>Components</Link></li>
|
||||||
|
<li><Link to='/install'>Installation</Link></li>
|
||||||
<li><a href='http://www.github.com/react-toolbox/react-toolbox' target='_blank'>Github</a></li>
|
<li><a href='http://www.github.com/react-toolbox/react-toolbox' target='_blank'>Github</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
@ -0,0 +1,26 @@
|
||||||
|
@import "../../../globals";
|
||||||
|
@import "../../../mixins";
|
||||||
|
|
||||||
|
$documentation-code-background: rgba(0, 0, 0, .0588235);
|
||||||
|
|
||||||
|
.editor {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
:global {
|
||||||
|
@import "~codemirror/lib/codemirror";
|
||||||
|
@import "solarized";
|
||||||
|
@import "custom";
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 3px 7px;
|
||||||
|
font-size: $font-size-tiny;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
font-family: $code-font-family;
|
||||||
|
color: $color-text;
|
||||||
|
content: "React Toolbox Virtual Console";
|
||||||
|
background-color: rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
@import "../globals";
|
@import "../../../globals";
|
||||||
@import "../mixins";
|
@import "../../../mixins";
|
||||||
|
|
||||||
$preview-error-background: #f2777a;
|
$preview-error-background: #f2777a;
|
||||||
$preview-error-color: #fff;
|
$preview-error-color: #fff;
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Editor from '../editor';
|
import Editor from './components/editor';
|
||||||
import Preview from '../preview';
|
import Preview from './components/preview';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
class Playground extends React.Component {
|
class Playground extends React.Component {
|
||||||
|
@ -10,7 +10,7 @@ class Playground extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
layout: 'horizontal'
|
layout: 'vertical'
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
|
|
@ -12,15 +12,22 @@ $preview-background: #fff;
|
||||||
|
|
||||||
.vertical {
|
.vertical {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
> .editor {
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .preview {
|
||||||
|
height: 40%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.horizontal {
|
.horizontal {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
> .editor {
|
> .editor {
|
||||||
width: $editor-width;
|
width: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .preview {
|
> .preview {
|
||||||
background: $preview-background;
|
width: 40%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,17 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import Router from 'react-router';
|
|
||||||
import routes from './routes';
|
|
||||||
|
|
||||||
const Docs = props => {
|
|
||||||
return (
|
|
||||||
<Router history={props.history}>
|
|
||||||
{routes}
|
|
||||||
</Router>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
Docs.propTypes = {
|
|
||||||
history: React.PropTypes.object
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Docs;
|
|
|
@ -1,2 +0,0 @@
|
||||||
import {createHashHistory} from 'history';
|
|
||||||
export default createHashHistory();
|
|
|
@ -1,6 +1,23 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import history from './history';
|
import { Router, Route, IndexRoute } from 'react-router';
|
||||||
import Docs from './docs';
|
import { App } from 'react-toolbox';
|
||||||
|
import { createHashHistory } from 'history';
|
||||||
|
|
||||||
ReactDOM.render(<Docs history={history}/>, document.getElementById('app'));
|
import Home from './components/layout/home';
|
||||||
|
import Main from './components/layout/main';
|
||||||
|
import Playground from './components/layout/playground';
|
||||||
|
import Documentation from './components/layout/main/components/documentation';
|
||||||
|
|
||||||
|
ReactDOM.render((
|
||||||
|
<Router history={createHashHistory()}>
|
||||||
|
<Route component={App}>
|
||||||
|
<Route path="/" component={Home} />
|
||||||
|
<Route component={Main}>
|
||||||
|
<Route path="/components/:component" component={Documentation} />
|
||||||
|
<Route path="/playground" component={Playground} />
|
||||||
|
</Route>
|
||||||
|
<IndexRoute component={Home}/>
|
||||||
|
</Route>
|
||||||
|
</Router>
|
||||||
|
), document.getElementById('app'));
|
||||||
|
|
|
@ -1,20 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { App } from 'react-toolbox';
|
|
||||||
import { Route, IndexRoute } from 'react-router';
|
|
||||||
import Home from './components/layout/home';
|
|
||||||
import Main from './components/layout/main';
|
|
||||||
import Playground from './components/layout/main/playground';
|
|
||||||
import Component from './components/layout/main/component';
|
|
||||||
|
|
||||||
const routes = (
|
|
||||||
<Route component={App}>
|
|
||||||
<Route path="/" component={Home} />
|
|
||||||
<Route component={Main}>
|
|
||||||
<Route path="/components/:component" component={Component} />
|
|
||||||
<Route path="/playground" component={Playground} />
|
|
||||||
</Route>
|
|
||||||
<IndexRoute component={Home}/>
|
|
||||||
</Route>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default routes;
|
|
Loading…
Reference in New Issue