Implement foundation-app

9 years ago · f4313aeed6
9 changed files with 105 additions and 118 deletions
--- a/bower.json
+++ b/bower.json
@ -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"
-  }
-}
--- a/gulpfile.js
+++ b/gulpfile.js
@ -29,20 +29,20 @@ gulp.task('styles',function() {
    .pipe(gulp.dest('build/css/fonts'))

  // Compiles CSS
-  gulp.src('css/style.styl')
-    .pipe(stylus())
-    .pipe(autoprefixer())
-    .pipe(gulp.dest('./build'))
-    .pipe(reload({stream:true}))
+  // gulp.src('css/style.styl')
+  //   .pipe(stylus())
+  //   .pipe(autoprefixer())
+  //   .pipe(gulp.dest('./build'))
+  //   .pipe(reload({stream:true}))

  gulp.src('scss/*.scss')
    .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(reload({stream:true}))

 });

@ -118,6 +118,6 @@ gulp.task('scripts', function() {
 // run 'scripts' task first, then watch for future changes
 gulp.task('default', ['images','styles','scripts','browser-sync'], function() {
  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
 });
--- a/index.html
+++ b/index.html
@ -7,7 +7,7 @@
 </head>
 <body>
  <!-- content section -->
-  <section id="content"></section>
+  <div id="content"></div>

  <script type="text/javascript" src="build/build.js"></script>
 </body>
--- a/package.json
+++ b/package.json
@ -34,8 +34,9 @@
  },
  "homepage": "https://github.com/mgonto/react-browserify-spa-seed",
  "dependencies": {
-    "bootstrap": "^3.3.0",
    "flux": "^2.0.1",
+    "foundation-apps": "^1.1.0",
+    "foundation-sites": "^6.0.0",
    "jwt-decode": "^1.1.0",
    "react": "^0.13",
    "react-mixin": "^1.1.0",
--- a/scss/style.scss
+++ b/scss/style.scss
@ -1,42 +1,61 @@
-// Foundation by ZURB
+// Foundation for Apps
+// by ZURB
 // foundation.zurb.com
 // Licensed under MIT Open Source

-// Behold, here are all the Foundation components.
-@import 'foundation/components/grid';
-@import 'foundation/components/accordion';
-@import 'foundation/components/alert-boxes';
-@import 'foundation/components/block-grid';
-@import 'foundation/components/breadcrumbs';
-@import 'foundation/components/button-groups';
-@import 'foundation/components/buttons';
-@import 'foundation/components/clearing';
-@import 'foundation/components/dropdown';
-@import 'foundation/components/dropdown-buttons';
-@import 'foundation/components/flex-video';
-@import 'foundation/components/forms';
-@import 'foundation/components/icon-bar';
-@import 'foundation/components/inline-lists';
-@import 'foundation/components/joyride';
-@import 'foundation/components/keystrokes';
-@import 'foundation/components/labels';
-@import 'foundation/components/magellan';
-@import 'foundation/components/orbit';
-@import 'foundation/components/pagination';
-@import 'foundation/components/panels';
-@import 'foundation/components/pricing-tables';
-@import 'foundation/components/progress-bars';
-@import 'foundation/components/range-slider';
-@import 'foundation/components/reveal';
-@import 'foundation/components/side-nav';
-@import 'foundation/components/split-buttons';
-@import 'foundation/components/sub-nav';
-@import 'foundation/components/switches';
-@import 'foundation/components/tables';
-@import 'foundation/components/tabs';
-@import 'foundation/components/thumbs';
-@import 'foundation/components/tooltips';
-@import 'foundation/components/top-bar';
-@import 'foundation/components/type';
-@import 'foundation/components/offcanvas';
-@import 'foundation/components/visibility';
+$foundation-version: '1.1.0';
+
+// Make sure the charset is set appropriately
+@charset "UTF-8";
+
+// Libraries (let's make Normalize an external dependency eventually)
+@import
+  "vendor/normalize";
+
+// Helpers
+@import
+  "helpers/functions",
+  "helpers/mixins",
+  "helpers/breakpoints",
+  "helpers/images";
+
+// Global styles
+@import
+  "global";
+
+// Components
+@import
+  "components/iconic",
+  "components/action-sheet",
+  "components/block-list",
+  "components/button",
+  "components/button-group",
+  "components/card",
+  "components/extras",
+  "components/forms",
+  "components/grid",
+  "components/title-bar",
+  "components/label",
+  "components/list",
+	"components/menu-bar",
+	"components/modal",
+  "components/motion",
+  "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;
+	}
+}
--- a/src/components/AuthenticatedApp.js
+++ b/src/components/AuthenticatedApp.js
@ -32,14 +32,20 @@ export default class AuthenticatedApp extends React.Component {

  render() {
    return (
-      <div className="container">
-        <nav className="navbar navbar-default">
-          <div className="navbar-header">
-            <a className="navbar-brand" href="/">React Flux app with JWT authentication</a>
-          </div>
-          {this.headerItems}
-        </nav>
+      <div className="grid-frame vertical">
+        {this.headerItems}
+
        <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>
    );
  }
@ -52,27 +58,21 @@ export default class AuthenticatedApp extends React.Component {
  get headerItems() {
    if (!this.state.userLoggedIn) {
      return (
-      <ul className="nav navbar-nav navbar-right">
-        <li>
-          <Link to="login">Login</Link>
-        </li>
-        <li>
-          <Link to="signup">Signup</Link>
-        </li>
-      </ul>)
+        <div className="title-bar">
+          <div className="center title"><a>getExpensy</a></div>
+          <span className="left hide-for-medium"><a zf-toggle="sub-nav">Menu</a></span>
+          <span className="right"><a ui-sref="settings">Settings</a></span>
+        </div>
+      )
    } else {
      return (
-      <ul className="nav navbar-nav navbar-right">
-        <li>
-          <Link to="home">Home</Link>
-        </li>
-        <li>
-          <Link to="quote">Quote</Link>
-        </li>
-        <li>
-          <a href="" onClick={this.logout}>Logout</a>
-        </li>
-      </ul>)
+        <div className="title-bar">
+          <div className="center title"><a>getExpensy</a></div>
+          <span className="left hide-for-medium"><a zf-toggle="sub-nav">Menu</a></span>
+          <span className="right"><a ui-sref="settings">Settings</a></span>
+          <span className="right"><a onClick={this.logout}>Logout</a></span>
+        </div>
+      )
    }
  }
 }
--- a/src/components/Home.js
+++ b/src/components/Home.js
@ -3,6 +3,10 @@ import AuthenticatedComponent from './AuthenticatedComponent'

 export default AuthenticatedComponent(class Home extends React.Component {
  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>
+    );
  }
 });
--- a/src/components/Login.js
+++ b/src/components/Login.js
@ -23,23 +23,9 @@ export default class Login extends React.Component {

  render() {
    return (
-      <div className="login jumbotron center-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>
-      */}
+      <div className="grid-block">
      <a href="#" className="fb-login-button" data-max-rows="1" data-size="large" onClick={this.handleClickFb.bind(this)}>FB Login</a>
-    </div>
+      </div>
    );
  }

--- a/src/components/Signup.js
+++ b/src/components/Signup.js
@ -24,7 +24,7 @@ export default class Signup extends React.Component {

  render() {
    return (
-      <div className="login jumbotron center-block">
+      <div className="grid-block">
        <h1>Signup</h1>
        <form role="form">
        <div className="form-group">