Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-01 00:08:27 +01:00
Code Issues Projects Releases Wiki Activity

hacking more of layout #153

Browse Source
This commit is contained in:
Ivar 2016-09-13 21:35:16 +02:00
parent 506654b8bc
commit 299fa9964b
5 changed files with 55 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/unleash-frontend-next/index.html
View File

@ -3,6 +3,8 @@
<head>
<title>Unleash UI</title>
<link rel="stylesheet" href="/static/bundle.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
</head>
<body>
<div id='app'></div>

29
packages/unleash-frontend-next/src/App.jsx
View File

@ -1,16 +1,37 @@
import React, { Component } from 'react';
import { AppBar } from 'react-toolbox';
import { Layout, Panel, NavDrawer } from 'react-toolbox';
import { AppBar, IconButton } from 'react-toolbox';
import Navigation from './Navigation';
export default class App extends Component {
state = {
drawerActive: false,
};
toggleDrawerActive = () => {
this.setState({ drawerActive: !this.state.drawerActive });
};
render () {
return (
<div>
<AppBar flat leftIcon="(Unleash)">
<Navigation />
<AppBar>
<IconButton icon="menu" onClick={ this.toggleDrawerActive }/>
</AppBar>
{this.props.children}
<Layout>
<NavDrawer
active={this.state.drawerActive}
permanentAt="sm" style={{ width: '200px' }}>
<Navigation />
</NavDrawer>
<Panel scrollY={false}>
<div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem', minHeight: '100%' }}>
{this.props.children}
</div>
</Panel>
</Layout>
</div>
);
}

23
packages/unleash-frontend-next/src/Features.jsx
View File

@ -1,15 +1,28 @@
import React, { Component } from 'react';
import { Layout, Panel } from 'react-toolbox';
import {Card, CardMedia, CardTitle, CardText } from 'react-toolbox';
export default class Features extends Component {
render () {
return (
<Layout>
<Panel>
<h1>Feture toggles</h1>
</Panel>
</Layout>
<Card>
<CardTitle>Feture toggles</CardTitle>
<CardText>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pharetra finibus ullamcorper. Proin laoreet faucibus venenatis. Aenean quis leo finibus, maximus nisi finibus, fringilla ex. Nam mollis congue orci eu consectetur. Aliquam a massa quis tortor vestibulum lacinia. Phasellus nisi velit, mattis vel nulla a, rhoncus porta dui. Vestibulum viverra augue in pellentesque tincidunt. Aliquam rhoncus nunc ipsum, sed vehicula leo dictum in. Phasellus accumsan felis sem, in ullamcorper nisi accumsan vitae. Nullam vitae consectetur mi, sed vulputate augue. In quis augue tellus. Duis convallis cursus elit, in interdum nisl pulvinar viverra. Sed vel ornare sapien, eu consectetur metus. Vivamus at porta nisl. Nullam in aliquam nisl.
</p><p>
Nulla aliquet vel sem vitae ornare. Etiam vestibulum interdum nulla in viverra. Proin sed ligula eget lorem sodales eleifend. Nunc aliquet odio in orci rutrum imperdiet non gravida mauris. Sed vel ligula interdum, tristique diam et, sollicitudin ipsum. Pellentesque imperdiet mattis interdum. Quisque suscipit mattis mauris, at auctor ligula dignissim at. Integer ac suscipit dolor. Praesent venenatis arcu vitae lorem tristique, eu lobortis elit vulputate. Suspendisse libero sem, commodo sed mi id, varius consectetur purus. Integer sit amet urna vehicula, sollicitudin magna vitae, placerat dui. Integer a ipsum ante. Vestibulum ut neque tempus, congue metus in, gravida quam.
</p><p>
Nunc vehicula felis vel nisl fermentum, non commodo augue placerat. Curabitur pellentesque nulla nec fermentum convallis. Quisque molestie felis est, a porttitor quam porttitor id. Aliquam felis nibh, porta eu cursus at, lacinia aliquam augue. Aliquam accumsan lacus massa. Cras eu nibh sem. Nunc in aliquam sapien.
</p><p>
Pellentesque malesuada augue a neque venenatis rutrum. Morbi congue, magna in sagittis cursus, velit ipsum dapibus justo, eget vulputate nisl est ac ligula. In posuere dolor nec turpis maximus, non facilisis sapien accumsan. Aenean vestibulum erat lacus, ut lobortis ipsum consequat quis. Suspendisse lectus erat, vulputate eu accumsan quis, suscipit nec mauris. Proin nec odio sed nisl elementum vehicula non eget ipsum. Aliquam massa quam, volutpat ut eleifend vel, pretium ac odio. Maecenas fermentum velit quis faucibus ultricies. Integer tristique erat sed nibh aliquet tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p><p>
Proin eros libero, elementum in blandit nec, auctor nec est. Nulla nec malesuada tortor. Aliquam tristique sem elementum, fringilla ligula eget, luctus libero. Nunc ac nisi malesuada, pellentesque tellus sed, pretium risus. Sed vel tempus risus, non mollis justo. Cras porta eros porttitor, imperdiet magna sed, pellentesque metus. Nulla sollicitudin ullamcorper lacinia. Mauris vehicula convallis maximus. Etiam aliquam ut eros ac hendrerit.
</p>
</CardText>
</Card>
);
}
};

13
packages/unleash-frontend-next/src/Navigation.jsx
View File

@ -1,15 +1,16 @@
import React, { Component } from 'react';
import { Link } from 'react-router';
import { Navigation } from 'react-toolbox';
import { ListSubHeader, List, ListItem } from 'react-toolbox';
export default class UnleashNav extends Component {
render () {
return (
<Navigation type="horizontal">
<Link to="/features">Feature Toggles </Link>
<Link to="/strategies">Strategies </Link>
<a href="https://github.com/finn-no/unleash/" target="_blank">GitHub </a>
</Navigation>
<List>
<ListSubHeader caption="Menu" />
<ListItem><Link to="/features">Feature Toggles </Link></ListItem>
<ListItem><Link to="/strategies">Strategies </Link></ListItem>
<ListItem><a href="https://github.com/finn-no/unleash/" target="_blank">GitHub </a></ListItem>
</List>
);
}
};

4
packages/unleash-frontend-next/src/Strategies.jsx
View File

@ -4,7 +4,9 @@ import React, { Component } from 'react';
export default class Strategies extends Component {
render () {
return (
<h1>Strategies</h1>
<p>
<h1>Strategies</h1>
</p>
);
}
};