Skip to content

Commit

Permalink
Added <header> and <main> elements to the 3 pages of the app
Browse files Browse the repository at this point in the history
  • Loading branch information
Erin Doyle committed Sep 2, 2018
1 parent ccf8861 commit 4b52d85
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 72 deletions.
60 changes: 32 additions & 28 deletions src/browse/MovieBrowser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,38 +21,42 @@ const MovieBrowser = ({

return (
<div>
<div className="navbar navbar-dark bg-primary">
<header>
<nav className="navbar navbar-dark bg-primary">
<span className="navbar-text">
Browse Movies
<h1>Browse Movies</h1>
</span>
<button className="btn btn-outline-secondary" onClick={goToWishlist}>Back</button>
</div>
<button className="btn btn-outline-secondary" onClick={goToWishlist}>Back</button>
</nav>
</header>

<ul className="nav nav-pills nav-justified">
<li className="nav-item">
<NavLink to="/browse/action" className="nav-link" activeClassName="active">Action</NavLink>
</li>
<li className="nav-item">
<NavLink to="/browse/drama" className="nav-link" activeClassName="active">Drama</NavLink>
</li>
<li className="nav-item">
<NavLink to="/browse/comedy" className="nav-link" activeClassName="active">Comedy</NavLink>
</li>
<li className="nav-item">
<NavLink to="/browse/scifi" className="nav-link" activeClassName="active">Sci Fi</NavLink>
</li>
<li className="nav-item">
<NavLink to="/browse/fantasy" className="nav-link" activeClassName="active">Fantasy</NavLink>
</li>
</ul>
<main>
<ul className="nav nav-pills nav-justified">
<li className="nav-item">
<NavLink to="/browse/action" className="nav-link" activeClassName="active">Action</NavLink>
</li>
<li className="nav-item">
<NavLink to="/browse/drama" className="nav-link" activeClassName="active">Drama</NavLink>
</li>
<li className="nav-item">
<NavLink to="/browse/comedy" className="nav-link" activeClassName="active">Comedy</NavLink>
</li>
<li className="nav-item">
<NavLink to="/browse/scifi" className="nav-link" activeClassName="active">Sci Fi</NavLink>
</li>
<li className="nav-item">
<NavLink to="/browse/fantasy" className="nav-link" activeClassName="active">Fantasy</NavLink>
</li>
</ul>

<div>
<BrowseList
movieList={moviesInGenre}
wishlist={wishlist}
movieActions={movieActions}
/>
</div>
<div>
<BrowseList
movieList={moviesInGenre}
wishlist={wishlist}
movieActions={movieActions}
/>
</div>
</main>
</div>
);
};
Expand Down
39 changes: 23 additions & 16 deletions src/login/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,30 @@ const Login = ({ history }) => {
return (
<div className="login row align-items-center">
<div className="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5">
<div className="card bg-primary">
<h5 className="card-header">
Movie Wishlist Login
</h5>
<div className="card-body">
<div className="form-group">
<label>Username</label>
<input type="username" className="form-control" placeholder="Enter username" />
<header>
<h1>Movie Wishlist</h1>
</header>
<main>
<form>
<div className="card bg-primary">
<div className="card-header">
<h2>Login</h2>
</div>
<div className="card-body">
<div className="form-group">
<label>Username</label>
<input type="username" className="form-control" placeholder="Enter username" />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" placeholder="Password" />
<small className="form-text text-muted">Passwords are case sensitive</small>
</div>
<button type="button" className="btn btn-primary" onClick={goToWishlist}>Login</button>
</div>
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" placeholder="Password" />
<small className="form-text text-muted">Passwords are case sensitive</small>
</div>
<button type="submit" className="btn btn-primary" onClick={goToWishlist}>Login</button>
</div>
</div>
</form>
</main>
</div>
</div>
);
Expand Down
58 changes: 30 additions & 28 deletions src/wishlist/MovieWishlist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,37 +60,39 @@ class MovieWishlist extends Component {

return (
<div>
<div className="navbar navbar-dark bg-primary">
<header className="navbar navbar-dark bg-primary">
<span className="navbar-text">
Movie Wishlist
<h1>Movie Wishlist</h1>
</span>
<button className="btn btn-outline-secondary" onClick={goToBrowse}>Add</button>
</div>

<ul className="nav nav-pills nav-justified">
<li className="nav-item">
<NavLink to="/wishlist/unwatched" className="nav-link" activeClassName="active">Unwatched</NavLink>
</li>
<li className="nav-item">
<NavLink to="/wishlist/watched" className="nav-link" activeClassName="active">Watched</NavLink>
</li>
</ul>

{Object.keys(wishlist).length
? <div>
<WishList
movieList={wishlist}
watched={match.params.status === 'watched'}
movieActions={movieActions}
/>
</div>
: <p>No Movies in your Wish List! <Link to="/browse">Add some</Link>!</p>
}

{ showEditor
? <MovieEditor movie={movieInEditing} updateMovie={this.handleUpdateMovie} />
: null
}
</header>

<main>
<ul className="nav nav-pills nav-justified">
<li className="nav-item">
<NavLink to="/wishlist/unwatched" className="nav-link" activeClassName="active">Unwatched</NavLink>
</li>
<li className="nav-item">
<NavLink to="/wishlist/watched" className="nav-link" activeClassName="active">Watched</NavLink>
</li>
</ul>

{Object.keys(wishlist).length
? <div>
<WishList
movieList={wishlist}
watched={match.params.status === 'watched'}
movieActions={movieActions}
/>
</div>
: <p>No Movies in your Wish List! <Link to="/browse">Add some</Link>!</p>
}

{ showEditor
? <MovieEditor movie={movieInEditing} updateMovie={this.handleUpdateMovie} />
: null
}
</main>
</div>
);
}
Expand Down

0 comments on commit 4b52d85

Please sign in to comment.