sipp11
/
react-flux-jwt-seed
1
0
Fork 0
Code Issues Pull Requests Releases Activity
Browse Source

Implement foundation-app

bower
sipp11 9 years ago
parent
770979c014
commit
f4313aeed6
9 changed files with 105 additions and 118 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      bower.json
  2. 20
      gulpfile.js
  3. 2
      index.html
  4. 3
      package.json
  5. 97
      scss/style.scss
  6. 52
      src/components/AuthenticatedApp.js
  7. 6
      src/components/Home.js
  8. 18
      src/components/Login.js
  9. 2
      src/components/Signup.js

23
bower.json
Unescape View File

@ -1,23 +0,0 @@
{
"name": "expensy-react",
"description": "Seed project for React, Browserify, Rework SPAs",
"main": "app.js",
"authors": [
"sipp11 <sipp11@zzyzx.co>"
],
"license": "MIT",
"moduleType": [
"es6"
],
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"foundation": "~5.5.3"
}
}

20
gulpfile.js
Unescape View File

@ -29,20 +29,20 @@ gulp.task('styles',function() {
.pipe(gulp.dest('build/css/fonts')) .pipe(gulp.dest('build/css/fonts'))
// Compiles CSS // Compiles CSS
gulp.src('css/style.styl') // gulp.src('css/style.styl')
.pipe(stylus()) // .pipe(stylus())
.pipe(autoprefixer()) // .pipe(autoprefixer())
.pipe(gulp.dest('./build')) // .pipe(gulp.dest('./build'))
.pipe(reload({stream:true})) // .pipe(reload({stream:true}))
gulp.src('scss/*.scss') gulp.src('scss/*.scss')
.pipe(sass({ .pipe(sass({
includePaths: ['bower_components/foundation/scss'] includePaths: ['node_modules/foundation-apps/scss']
}))
.pipe(autoprefixer({
browsers: ['last 2 versions', 'ie 10']
})) }))
.pipe(stylus())
.pipe(autoprefixer())
.pipe(gulp.dest('./build/css')) .pipe(gulp.dest('./build/css'))
.pipe(reload({stream:true}))
}); });
@ -118,6 +118,6 @@ gulp.task('scripts', function() {
// run 'scripts' task first, then watch for future changes // run 'scripts' task first, then watch for future changes
gulp.task('default', ['images','styles','scripts','browser-sync'], function() { gulp.task('default', ['images','styles','scripts','browser-sync'], function() {
gulp.watch('css/**/*', ['styles']); // gulp watch for stylus changes gulp.watch('css/**/*', ['styles']); // gulp watch for stylus changes
gulp.watch('scss/**/*', ['styles']); // gulp watch for stylus changes gulp.watch('scss/*', ['styles']); // gulp watch for stylus changes
return buildScript('app.jsx', true); // browserify watch for JS changes return buildScript('app.jsx', true); // browserify watch for JS changes
}); });

2
index.html
Unescape View File

@ -7,7 +7,7 @@
</head> </head>
<body> <body>
<!-- content section --> <!-- content section -->
<section id="content"></section> <div id="content"></div>
<script type="text/javascript" src="build/build.js"></script> <script type="text/javascript" src="build/build.js"></script>
</body> </body>

3
package.json
Unescape View File

@ -34,8 +34,9 @@
}, },
"homepage": "https://github.com/mgonto/react-browserify-spa-seed", "homepage": "https://github.com/mgonto/react-browserify-spa-seed",
"dependencies": { "dependencies": {
"bootstrap": "^3.3.0",
"flux": "^2.0.1", "flux": "^2.0.1",
"foundation-apps": "^1.1.0",
"foundation-sites": "^6.0.0",
"jwt-decode": "^1.1.0", "jwt-decode": "^1.1.0",
"react": "^0.13", "react": "^0.13",
"react-mixin": "^1.1.0", "react-mixin": "^1.1.0",

97
scss/style.scss
Unescape View File

@ -1,42 +1,61 @@
// Foundation by ZURB // Foundation for Apps
// by ZURB
// foundation.zurb.com // foundation.zurb.com
// Licensed under MIT Open Source // Licensed under MIT Open Source
// Behold, here are all the Foundation components. $foundation-version: '1.1.0';
@import 'foundation/components/grid';
@import 'foundation/components/accordion'; // Make sure the charset is set appropriately
@import 'foundation/components/alert-boxes'; @charset "UTF-8";
@import 'foundation/components/block-grid';
@import 'foundation/components/breadcrumbs'; // Libraries (let's make Normalize an external dependency eventually)
@import 'foundation/components/button-groups'; @import
@import 'foundation/components/buttons'; "vendor/normalize";
@import 'foundation/components/clearing';
@import 'foundation/components/dropdown'; // Helpers
@import 'foundation/components/dropdown-buttons'; @import
@import 'foundation/components/flex-video'; "helpers/functions",
@import 'foundation/components/forms'; "helpers/mixins",
@import 'foundation/components/icon-bar'; "helpers/breakpoints",
@import 'foundation/components/inline-lists'; "helpers/images";
@import 'foundation/components/joyride';
@import 'foundation/components/keystrokes'; // Global styles
@import 'foundation/components/labels'; @import
@import 'foundation/components/magellan'; "global";
@import 'foundation/components/orbit';
@import 'foundation/components/pagination'; // Components
@import 'foundation/components/panels'; @import
@import 'foundation/components/pricing-tables'; "components/iconic",
@import 'foundation/components/progress-bars'; "components/action-sheet",
@import 'foundation/components/range-slider'; "components/block-list",
@import 'foundation/components/reveal'; "components/button",
@import 'foundation/components/side-nav'; "components/button-group",
@import 'foundation/components/split-buttons'; "components/card",
@import 'foundation/components/sub-nav'; "components/extras",
@import 'foundation/components/switches'; "components/forms",
@import 'foundation/components/tables'; "components/grid",
@import 'foundation/components/tabs'; "components/title-bar",
@import 'foundation/components/thumbs'; "components/label",
@import 'foundation/components/tooltips'; "components/list",
@import 'foundation/components/top-bar'; "components/menu-bar",
@import 'foundation/components/type'; "components/modal",
@import 'foundation/components/offcanvas'; "components/motion",
@import 'foundation/components/visibility'; "components/notification",
"components/off-canvas",
"components/popup",
"components/switch",
"components/tabs",
"components/accordion",
"components/typography",
"components/utilities";
#sub-nav {border-right: 1px solid #d0d0d0;}
#feed {border-left: 1px solid #d0d0d0;}
.player {
border-top: 1px solid #d0d0d0;
.menu-bar {
margin-bottom: 0;
}
}

52
src/components/AuthenticatedApp.js
Unescape View File

@ -32,14 +32,20 @@ export default class AuthenticatedApp extends React.Component {
render() { render() {
return ( return (
<div className="container"> <div className="grid-frame vertical">
<nav className="navbar navbar-default"> {this.headerItems}
<div className="navbar-header">
<a className="navbar-brand" href="/">React Flux app with JWT authentication</a>
</div>
{this.headerItems}
</nav>
<RouteHandler/> <RouteHandler/>
<div className="grid-block shrink player">
<div className="small-12 medium-3 content">
<ul className="menu-bar">
<li><a href="#">p</a></li>
<li><a href="#">p</a></li>
<li><a href="#"><input type="range" /></a></li>
</ul>
</div>
</div>
</div> </div>
); );
} }
@ -52,27 +58,21 @@ export default class AuthenticatedApp extends React.Component {
get headerItems() { get headerItems() {
if (!this.state.userLoggedIn) { if (!this.state.userLoggedIn) {
return ( return (
<ul className="nav navbar-nav navbar-right"> <div className="title-bar">
<li> <div className="center title"><a>getExpensy</a></div>
<Link to="login">Login</Link> <span className="left hide-for-medium"><a zf-toggle="sub-nav">Menu</a></span>
</li> <span className="right"><a ui-sref="settings">Settings</a></span>
<li> </div>
<Link to="signup">Signup</Link> )
</li>
</ul>)
} else { } else {
return ( return (
<ul className="nav navbar-nav navbar-right"> <div className="title-bar">
<li> <div className="center title"><a>getExpensy</a></div>
<Link to="home">Home</Link> <span className="left hide-for-medium"><a zf-toggle="sub-nav">Menu</a></span>
</li> <span className="right"><a ui-sref="settings">Settings</a></span>
<li> <span className="right"><a onClick={this.logout}>Logout</a></span>
<Link to="quote">Quote</Link> </div>
</li> )
<li>
<a href="" onClick={this.logout}>Logout</a>
</li>
</ul>)
} }
} }
} }

6
src/components/Home.js
Unescape View File

@ -3,6 +3,10 @@ import AuthenticatedComponent from './AuthenticatedComponent'
export default AuthenticatedComponent(class Home extends React.Component { export default AuthenticatedComponent(class Home extends React.Component {
render() { render() {
return (<h1>Hello {this.props.user ? this.props.user.username : ''}</h1>); return (
<div className="grid-block">
<h1>Hello {this.props.user ? this.props.user.username : ''}</h1>
</div>
);
} }
}); });

18
src/components/Login.js
Unescape View File

@ -23,23 +23,9 @@ export default class Login extends React.Component {
render() { render() {
return ( return (
<div className="login jumbotron center-block"> <div className="grid-block">
{/*
<h1>Login</h1>
<form role="form">
<div className="form-group">
<label htmlFor="username">Username</label>
<input type="text" valueLink={this.linkState('user')} className="form-control" id="username" placeholder="Username" />
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="password" valueLink={this.linkState('password')} className="form-control" id="password" ref="password" placeholder="Password" />
</div>
<button type="submit" className="btn btn-default" onClick={this.login.bind(this)}>Submit</button>
</form>
*/}
<a href="#" className="fb-login-button" data-max-rows="1" data-size="large" onClick={this.handleClickFb.bind(this)}>FB Login</a> <a href="#" className="fb-login-button" data-max-rows="1" data-size="large" onClick={this.handleClickFb.bind(this)}>FB Login</a>
</div> </div>
); );
} }

2
src/components/Signup.js
Unescape View File

@ -24,7 +24,7 @@ export default class Signup extends React.Component {
render() { render() {
return ( return (
<div className="login jumbotron center-block"> <div className="grid-block">
<h1>Signup</h1> <h1>Signup</h1>
<form role="form"> <form role="form">
<div className="form-group"> <div className="form-group">

Write Preview
Loading…
Cancel
Save