Merge pull request #216 from jkwening/207-nav-bar

207 nav bar

client/src/components/AccountForm/index.js

@@ -94,7 +94,6 @@ export default class AccountForm extends Component {
       <button type="button" className={[style.formChild, style.regBtn].join(' ')}
         onClick={this.routeToRegister}>CREATE AN ACCOUNT</button>
     </div>;
-    let link1 = "";
     let link2 = <p class={style.link2}><a href="/forgot-password">forgot password?</a></p>;
 
     if(path === REGISTER_PATH){
@@ -106,23 +105,36 @@ export default class AccountForm extends Component {
         <input class={style.formChild} name="confirm_password" type="password" placeholder="confirm password"
           value={confirm_password} onInput={linkState(this, 'confirm_password')} required/>;
       submit_button = <button class={style.formChild}>SUBMIT</button>;
-      link1 = <p class={style.formChild}><a href="/signin">Sign in</a></p>;
       link2 = "";
     }
 
     if(path === RESET_PATH){
       form_header = "Reset Password";
-      email_input = <div>Email: <b>{user ? user.email : ''}</b><input name="email" type="hidden" value={user ? user.email : ''}/></div>;
-      password_input =  <div>Current password: <input id="password" name="password" type="password" value={password} onInput={linkState(this, 'password')}/></div>;
-      new_password_input = <div>New password: <input name="new_password" type="password" value={new_password} onInput={linkState(this, 'new_password')}/></div>;
-      confirm_password_input = <div>Confirm new password: <input name="confirm_password" type="password" value={confirm_password} onInput={linkState(this, 'confirm_password')}/></div>;
-      submit_button = <div><button>Reset!</button></div>;;
-      link1 = "";
+      name_input =
+        <div>
+          <p>To change user info:</p>
+          <input class={style.formChild} name="name" type="text" placeholder="Enter new name"
+            value={name} onInput={linkState(this, 'name')}/>
+          <input class={style.formChild} id="email" name="email" type="email" placeholder='Enter new email address' 
+            value={email} onInput={linkState(this, 'email')}/>
+      </div>;
+      email_input = "";
+      password_input =
+        <div>
+          <p>To change password:</p>
+          <input class={style.formChild} id="password" name="password" type="password" placeholder="Enter current password"
+            value={password} onInput={linkState(this, 'password')}/>
+          <input class={style.formChild} name="new_password" type="password" placeholder="Enter new password"
+            value={new_password} onInput={linkState(this, 'new_password')}/>
+          <input class={style.formChild} name="confirm_password" type="password" placeholder="Confirm new password"
+            value={confirm_password} onInput={linkState(this, 'confirm_password')}/>
+        </div>;
+      submit_button = <button class={style.formChild}>Update</button>;
       link2 = "";
     }
       return (
         <div class={style.inherit}>
-          <img class={style.logo} src='../../assets/logos/navi_logo_small.png' alt='Navi logo' />
+          <img class={style.logo} src='../../assets/icons/leaflet/SVG/darkLogo.svg' alt='Navi logo' />
           <div>{form_message}</div>
           <div>
             <form class={style.form} onSubmit={this.doSubmit}>
@@ -132,12 +144,10 @@ export default class AccountForm extends Component {
               {new_password_input}
               {confirm_password_input}
               {submit_button}
-              {link1}
             </form>
           </div>
           {link2}
         </div>
       );
     }
-  // }
 }

client/src/components/AccountForm/style.css

@@ -1,10 +1,3 @@
-
-.signOut a{
-    padding: 5px;
-    font-weight: bold;
-    color: green;
-}
-
 .inherit {
     display: inherit;
     height: inherit;
@@ -15,11 +8,12 @@
     display: inherit;
     margin: auto;
     padding: 2vh;
+    width: 50%;
 }
 
 .form {
     display: grid;
-    padding: 5vh;
+    padding: 0 5vh;
     height: 70vh;
     align-content: flex-start;
 }
@@ -70,16 +64,16 @@
 .link2 {
     display: block;
     position: fixed;
-    right: 0px;
-    padding: 2vh;
+    right: 5vw;
+    bottom: 1vh;
     font-size: 1.1em;
     color: blue;
 }
 
 button {
-    background-color: turquoise;
+    background-color: #5A98A1;
 }
 
 .regBtn {
-    background-color: darkcyan;
-}
+    background-color: #2c5b61;
+}

client/src/components/ForgotPasswordForm/index.js

