From f4f52191335724048bf04c301ccca4c7db8033a0 Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Mon, 19 Nov 2018 02:32:28 -0500 Subject: [PATCH] minor details --- src/components/Header/Header.js | 17 ++++-- .../MovieRow/MovieSummary/MovieSummary.js | 38 +++++------- src/containers/App.js | 3 + src/containers/Layout/Layout.js | 58 +++++++++---------- src/containers/MovieShowcase/MovieShowcase.js | 20 +++---- .../MovieShowcaseRow/MovieShowcaseRow.js | 9 +-- src/static/sass/abstracts/_variables.scss | 4 +- src/static/sass/base/_base.scss | 2 +- src/static/sass/components/_modal.scss | 53 +++++++++++++---- .../sass/components/_movieShowcase.scss | 3 +- src/static/sass/layout/_footer.scss | 9 +-- src/static/sass/layout/_header.scss | 19 +++++- 12 files changed, 134 insertions(+), 101 deletions(-) diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index be718f3..56362fe 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -8,17 +8,22 @@ class Header extends Component { render() { const backgroundStyle = { - transform: "scaleY(-45rem)", - backgroundPosition: "center", + + // backgroundPosition: "center fixed", + // backgroundPosition: "center", + // backgroundAttachment: "fixed", + backgroundSize: "cover", - backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})` + backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`, + backgroundPosition: "center", } return (
+

{this.props.movie.name}

- @@ -28,8 +33,8 @@ class Header extends Component {

{this.props.movie.overview}

- -
+
+ ) } diff --git a/src/components/MovieRow/MovieSummary/MovieSummary.js b/src/components/MovieRow/MovieSummary/MovieSummary.js index 70e229d..847aa34 100644 --- a/src/components/MovieRow/MovieSummary/MovieSummary.js +++ b/src/components/MovieRow/MovieSummary/MovieSummary.js @@ -1,12 +1,14 @@ import React, { Component } from 'react'; import Aux from '../../../hoc/Aux/Aux'; +import AddIcon from '../../../static/images/add.svg'; +import PlayIcon from '../../../static/images/play-button.svg'; class MovieSummary extends Component { render() { - + return

@@ -16,17 +18,22 @@ class MovieSummary extends Component { Rating: {this.props.movie.vote_average * 10}%{" "} - Release date: {this.props.movie.release_date || this.props.movie.first_air_date} Runtime: {this.props.movie.runtime || this.props.movie.episode_run_time }m + Release date: {this.props.movie.release_date || this.props.movie.first_air_date} Runtime: + {this.props.movie.runtime || this.props.movie.episode_run_time} m

{this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""} {this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""}

{this.props.movie.overview}

- - -

staring: mdf gglo bool emmy djf

-

Genres: mdf gglo bool emmy djf

+ +

; } @@ -35,24 +42,5 @@ class MovieSummary extends Component { -// const movieSummary = (props) => ( - -// -//
-//

{props.movie.title || props.movie.name}

-//

-// Rating: {props.movie.vote_average * 10}% -// Release date: {props.movie.release_date || props.movie.first_air_date} Runtime: {props.movie.runtime || props.movie.episode_run_time}m -//

-//

{props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""} -// {props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""}

-//

{props.movie.overview}

-// -// -//

staring: mdf gglo bool emmy djf

-//

Genres: mdf gglo bool emmy djf

-//
-// -// ); export default MovieSummary; \ No newline at end of file diff --git a/src/containers/App.js b/src/containers/App.js index fa30057..d616991 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -69,14 +69,17 @@ makeAipCall = (searchItem) => { /* Get the appropriate details for a specific movie that was clicked */ selectMovieHandler = (movie) => { this.setState({toggleModal: true}); + let url; if (movie.media_type === "movie") { const movieId = movie.id; + console.log(movie.id); url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; } else if (movie.media_type === "tv") { const tvId = movie.id url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; } + axios.get(url) .then(res => { console.log(res); diff --git a/src/containers/Layout/Layout.js b/src/containers/Layout/Layout.js index 7614766..9dca1da 100644 --- a/src/containers/Layout/Layout.js +++ b/src/containers/Layout/Layout.js @@ -7,44 +7,44 @@ import { BrowserRouter } from "react-router-dom"; class Layout extends Component { - state = { selectedMovie: {} - } + }; componentDidMount = () => { - this.getMovie(); - } - - // 71411 + this.getMovie(); + }; + + getMovie = () => { - - const url = "https://api.themoviedb.org/3/tv/71411?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0"; - axios.get(url) + /** + * @param movieId narcos netflix series id + */ + const movieId = 63351; + + const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; + axios + .get(url) .then(res => { - const movieData = res.data; - this.setState({ selectedMovie: movieData }) - - }).catch(error => { - console.log(error); + const movieData = res.data; + this.setState({ selectedMovie: movieData }); }) - - } + .catch(error => { + console.log(error); + }); + }; - - render() { - - - return ( + render() { + return ( -
-
- - {/* */} -
-
- ) - } +
+
+ +
+
+ + ); + } } export default Layout; \ No newline at end of file diff --git a/src/containers/MovieShowcase/MovieShowcase.js b/src/containers/MovieShowcase/MovieShowcase.js index 7f4ea1c..d49eb61 100644 --- a/src/containers/MovieShowcase/MovieShowcase.js +++ b/src/containers/MovieShowcase/MovieShowcase.js @@ -58,7 +58,7 @@ class MovieShowcase extends Component { } if (movie.poster_path && movie.backdrop_path !== null) { - console.log(movieImageUrl); + const movieComponent = this.getMovieDetails(movie)} key={movie.id} @@ -82,8 +82,9 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - + console.log(res); const movieRows = this.getMovieRows(res, url); + this.setState({ trendingMovieRow: movieRows }); }) .catch(error => { @@ -114,7 +115,7 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - + console.log(res); const movieRows = this.getMovieRows(res, url); this.setState({ netflixOriginalsRow: movieRows }); }) @@ -128,7 +129,7 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - console.log(res); + console.log(res); const movieRows = this.getMovieRows(res, url); this.setState({ actionMovieRow: movieRows }); }) @@ -142,7 +143,7 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - console.log(res); + const movieRows = this.getMovieRows(res, url); this.setState({ comedyMovieRow: movieRows }); }) @@ -156,7 +157,7 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - console.log(res); + const movieRows = this.getMovieRows(res, url); this.setState({ horrorMovieRow: movieRows }); }) @@ -170,7 +171,7 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - console.log(res); + const movieRows = this.getMovieRows(res, url); this.setState({ romanceMovieRow: movieRows }); }) @@ -184,7 +185,7 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - console.log(res); + const movieRows = this.getMovieRows(res, url); this.setState({ animatedMovieRow: movieRows }); }) @@ -198,7 +199,7 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - console.log(res); + const movieRows = this.getMovieRows(res, url); this.setState({ documentaryRow: movieRows }); }) @@ -212,7 +213,6 @@ class MovieShowcase extends Component { return (
-

Netflix Originals

{this.state.netflixOriginalsRow} diff --git a/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js b/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js index 0086a85..34e4d01 100644 --- a/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js +++ b/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js @@ -7,24 +7,17 @@ class movieShowcaseRow extends Component { render() { let netflixUrl = false; - const netflixStyle = { - height: "52rem", - - } - if (this.props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") { netflixUrl = true; } return ( - // style = { netflixUrl? netflixStyle : null} - +
- ); } } diff --git a/src/static/sass/abstracts/_variables.scss b/src/static/sass/abstracts/_variables.scss index e719366..2045475 100644 --- a/src/static/sass/abstracts/_variables.scss +++ b/src/static/sass/abstracts/_variables.scss @@ -1,13 +1,15 @@ $color-dark: #171818; -$color-background: #141414; +$color-background: #111111; $color-background-modal: #000000; $color-white: rgb(221, 218, 218); $color-green: #1cb831; $color-green-modal: rgb(92, 223, 92); $color-modal-grey: rgb(172, 171, 171); +$color-modal-grey-2: rgb(122, 122, 122); $color-red: #e21221; +$color-red-2: #f80616de; $color-dark-blue: #082452; $color-light-blue: rgb(15, 61, 129); diff --git a/src/static/sass/base/_base.scss b/src/static/sass/base/_base.scss index 0392931..e3ce14f 100644 --- a/src/static/sass/base/_base.scss +++ b/src/static/sass/base/_base.scss @@ -58,6 +58,6 @@ html { .container { display: grid; - grid-template-rows: 50vw min-content min-content min-content; + grid-template-rows: min-content min-content min-content min-content; grid-template-columns: 4% repeat(10, 1fr) 4%; } diff --git a/src/static/sass/components/_modal.scss b/src/static/sass/components/_modal.scss index 6adcd2c..d6f2d3c 100644 --- a/src/static/sass/components/_modal.scss +++ b/src/static/sass/components/_modal.scss @@ -5,9 +5,17 @@ top: 25%; left: 0; color: #fff; - height: 50rem; + height: 52rem; box-shadow: 0 1.5rem 4rem rgba($color-dark, .15); + &__container { + background: linear-gradient(90deg, #000 50%, transparent); + width: 70%; + padding-top: 3rem; + height: 100%; + padding-left: 5rem; + } + &__title { font-size: 4rem; } @@ -37,11 +45,43 @@ } &__overview { - color: $color-modal-grey; + color: $color-modal-grey-2; padding-top: 2rem; font-size: 2rem; hyphens: auto; - width: 60%; + width: 55%; + line-height: 1.2; + } + + &__btn { + text-transform: uppercase; + font-weight: 500; + cursor: pointer; + background-color: transparent; + color: #fff; + border: .5px solid $color-modal-grey-2; + border-radius: 2px; + font-size: 1.5rem; + margin-top: 2rem; + margin-right: 1rem; + padding: 1rem 2rem 1rem 2rem; + transition: all .2s; + + &:hover { + transform: scale(1.09); + } + + &--red { + background-color: $color-red-2; + border: none; + } + + &--icon { + fill: #fff; + padding-right: 1rem; + height: 1.4rem; + width: 1.4rem; + } } } @@ -54,10 +94,3 @@ display: none; } -.modal__container { - background: linear-gradient(90deg, #000 50%, transparent); - width: 70%; - padding-top: 3rem; - height: 100%; - padding-left: 3.5rem; -} \ No newline at end of file diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss index 5edc8b8..a788502 100644 --- a/src/static/sass/components/_movieShowcase.scss +++ b/src/static/sass/components/_movieShowcase.scss @@ -37,7 +37,7 @@ &:hover > &--movie__netflix { - transform: translate3d(-2rem, 0, 0); + transform: translate3d(-1rem, 0, 0); } &--movie__netflix:hover ~ &--movie__netflix { @@ -71,7 +71,6 @@ } &__netflix { - // width: 2rem; padding-top: 3rem; padding-bottom: 4rem; padding-right: 1rem; diff --git a/src/static/sass/layout/_footer.scss b/src/static/sass/layout/_footer.scss index 90b0682..cb041be 100644 --- a/src/static/sass/layout/_footer.scss +++ b/src/static/sass/layout/_footer.scss @@ -4,11 +4,6 @@ padding-bottom: 4rem; grid-column: 1 / 13; text-align: center; - - - // // &__container { - // // display: grid; - // // grid-template-columns: repeat(4, 1fr); &__copyright { color: #fff; @@ -16,8 +11,8 @@ &--link { text-decoration: none; - color: #fff; - transition: all .3s; + color: $color-red-2; + transition: all .3s; } diff --git a/src/static/sass/layout/_header.scss b/src/static/sass/layout/_header.scss index 09c3dbf..243690c 100644 --- a/src/static/sass/layout/_header.scss +++ b/src/static/sass/layout/_header.scss @@ -1,9 +1,10 @@ .header { background-color: $color-background; grid-column: 1 / 13; - display: flex; - + height: 65rem; + display: inline-block; + &__container { padding-top: 20rem; padding-left: 4.5rem; @@ -63,5 +64,19 @@ font-size: 1.8rem; } } + + &--fadeBottom { + + // height: 65vw; + // height: 34rem; + // padding-top: 45rem; + // width: 100%; + // height: 20vh; + height: 27.4rem; + // padding-bottom: 100rem; + // transform: translateY(-1rem); + + background-image: linear-gradient(180deg, transparent,rgba(37, 37, 37, 0.61), rgb(17, 17, 17)); + } }