psmattas/Netflix-Clone
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header layout

Browse Source
This commit is contained in:
andres alcocer
2018-11-15 19:59:58 -05:00
parent 65db39c1f0
commit fa3bf3851d
9 changed files with 123 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Header/Header.js
View File

@@ -18,8 +18,11 @@ class Header extends Component {
return (
<header style={backgroundStyle} className="header">
<div className="header__background">
{/* <h1>{this.props.movie.name}</h1> */}
<div className="header__container">
<h1 className="header__container-heading">{this.props.movie.name}</h1>
<button onClick={() => alert("not a moive!")} className="header__container-btnPlay">Play</button>
<button className="header__container-btnMyList">My List</button>
<p className="header__container-overview">{this.props.movie.overview}</p>
</div>
</header>

4
src/containers/App.js
View File

@@ -34,7 +34,7 @@ makeAipCall = (searchItem) => {
movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
// pass in the movie object to our MovieRow component and keep it in a variable called
// movieComponent
const movieComponent = <MovieRow
const movieComponent = <MovieRow
movieDetails={() => this.selectMovieHandler(movie)}
key={movie.id}
movieImage={movieImageUrl}
@@ -110,5 +110,3 @@ makeAipCall = (searchItem) => {
}
export default App;

4
src/containers/Layout/Layout.js
View File

@@ -17,9 +17,9 @@ class Layout extends Component {
this.getMovie();
}
71411
// 71411
getMovie = () => {
// 1) make api call to retrieve movie
const url = "https://api.themoviedb.org/3/tv/71411?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0";
axios.get(url)
.then(res => {

54
src/containers/MovieShowcase/MovieShowcase.js
View File

@@ -1,20 +1,65 @@
import React, { Component } from "react";
import axios from 'axios';
import MovieShowCaseRow from '../MovieShowcase/MovieShowcaseRow/MovieShowcaseRow';
class MovieShowcase extends Component {
state = {
trendingMovieRows: [],
movies: []
}
componentWillMount() {
this.getTrending();
}
getTrending = () => {
const url = 'https://api.themoviedb.org/3/movie/popular?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US&page=1';
axios.get(url)
.then(res => {
console.log(res.data.results);
const results = res.data.results;
let movieRows = [];
results.forEach((movie) => {
const movieImageUrl = "url(https://image.tmdb.org/t/p/original/" + movie.poster_path;
const movieComponent = <MovieShowcase
key={movie.id}
posterUrl={movieImageUrl}
movie={movie}/>
movieRows.push(movieComponent);
})
// update state
this.setState({trendingMovieRows: movieRows})
}).catch(error => {
console.log(error);
})
}
render() {
return (
<div className="movieShowcase">
<h1 className="movieShowcase__heading">New Releases</h1>
<div className="movieShowcase__container">
<div className="movieShowcase__container--movie">movie 1</div>
{/* {this.state.trendingMovieRows} */}
{/* {this.state.movies[0].title} */}
{/* <div className="movieShowcase__container--movie">movie 1</div>
<div className="movieShowcase__container--movie">movie 2</div>
<div className="movieShowcase__container--movie">movie 3</div>
<div className="movieShowcase__container--movie">movie 4</div>
<div className="movieShowcase__container--movie">movie 5</div>
<div className="movieShowcase__container--movie">movie 6</div>
</div>
<div className="movieShowcase__container--movie">movie 6</div> */}
{/* </div> */}
<h1 className="movieShowcase__heading">Trending Now</h1>
{/* <h1 className="movieShowcase__heading">Trending Now</h1>
<div className="movieShowcase__container">
<div className="movieShowcase__container--movie">movie 1</div>
<div className="movieShowcase__container--movie">movie 2</div>
@@ -22,6 +67,7 @@ class MovieShowcase extends Component {
<div className="movieShowcase__container--movie">movie 4</div>
<div className="movieShowcase__container--movie">movie 5</div>
<div className="movieShowcase__container--movie">movie 6</div>
</div> */}
</div>
</div>
)

14
src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js Normal file
View File

@@ -0,0 +1,14 @@
import React, { Component } from 'react';
// `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`;
const movieShowcaseRow = (props) => (
<div>
<div className="shit">
<img src={movieImageUrl} />
</div>
</div>
);
export default movieShowcaseRow;

2
src/static/sass/base/_base.scss
View File

@@ -57,6 +57,6 @@ html {
.container {
display: grid;
grid-template-rows: 47vw min-content min-content min-content;
grid-template-rows: 50vw min-content min-content min-content;
grid-template-columns: 4% repeat(10, 1fr) 4%;
}

1
src/static/sass/components/_modal.scss
View File

@@ -6,6 +6,7 @@
left: 0;
color: #fff;
height: 50rem;
box-shadow: 0 1.5rem 4rem rgba($color-dark, .15);
&__title {
font-size: 4rem;

8
src/static/sass/components/_movieShowcase.scss
View File

@@ -1,6 +1,7 @@
.movieShowcase {
background-color: blue;
background-color: $color-background;
grid-column: 2 / 13;
color: #fff;
&__container {
display: grid;
@@ -12,3 +13,8 @@
}
}
}
.shit {
width: 20rem;
height: 10rem;
}

40
src/static/sass/layout/_header.scss
View File

@@ -1,9 +1,47 @@
.header {
background-color: rebeccapurple;
grid-column: 1 / 13;
display: flex;
&__background {
&__container {
padding-top: 25rem;
padding-left: 4.5rem;
color: #fff;
&-heading {
font-size: 6rem;
padding-bottom: 1rem;
}
&-btnPlay,
&-btnMyList {
cursor: pointer;
font-size: 1.5rem;
color: #fff;
border-radius: 5px;
padding-left: 4rem;
margin-right: 1rem;
padding-right: 4rem;
border: 1px solid rgba(255, 255, 255, .4);
padding-top: 1rem;
background-color: rgba(51, 51, 51, .4);
padding-bottom: 1rem;
&:hover {
color: $color-dark;
background-color: #fff;
transition: all .3s;
}
}
&-overview {
width: 45rem;
line-height: 1.3;
padding-top: 1.5rem;
font-size: 1.8rem;
}
}
}