Skip to content

Feat/navbar #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
charlestol merged 8 commits into from
Sep 10, 2018
Merged

Feat/navbar #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a538cd1
Fixed parallax. navbar, not finalized version
jsanchez254 Aug 18, 2018
f919dbb
adjusted navbar more; added user log in; added icons
jsanchez254 Aug 20, 2018
9dd61f9
apply button links to hackmerced sign up form
jsanchez254 Aug 20, 2018
4c15084
Removed the React-Native
adriandarian Sep 4, 2018
24d2779
deleted package-lock.json, now it runs with yarn. Navbar layour and u…
jsanchez254 Sep 9, 2018
c4b6cc3
Merge branch 'feat/navbar' of https://github.com/HackMerced/HackMerce…
jsanchez254 Sep 9, 2018
1503cae
made apply form and volunteer form prettier. Added handle submit func…
jsanchez254 Sep 9, 2018
91f41a7
fixed issues so pull request can be approved
jsanchez254 Sep 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
"react-parallax": "^1.8.0",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"styled-components": "^3.3.3"
"styled-components": "^3.3.3",
"yarn-install": "^1.0.0"
},
"scripts": {
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
Expand Down
6 changes: 6 additions & 0 deletions client/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,15 @@ import FAQ from './components/faq';
import Signup from './components/signUP';
import Volunteer from './components/signUPVolunteer';
import aboutUS from './components/aboutUS';
import logIn from './components/logIn';

import './assets/css/main.css';
import 'bulma/css/bulma.css';
import "./assets/css/team.css";
import "./assets/css/underlineLink.css";

import "font-awesome/css/font-awesome.css";


class App extends Component {
render() {
Expand All @@ -29,6 +34,7 @@ class App extends Component {
<Route path ='/faqs' component={FAQ}/>
<Route path ='/Volunteer' component={Volunteer} />
<Route path ='/aboutus' component={aboutUS} />
<Route path = "/login" component = {logIn}/>
<Footer/>
</div>
</Router>
Expand Down
1 change: 1 addition & 0 deletions client/src/assets/css/default.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added client/src/assets/css/navbar1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 7 additions & 1 deletion client/src/assets/css/signUp.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
.inputh{
background-color: white;
border-color: grey;
border-color: black;
color: #363636;
box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1);
max-width: 100%;
width: 100%;
height: 30px;
}

.title1{
font-size: 30px;
font-weight: bold;
border-bottom: 6px solid black;
}
23 changes: 23 additions & 0 deletions client/src/assets/css/underlineLink.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
#underline::after{
content: '';
display: block;
width: 0;
height: 3px;
background: white;
transition: width .3s
}

#underline:hover::after{
width: 100%;
transition: width .3s;
}

#underline{
font-size: 30px;
}

.position{
position:static;
}


Binary file added client/src/assets/img/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/img/ucmerced.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 19 additions & 17 deletions client/src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,29 @@ import React, { Component } from 'react';
import { Link } from 'react-router-dom';

var FontAwesome = require('react-fontawesome');

class Footer extends Component {
render() {
return (
<nav className="menu2">
<ul className="listfoot">
<li>
<Link to="/contactus"><FontAwesome className = "fa-mail-forward"/>Contact Us</Link>

</li>
<li>
<Link to="/aboutus"><FontAwesome className = "fa-group"/>About Us</Link>
</li>
<li>
<Link to="/faqs"><FontAwesome className = "fa-question"/>FAQs</Link>
</li>
<li>
<Link to="/Volunteer"><FontAwesome className = "fa-hand-stop-o"/>Volunteers</Link>
</li>
</ul>
</nav>
<section className="hero is-primary is-bold">
<div className = "hero-head">
<nav className="navbar is-bold">
<div className = "navbar-end">
<div className = "navbar-item">
<FontAwesome className="fa-mail-forward fas fa-2x"/><Link id = "underline" to="/contactus">Contact Us</Link>
</div>

<div className = "navbar-item">
<FontAwesome className="fa-question fas fa-2x"/><Link id = "underline" to="/faqs">FAQs</Link>
</div>

<div className = "navbar-item">
<FontAwesome className="fa-hand-stop-o fas fa-2x"/><Link id = "underline" to="/Volunteer">Volunteers</Link>
</div>
</div>
</nav>
</div>
</section>
);
}
}
Expand Down
48 changes: 37 additions & 11 deletions client/src/components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,46 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Columns } from 'react-bulma-components';
//import { Columns } from 'react-bulma-components';

var FontAwesome = require('react-fontawesome');

class Header extends Component {

render() {
return (
<div className="navbar">
<Columns className="navbar-container">
<div className = "position">
<section className="hero is-primary is-bold">
<div className = "hero-head">
<nav className="navbar">
<div className = "navbar-end">
<div className = "navbar-item">
<FontAwesome className="fa-home fas fa-2x"/><Link id = "underline" style = {this.styles} to="/" className="Home">Home</Link>
</div>

<div className = "navbar-item">
<FontAwesome className="fa-user fas fa-2x"/><Link id = "underline" style = {this.styles} to="/logIn" className="Home">Log In</Link>
</div>

<div className = "navbar-item">
<FontAwesome className="fa-group fas fa-2x"/><Link id = "underline" to="/aboutus">About Us</Link>
</div>

<div className = "navbar-item">
<FontAwesome className="fa-clock-o fas fa-2x"/> <Link id = "underline" style = {this.styles} to="/timeline" className="Timeline">Timeline</Link>
</div>
</div>


</nav>
</div>
</section>
</div>
);
}
}

export default Header;

