Landing page markup is complete, wiring - WIP

This commit is contained in:
Andrew Revinsky (DART)
2016-02-19 04:34:30 +03:00
parent d36c01b331
commit 98c01cceeb
5 changed files with 131 additions and 87 deletions

View File

@@ -47,6 +47,7 @@
"dependencies": {
"babel-polyfill": "6.1.4",
"babel-runtime": "6.0.14",
"classnames": "^2.2.3",
"history": "1.17.0",
"immutable": "^3.7.6",
"invariant": "^2.1.1",

View File

@@ -2,7 +2,7 @@
* Created by andrew on 17/02/16.
*/
import React, { PropTypes } from "react";
import { Grid, Navbar, NavItem, Nav, NavbarBrand } from "react-bootstrap";
import { Grid, Col, Navbar, NavItem, Nav, NavbarBrand, Footer } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
//if (!global.__SERVER__ && !global.__TEST__) {
@@ -35,7 +35,15 @@ class Container extends React.Component {
{this.props.children}
</Grid>
<Navbar fixedBottom="true" className="footer-navigation">
<Col xs="12" sm="6">&copy; 2016 Eventuate.io</Col>
<Col xs="12" sm="6" className="text-right">
<a href="#">Terms</a> |&nbsp;
<a href="#">Policy</a> |&nbsp;
<a href="#">Contact</a> |&nbsp;
<a href="#">About</a>
</Col>
</Navbar>
</div>
);
}

View File

@@ -44,3 +44,20 @@ textarea {
height: 100%;
min-height: 100%;
}
body {
padding-bottom: 50px;
/* height: 100%; */
/* min-height: 100%; */
height: auto;
}
.footer-navigation {
height: 1px;
& > .container {
height: 100%;
& > * {
top: 50%;
transform: translateY(-50%);
}
}
}

View File

@@ -3,14 +3,13 @@
*/
import React from "react";
import IndexPanel from "./../components/partials/IndexPanel";
import { PageHeader, OverlayTrigger, Tooltip, Row, ButtonGroup, Table } from "react-bootstrap";
import { PageHeader, OverlayTrigger, Tooltip, Grid, Col, Row, Nav, NavItem, ButtonGroup, Button, Table } from "react-bootstrap";
import { Link, IndexLink} from "react-router";
import { connect } from "react-redux";
import * as BSTheme from "redux-auth/bootstrap-theme";
import * as DefaultTheme from "redux-auth";
import Select from "react-select";
class Main extends React.Component {
updateTheme (theme) {
//this.props.dispatch(updateDemoTheme(theme));
@@ -21,109 +20,127 @@ class Main extends React.Component {
}
render () {
console.log("page endpoint", this.props.pageEndpoint);
let Theme = BSTheme;
let themePath = "/material-ui-theme";
let endpointAttr = (this.props.pageEndpoint === "default")
? ""
: "endpoint=\"evilUser\"";
switch(this.props.theme) {
case "default":
Theme = DefaultTheme;
themePath = "";
break;
case "bootstrap":
Theme = BSTheme;
themePath = "/bootstrap-theme";
break;
}
const deployTooltip = (<Tooltip>
Create a new instance of this demo on your own Heroku server.
</Tooltip>);
//const deployTooltip = (<Tooltip>
// Create a new instance of this demo on your own Heroku server.
//</Tooltip>);
return (
<div>
<PageHeader>
Money Transfer Demo
<OverlayTrigger overlay={deployTooltip} placement="left">
<a
className="pull-right"
href="https://heroku.com/deploy?template=https://github.com/lynndylanhurley/redux-auth-demo">
<img src="https://www.herokucdn.com/deploy/button.svg" />
</a>
</OverlayTrigger>
My Accounts
<Nav pullRight="true">
<ButtonGroup pullRight="true">
<Button bsStyle="link">Create Account</Button>
<Button bsStyle="link">Add 3rd Party Recipients</Button>
</ButtonGroup>
</Nav>
</PageHeader>
<Row>
<IndexPanel header="Current User">
<label>current user provider</label>
<p>{this.props.currentUserUid}</p>
<IndexPanel header="Personal Info:">
<label>current user uid</label>
<p>{this.props.currentUserProvider}</p>
<Row>
<Col xs="4">Customer:</Col>
<Col xs="8"><strong>Kevin McCallister</strong></Col>
</Row>
<IndexLink to="/">Home</IndexLink><br/>
<Link to="/signin">Login</Link><br/>
<Link to="/register">Register</Link><br/>
<Link to="/account">Account</Link><br/>
<Row>
<Col xs="4">Email:</Col>
<Col xs="8"><strong>current@email.com</strong></Col>
</Row>
<label>currently selected theme</label>
<Select
value={this.props.theme}
clearable={false}
options={[
{value: "default", label: "Default"},
{value: "bootstrap", label: "Bootstrap"},
{value: "materialUi", label: "Material UI"}
]}
onChange={this.updateTheme.bind(this)} />
<Row>
<Col xs="4">SSN:</Col>
<Col xs="8"><strong>1234567890-09876</strong></Col>
</Row>
<label>currently selected endpoint</label>
<Select
value={this.props.pageEndpoint}
clearable={false}
options={[
{value: "default", label: "Default User Class"},
{value: "evilUser", label: "Alternate User Class"}
]}
onChange={this.updateEndpoint.bind(this)} />
<Table>
<thead>
<tr>
<th colSpan={2}>
ajax test
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default user:</td>
<td></td>
</tr>
<tr>
<td>Alternate user class:</td>
<td></td>
</tr>
<tr>
<td>Group that includes both user classes:</td>
<td></td>
</tr>
</tbody>
</Table>
</IndexPanel>
<IndexPanel header="Other User"></IndexPanel>
</Row>
<Table>
<thead>
<tr>
<th>Account Title</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Account Title #1</a></td>
<td>$100.00</td>
</tr>
<tr>
<td><a href="#">Account Title #1</a></td>
<td>$150.00</td>
</tr>
</tbody>
</Table>
</div>
);
}
}
/*
<IndexPanel header="Other User"><label>current user provider</label>
<p>{this.props.currentUserUid}</p>
<label>current user uid</label>
<p>{this.props.currentUserProvider}</p>
<IndexLink to="/">Home</IndexLink><br/>
<Link to="/signin">Login</Link><br/>
<Link to="/register">Register</Link><br/>
<Link to="/account">Account</Link><br/>
<label>currently selected theme</label>
<Select
value={this.props.theme}
clearable={false}
options={[
{value: "default", label: "Default"},
{value: "bootstrap", label: "Bootstrap"},
{value: "materialUi", label: "Material UI"}
]}
onChange={this.updateTheme.bind(this)} />
<label>currently selected endpoint</label>
<Select
value={this.props.pageEndpoint}
clearable={false}
options={[
{value: "default", label: "Default User Class"},
{value: "evilUser", label: "Alternate User Class"}
]}
onChange={this.updateEndpoint.bind(this)} />
<Table>
<thead>
<tr>
<th colSpan={2}>
ajax test
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default user:</td>
<td></td>
</tr>
<tr>
<td>Alternate user class:</td>
<td></td>
</tr>
<tr>
<td>Group that includes both user classes:</td>
<td></td>
</tr>
</tbody>
</Table>
</IndexPanel>
*/
export default connect(({auth, demoUi = new Map()}) => {
return ({

View File

@@ -331,4 +331,5 @@
to {
-webkit-transform: rotate(1turn);
}
}
}