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

implemented movie carrosuel

Browse Source
This commit is contained in:
andres alcocer
2018-11-16 17:04:29 -05:00
parent 466b115f44
commit a179fc74c0
2 changed files with 47 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,28 +9,28 @@ class MovieShowcase extends Component {
movies: [] movies: []
} }
// componentWillMount() { componentWillMount() {
// this.getTrending(); this.getTrending();
// } }
getTrending = () => { getTrending = () => {
const url = 'https://api.themoviedb.org/3/movie/popular?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US&page=1'; const url = 'https://api.themoviedb.org/3/movie/popular?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US&page=1';
axios.get(url) axios.get(url)
.then(res => { .then(res => {
console.log(res.data.results[0]); console.log(res.data.results);
const movie = res.data.results[0]; const results = res.data.results;
let movieRows = []; let movieRows = [];
// results.forEach((movie) => { results.forEach((movie) => {
const movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.poster_path; const movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.backdrop_path;
console.log(movieImageUrl); console.log(movieImageUrl);
const movieComponent = <MovieShowCaseRow const movieComponent = <MovieShowCaseRow
key={movie.id} key={movie.id}
posterUrl={movieImageUrl} posterUrl={movieImageUrl}
movie={movie}/> movie={movie}/>
movieRows.push(movieComponent); movieRows.push(movieComponent);
// }) })
// update state // update state
this.setState({trendingMovieRows: movieRows}) this.setState({trendingMovieRows: movieRows})
@@ -47,7 +47,7 @@ class MovieShowcase extends Component {
return <div className="movieShowcase"> return <div className="movieShowcase">
<h1 onClick={this.getTrending} className="movieShowcase__heading"> <h1 className="movieShowcase__heading">
New Releases New Releases
</h1> </h1>
<div className="movieShowcase__container"> <div className="movieShowcase__container">
@@ -55,9 +55,9 @@ class MovieShowcase extends Component {
{/* {/* <div className="movieShowcase__container--movie">movie 1</div> */} {/* {/* <div className="movieShowcase__container--movie">movie 1</div> */}
{/* <div className="movieShowcase__container--movie"> */} {/* <div className="movieShowcase__container--movie"> */}
{this.state.trendingMovieRows} {this.state.trendingMovieRows}
{/* {this.state.trendingMovieRows}
{this.state.trendingMovieRows} {this.state.trendingMovieRows}
{this.state.trendingMovieRows} {this.state.trendingMovieRows} */}
{this.state.trendingMovieRows}
{/* </div> */} {/* </div> */}
{/* <div className="movieShowcase__container--movie">movie 3</div> {/* <div className="movieShowcase__container--movie">movie 3</div>
<div className="movieShowcase__container--movie">movie 4</div> <div className="movieShowcase__container--movie">movie 4</div>

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

@@ -7,44 +7,50 @@
padding-top: 2rem; padding-top: 2rem;
} }
&__container { &__container { // row inner
display: grid; // z-index: 10000000;
grid-template-columns: repeat(6, 1fr); transition: transform 450ms;
column-gap: .5rem; overflow: scroll;
flex: 1 1 auto;
display: grid;
grid-template-columns: repeat(20, 1fr);
column-gap: .5rem;
&--movie { // &:hover {
padding-top: 2rem; // transform: translate3d(3rem, 0, 0);
padding-bottom: 2rem; // }
height: 35rem;
// width: 20rem; &:hover &--movie {
opacity: .3;
&:hover {
transform: scale(1.5);
opacity: 1;
}
}
&:hover > * {
transform: translate3d(-5rem, 0, 0);
}
&--movie:hover ~ &--movie {
transform: translate3d(5rem, 0, 0);
}
&--movie { // tile
cursor: pointer;
transition: all 450ms;
transform: center left;
padding-top: 4rem;
padding-bottom: 4rem;
height: 20rem;
&:not(:last-child) { &:not(:last-child) {
padding-right: .5rem; padding-right: .5rem;
} }
&-image { &-image {
height: 100%; height: 100%;
transition: transform .3s;
&:hover {
transform: scale(1.18);
transition: all .3s;
cursor: pointer;
}
} }
} }
} }
} }
// .shit {
// width: 20rem;
// height: 10rem;
// &__poster {
// height: 20rem;
// width: 15rem;
// }
// &__image {
// height: 100%;
// }
// }