Add nav, links not working yet

jsjaspreet · Feb 24, 2017 · 0f726e0 · 0f726e0
1 parent 7c9bfe0
commit 0f726e0
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 29 deletions.
diff --git a/src/client/views/Fitness/index.js b/src/client/views/Fitness/index.js
@@ -18,40 +18,12 @@ class FitnessRoute extends Relay.Route {
 
 class Fitness extends Component {
 
-  handleSubmit = (e) => {
-    e.preventDefault()
-    Relay.Store.update(
-      new CreateWorkoutMutation({
-        workout: this.refs.Workout.value,
-        workoutDate: this.refs.WorkoutDate.value,
-        duration: this.refs.Duration.value,
-        calories: this.refs.Calories.value,
-        fatBurnTime: this.refs.FatBurnTime.value,
-        fitnessTime: this.refs.FitnessTime.value,
-        avgHeartRate: this.refs.AvgHeartRate.value,
-        maxHeartRate: this.refs.MaxHeartRate.value,
-        workoutType: this.refs.WorkoutType.value,
-        store: this.props.store
-      })
-    )
-  }
 
 
   render() {
     return (
       <div className={styles.fitnessBody}>
-        <form onSubmit={this.handleSubmit}>
-          <input type="text" placeholder="Workout" ref="Workout"/>
-          <input type="text" placeholder="WorkoutDate" ref="WorkoutDate"/>
-          <input type="text" placeholder="Duration" ref="Duration"/>
-          <input type="text" placeholder="Calories" ref="Calories"/>
-          <input type="text" placeholder="FatBurnTime" ref="FatBurnTime"/>
-          <input type="text" placeholder="FitnessTime" ref="FitnessTime"/>
-          <input type="text" placeholder="AvgHeartRate" ref="AvgHeartRate"/>
-          <input type="text" placeholder="MaxHeartRate" ref="MaxHeartRate"/>
-          <input type="text" placeholder="WorkoutType" ref="WorkoutType"/>
-          <button type="submit">Add Workout</button>
-        </form>
+
 
         <div className={styles.fitnessCardsContainer}>
           {

diff --git a/src/client/views/Navigation/index.js b/src/client/views/Navigation/index.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import styles from './styles.css'
+
+class Nav extends Component {
+
+  render() {
+    return (
+      <div className={styles.nav}>
+        <span className={styles.workoutBuddy}>
+          Workout Buddy
+        </span>
+        <span className={styles.verticalRuleNav}/>
+        <span className={styles.navLink}>Input</span>
+        <span className={styles.navLink}>Workouts</span>
+        <span className={styles.navLink}>Trends</span>
+      </div>
+    )
+  }
+}
+
+export default Nav
diff --git a/src/client/views/Navigation/styles.css b/src/client/views/Navigation/styles.css
@@ -0,0 +1,29 @@
+.nav {
+    display: flex;
+    background-color: #E8DDB5;
+    padding: 20px 10px 20px 10px;
+}
+
+.verticalRuleNav {
+    margin-left: 30px;
+    margin-right: 30px;
+    height: 3em;
+    border: 1px solid;
+    color: grey;
+    opacity: 0.6;
+}
+
+.navLink {
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-right: 30px;
+    font-family: 'Open Sans', sans-serif;
+}
+
+.workoutBuddy {
+    font-family: 'Quicksand', sans-serif;
+    font-size: 2.5em;
+    margin-top:auto;
+    margin-bottom:auto;
+    margin-left:22px;
+}
diff --git a/src/client/views/WorkoutForm/index.js b/src/client/views/WorkoutForm/index.js
@@ -43,10 +43,42 @@ class WorkoutInput extends React.Component {
     }
   }
 
+  //handleSubmit = (e) => {
+  //  e.preventDefault()
+  //  Relay.Store.update(
+  //    new CreateWorkoutMutation({
+  //      workout: this.refs.Workout.value,
+  //      workoutDate: this.refs.WorkoutDate.value,
+  //      duration: this.refs.Duration.value,
+  //      calories: this.refs.Calories.value,
+  //      fatBurnTime: this.refs.FatBurnTime.value,
+  //      fitnessTime: this.refs.FitnessTime.value,
+  //      avgHeartRate: this.refs.AvgHeartRate.value,
+  //      maxHeartRate: this.refs.MaxHeartRate.value,
+  //      workoutType: this.refs.WorkoutType.value,
+  //      store: this.props.store
+  //    })
+  //  )
+  //}
+
+
   render() {
     const { finished, stepIndex } = this.state;
     const contentStyle = { margin: '0 16px' };
 
+    // <form onSubmit={this.handleSubmit}>
+    //   <input type="text" placeholder="Workout" ref="Workout"/>
+    //   <input type="text" placeholder="WorkoutDate" ref="WorkoutDate"/>
+    //   <input type="text" placeholder="Duration" ref="Duration"/>
+    //   <input type="text" placeholder="Calories" ref="Calories"/>
+    //   <input type="text" placeholder="FatBurnTime" ref="FatBurnTime"/>
+    //   <input type="text" placeholder="FitnessTime" ref="FitnessTime"/>
+    //   <input type="text" placeholder="AvgHeartRate" ref="AvgHeartRate"/>
+    //   <input type="text" placeholder="MaxHeartRate" ref="MaxHeartRate"/>
+    //   <input type="text" placeholder="WorkoutType" ref="WorkoutType"/>
+    //   <button type="submit">Add Workout</button>
+    // </form>
+
     return (
 
       <div className={styles.fitnessBody}>

diff --git a/src/client/views/index.js b/src/client/views/index.js
@@ -7,13 +7,15 @@ import {
 } from 'react-router-dom'
 import { FitnessContainer, FitnessRoute } from './Fitness'
 import WorkoutForm from './WorkoutForm'
+import Nav from './Navigation'
 
 class App extends Component {
   render() {
     return (
       <MuiThemeProvider>
         <Router>
           <div>
+            <Nav/>
             <Route exact path="/" children={({ match }) => {
               return match ?
                 <Relay.RootContainer

diff --git a/src/server/index.html b/src/server/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Quicksand:300" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 </head>