@@ -5,17 +5,16 @@ import style from './style';
 
 export default class ForgotPasswordForm extends Component {
     render() {
-        return (<div class={style['forgot-password-form']}>
-
-            <h1>We will send you a temporary password, enter your email address</h1>
-            <form action="/">
-                <span>Email: </span><input type="text" name="email"/><br/>
-                <br/>
-                <input type="submit" value="Submit"/>
+        return (
+        <div class={style['forgot-password-form']}>
+            <h2>Forgot Your Password?</h2>
+            <p>Enter your email address below to reset your password.</p>
+            <form action="/" class={style.form}>
+                <input type="email" name="email" placeholder="email address"
+                  class={style.formChild} required/>
+                <button type="button" class={style.formChild}>RESET PASSWORD</button>
             </form>
-            <a class={style.active} href="/register">register</a>
-            <br/>
-            <a class={style.active} href="/signin">sign in</a>
+            <p>Not a member? <a href="/register">Sign up!</a></p>
         </div>);
     }
 }

client/src/components/ForgotPasswordForm/style.css

@@ -1,5 +1,43 @@
 .forgot-password-form {
-    padding: 56px 20px;
-    min-height: 100%;
+    width: inherit;
+    height: inherit;
+    margin-top: 15vh;
+}
+
+.forgot-password-form > h2 {
+    margin: auto;
+    text-align: center;
+}
+
+.forgot-password-form > p {
+    padding: 3vw;
+    text-align: center;
+    font-size: 1.1em;
+}
+
+.form {
+    display: grid;
+    padding: 0 5vh;
+    align-content: flex-start;
+}
+
+.formChild {
+    display: block;
+    margin: 2vh auto;
     width: 100%;
+    padding: 3vw;
+    border-color: lightslategray;
+    border-radius: 8px;
+    font-size: 1.2em;
+}
+
+.register {
+    display: block;
+    position: fixed;
+    bottom: 5vh;
+}
+
+.register > p {
+    text-align: center;
 }
+

client/src/components/LeafletOsmMap/MapPane.js

@@ -3,7 +3,7 @@ import { h, Component } from 'preact';
 export default class MapPane extends Component {
     render() {
         const styles = {
-            height: this.props.height,  // HAVE TO SET HEIGHT TO RENDER MAP
+            height: this.props.paneHeight,  // HAVE TO SET HEIGHT TO RENDER MAP
         }
         return (
             <div id="map" style={styles}/>

client/src/components/LeafletOsmMap/index.js

@@ -230,7 +230,7 @@ export default class LeafletOSMMap extends Component {
         <Search position={this.state.mapCenter} map={this.state.map}>
           <SearchResults />
         </Search>
-        <MapPane height={screen.height} />
+        <MapPane paneHeight={this.props.paneHeight} />
       </div>
     );
   }

client/src/components/Logo/index.js

@@ -8,7 +8,7 @@ export default class Logo extends Component {
 		return (
 			<div class={style.logo}>
 				<img src='../assets/logos/navi_logo.png'/>
-				<h3>Welcome to {APP_NAME}</h3>
+				<h3>Welcome!</h3>
 			</div>
 		);
 	}

client/src/components/Nav/index.js

@@ -1,41 +1,33 @@
 import {h, Component} from 'preact';
+import { route } from 'preact-router';
 import style from './style.css';
 
 export default class Nav extends Component {
+  constructor(props) {
+    super(props);
 
-  componentDidMount() {
-    let navIcon = document.getElementsByClassName(style.navIcon)[0];
-    let linkContainer = document.getElementsByClassName(style.linkContainer)[0];
-    linkContainer.style.display = "none";
-    navIcon.onclick = function (e) {
-      e.preventDefault();
-      var x = linkContainer;
-      if (x.style.display === "block") {
-        x.style.display = "none";
-      } else {
-        x.style.display = "block";
-      }
-      return false;
-    }
+    this.routeToHome = this.routeToHome.bind(this);
+    this.routeToProfile = this.routeToProfile.bind(this);
+  } 
 
-    let links = document.getElementsByClassName(style.link);
-    for (let link of links) {
-      link.onclick = function () {
-        linkContainer.style.display = "none";
-      }
-    }
-  }
+  routeToHome() {
+    route('/', true);
+  };
+
+  routeToProfile() {
+    route('/profile', true);
+  };
 
   render() {
+    const styles = {
+      height: this.props.navHeight,
+    }
     return (
-      <div class={style.nav}>
-        <a class={style.navIcon} href="">&#9776;</a>
-        <div class={style.linkContainer}>
-          <p><a href="/" class={style.link}>Home</a></p>
-          <p><a href="/maps" class={style.link}>Maps</a></p>
-          <p><a href="/directions" class={style.link}>Directions</a></p>
-          <p><a href="/profile" class={style.link}>Profile</a></p>
-        </div>
+      <div class={style.nav} style={styles}>
+        <img src='../../assets/icons/leaflet/SVG/NaviHomeIcon.svg' alt='Home screen icon'
+          class={style.homeIcon} onClick={this.routeToHome}/>
+        <img src='../../assets/icons/leaflet/SVG/ProfileIcon.svg' alt='Profile page icon'
+          class={style.profileIcon} onClick={this.routeToProfile}/>
       </div>
     );
   }

client/src/components/Nav/style.css

@@ -1,26 +1,17 @@
 .nav {
 	width: 100%;
-	height: 5vh;
+	background: linear-gradient(to right, #5A98A1,#2c5b61);
+	display: block;
 }
 
-.navIcon{
-	height: 40px;
-	background-color:white;
-	position: relative;
-	top: 50%;
-	transform: translateY(-50%);
-	padding: 10px;
+.profileIcon {
+	padding: 2vw;
+	height: inherit;
+	position: fixed;
+	right: 0px;
 }
 
-.linkContainer{
-	display: none;
-	background-color: white;
-	position: absolute;
-	top: 40px;
-	padding: 10px;
-	z-index:1;
+.homeIcon {
+	padding: 2vw;
+	height: inherit;
 }
-
-.link{
-
-}

client/src/components/app.js

@@ -19,10 +19,16 @@ import SignOut from '../routes/signout';
 // import Register from '../routes/register';
 import Settings from '../routes/settings';
 
-// import Home from 'async!../routes/home';
-// import Profile from 'async!../routes/profile';
+// Available screen real state after factoring space for navbar
+const AVAIL_PANE_HEIGHT = screen.availHeight * 0.93;
 
 export default class App extends Component {
+	constructor() {
+		super();
+		this.state = {
+			navbarHeight: screen.availHeight - AVAIL_PANE_HEIGHT
+		};
+	}
 	/** Gets fired when the route changes.
 	 *	@param {Object} event		"change" event from [preact-router](http://git.io/preact-router)
 	 *	@param {string} event.url	The newly routed URL
@@ -34,24 +40,20 @@ export default class App extends Component {
 	render() {
 		return (
 			<div id="app">
-				<Match path="/">
-					{ ({ matches, path, url }) => matches && (
-						<Logo />
-					) }
-				</Match>
+				<Nav navHeight={this.state.navbarHeight}/>
 				<Router onChange={this.handleRoute}>
-					<Home path="/" />
+					<Home path="/" paneHeight={AVAIL_PANE_HEIGHT}/>
 					<Profile path="/profile/" user="me" />
 					<Profile path="/profile/:user" />
-					<Account path="/register" />
-					<Account path="/signin"/>
-					<Account path="/forgot-password"/>
-          				<Account path="/reset-password"/>
-          				<Settings path="/settings"/>
+					<Account path="/register" paneHeight={AVAIL_PANE_HEIGHT}/>
+					<Account path="/signin" paneHeight={AVAIL_PANE_HEIGHT}/>
+					<Account path="/forgot-password" paneHeight={AVAIL_PANE_HEIGHT}/>
+          				<Account path="/reset-password" paneHeight={AVAIL_PANE_HEIGHT}/>
+          				<Settings path="/settings" paneHeight={AVAIL_PANE_HEIGHT}/>
 					<SignOut path="/signout"/>
 					<Directions path="/directions" />
 					<Pins path="/pins" />
-					<Maps path="/maps" />
+					<Maps path="/maps" paneHeight={AVAIL_PANE_HEIGHT}/>
 				</Router>
 			</div>
 		);

client/src/routes/account/index.js

@@ -27,11 +27,14 @@ export default class Account extends Component {
         <AccountForm path={LOGIN_PATH}/>
 			)
 		}
+
+		const styles = {
+			height: this.props.paneHeight
+		}
+
 		return (
-			<div class={style.main}>
-				<div class={style.inherit}>
-					{renderedForm}
-				</div>
+			<div class={style.main} style={styles}>
+				{renderedForm}
 			</div>
 		);
 	}

client/src/routes/account/style.css

@@ -6,9 +6,7 @@
 
 .main {
 	display: block;
-	height: 93vh;
 	width: 100vw;
 	position: fixed;
 	top: 7vh;
-	background-color: snow;
 }