/*<Columns className="navbar-container">
<Columns.Column className="navbar-contents">
<Link to="/" className="Home"><FontAwesome className="fa-home"/>Home</Link>
</Columns.Column>
Expand All @@ -18,10 +50,4 @@ class Header extends Component {
<Columns.Column className="navbar-contents">
<Link to="/timeline" className="Timeline"><FontAwesome className="fa-clock-o"/>Timeline</Link>
</Columns.Column>
</Columns>
</div>
);
}
}

export default Header;
</Columns>*/
6 changes: 1 addition & 5 deletions client/src/components/aboutUS.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
import React, { Component } from 'react';

import Header from "../components/Header";
import Footer from "../components/Footer";

//const FontAwesome = require('react-fontawesome');

class aboutUS extends Component {
render() {
return (
<div className = "aboutUS">
<Header/>

<i className = "fas fa-home"></i>
<div class = "columns">
Expand Down Expand Up @@ -51,7 +47,7 @@ class aboutUS extends Component {



<Footer/>

</div>
);
}
Expand Down
77 changes: 77 additions & 0 deletions client/src/components/logIn.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import React, { Component } from 'react';
import logo from "../assets/img/logo.png";
var FontAwesome = require('react-fontawesome');

class logIn extends Component {
constructor(props) {
super(props);
this.state = {
myEmail: '',
myPassword: ''
};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleInputChange(EventTarget) {
this.setState({ [EventTarget.target.name] : EventTarget.target.value});
}

handleSubmit(EventTarget) {
alert('LOGGED IN!!!');
EventTarget.preventDefault();
}
render() {
return (
<section className = "hero is-primary is-fullheight">
<div className = "hero-body">
<div className = "container">
<div className = "columns is-centered">
<div className = "column is-4">
<form className = "box" onSubmit={this.handleSubmit}>
<div className = "field has-text-centered">
<img src = {logo} alt ="" style ={{height: 200, width: 200}}/>

</div>

<div className = "field">
<label>Email</label>
<div className = "control has-icons-left">
<input name = "myEmail" className = "input" type = "email" placeholder = "Enter Email"/>
<span className = "icon is-small is-left">
<FontAwesome className = "fa-envelope"/>
</span>
</div>
</div>

<div className = "field">
<label>Password</label>
<div className = "control has-icons-left">
<input name = "myPassword" className = "input" type = "password" placeholder = "Enter Password"/>
<span className = "icon is-small is-left">
<FontAwesome className = "fa-lock"/>
</span>
</div>
</div>

<div className = "field">
<button className = "button is-info is-outlined" type="submit" value = "Submit">
Login
</button>

</div>

</form>
</div>
</div>
</div>
</div>


</section>

);
}
}

export default logIn;
48 changes: 27 additions & 21 deletions client/src/components/signUP.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { Component } from 'react';
import "../assets/css/signUp.css";

//var FontAwesome = require('react-fontawesome');

class Signup extends Component {
Expand Down Expand Up @@ -34,53 +33,59 @@ class Signup extends Component {
render() {
return (
<signup>
<h2>Hacker Sign-Up Form</h2>
<center><span className = "title1">Hacker Sign-Up Form</span></center>
<br/>
<div className = "columns is-centered">
<div className = "column is-4-desktop">

<form class = "box" onSubmit={this.handleSubmit}>


<form className = "box" onSubmit={this.handleSubmit}>
<div className = "field">
<label className = "label" >Name: </label>
<input className = "inputh" name="myName" type="text" onChange={this.handleInputChange} />
<input className = "input" name="myName" type="text" onChange={this.handleInputChange} />
</div>

<div className = "field">
<label className = "label">Email: </label>
<input className = "inputh" name="myEmail" type="text" onChange={this.handleInputChange} />
<input className = "input" name="myEmail" type="text" onChange={this.handleInputChange} />
</div>

<div className = "field">
<label className = "label">Phone Number: </label>
<input className = "inputh" name="myPhone" type="text" onChange={this.handleInputChange} />
<input className = "input" name="myPhone" type="text" onChange={this.handleInputChange} />
</div>

<div className = "field">
<label className = "label">School: </label>
<input className = "inputh" name="mySchool" type="text" onChange={this.handleInputChange} />
</div>

<div className = "field">
<label className = "label">Age: </label>
<input className = "inputh" name="myAge" type="number" onChange={this.handleInputChange} />
<input className = "input" name="mySchool" type="text" onChange={this.handleInputChange} />
</div>

<div className = "columns">
<div className = "column is-6">
<div className = "field">
<label className = "label">Age: </label>
<input className = "input" name="myAge" type="number" onChange={this.handleInputChange} />
</div>
</div>

<div className = "field">
<label className = "label">Gender: </label>
<input className = "inputh" name="myGender" type="text" onChange={this.handleInputChange} />
<div className = "column is-6">
<div className = "field">
<label className = "label">Gender: </label>
<input className = "input" name="myGender" type="text" onChange={this.handleInputChange} />
</div>
</div>
</div>


<label className = "label">Shirt Size: </label>
<input className = "inputh" name="myShirt" type="text" onChange={this.handleInputChange} />
<input className = "input" name="myShirt" type="text" onChange={this.handleInputChange} />


<label className = "label">Dietary Restrictions: </label>
<input className = "inputh" name="myDiet" type="text" onChange={this.handleInputChange} />
<input className = "input" name="myDiet" type="text" onChange={this.handleInputChange} />


<label className = "label">Allergies </label>
<input className = "inputh" name="myAllergies" type="text" onChange={this.handleInputChange} />
<input className = "input" name="myAllergies" type="text" onChange={this.handleInputChange} />

<label>
Show me yo Resume
Expand All @@ -89,10 +94,11 @@ class Signup extends Component {
<br />
<input className = "button is-success" type="submit" value="Submit" />
</form>
</div>
</div>
</div>

</signup>

);
}
}
Expand Down
Loading