diff --git a/src/components/MovieRow/MovieRow.js b/src/components/MovieRow/MovieRow.js index 4d0a181..0f8968e 100644 --- a/src/components/MovieRow/MovieRow.js +++ b/src/components/MovieRow/MovieRow.js @@ -3,7 +3,7 @@ import React, {Component} from 'react'; const movieRow = (props) => ( -
+
diff --git a/src/containers/MovieShowcase/MovieShowcase.js b/src/containers/MovieShowcase/MovieShowcase.js index 31c3231..a3e2c7b 100644 --- a/src/containers/MovieShowcase/MovieShowcase.js +++ b/src/containers/MovieShowcase/MovieShowcase.js @@ -9,27 +9,28 @@ class MovieShowcase extends Component { movies: [] } - componentWillMount() { - this.getTrending(); - } + // 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; + console.log(res.data.results[0]); + const movie = res.data.results[0]; let movieRows = []; - results.forEach((movie) => { - const movieImageUrl = "url(https://image.tmdb.org/t/p/original/" + movie.poster_path; - const movieComponent = { + const movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.poster_path; + console.log(movieImageUrl); + const movieComponent = movieRows.push(movieComponent); - }) + // }) // update state this.setState({trendingMovieRows: movieRows}) @@ -45,21 +46,27 @@ class MovieShowcase extends Component { - return ( -
-

New Releases

+ return
+

+ New Releases +

- {/* {this.state.trendingMovieRows} */} - {/* {this.state.movies[0].title} */} - {/*
movie 1
-
movie 2
-
movie 3
+ {/* {this.state.movies[0].title} */} + {/* {/*
movie 1
*/} + {/*
*/} + {this.state.trendingMovieRows} + {this.state.trendingMovieRows} + {this.state.trendingMovieRows} + {this.state.trendingMovieRows} + {/*
*/} + {/*
movie 3
movie 4
movie 5
-
movie 6
*/} - {/*
*/} - - {/*

Trending Now

+
+ movie 6 +
*/} + {/*
*/} + {/*

Trending Now

movie 1
movie 2
@@ -69,8 +76,7 @@ class MovieShowcase extends Component {
movie 6
*/}
-
- ) +
; } } diff --git a/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js b/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js index f4015ed..2721758 100644 --- a/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js +++ b/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js @@ -4,11 +4,11 @@ import React, { Component } from 'react'; const movieShowcaseRow = (props) => ( -
-
- -
-
+ +
+ +
+ ); export default movieShowcaseRow; \ No newline at end of file diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss index 20f5933..86584a1 100644 --- a/src/static/sass/components/_movieShowcase.scss +++ b/src/static/sass/components/_movieShowcase.scss @@ -3,18 +3,48 @@ grid-column: 2 / 13; color: #fff; + &__heading { + padding-top: 2rem; + } + &__container { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: .5rem; - &--movie { - padding: 3rem; - } + &--movie { + padding-top: 2rem; + padding-bottom: 2rem; + height: 35rem; + // width: 20rem; + &:not(:last-child) { + padding-right: .5rem; + } + + &-image { + height: 100%; + transition: transform .3s; + + &:hover { + transform: scale(1.18); + transition: all .3s; + cursor: pointer; + } + } + } } } -.shit { - width: 20rem; - height: 10rem; -} \ No newline at end of file +// .shit { +// width: 20rem; +// height: 10rem; + +// &__poster { +// height: 20rem; +// width: 15rem; +// } + +// &__image { +// height: 100%; +// } +// } \ No newline at end of file