From f9dbf2ae9d73087efe47fef90dc96f8ce8c49a7d Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Thu, 15 Nov 2018 11:36:10 -0500 Subject: [PATCH] added linear background to modal --- .../MovieRow/MovieSummary/MovieSummary.js | 68 +++++++++++++++---- src/components/UI/Modal/Modal.js | 45 +++++++++--- src/containers/App.js | 29 ++++---- src/static/sass/components/_backdrop.scss | 3 +- src/static/sass/components/_modal.scss | 51 ++++++++------ 5 files changed, 134 insertions(+), 62 deletions(-) diff --git a/src/components/MovieRow/MovieSummary/MovieSummary.js b/src/components/MovieRow/MovieSummary/MovieSummary.js index 0016585..11a4745 100644 --- a/src/components/MovieRow/MovieSummary/MovieSummary.js +++ b/src/components/MovieRow/MovieSummary/MovieSummary.js @@ -1,22 +1,60 @@ -import React from 'react'; +import React, { Component } from 'react'; import Aux from '../../../hoc/Aux/Aux'; import MovieRow from '../MovieRow'; -const movieSummary = (props) => ( +class MovieSummary extends Component { - -

{props.movie.title}

-

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

-

{props.movie.overview}

- - -

staring: mdf gglo bool emmy djf

-

Genres: mdf gglo bool emmy djf

+ + + render() { + + + return ( + +
+

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

+

+ 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 +

+

{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

+
+ + + -); + ) + } +} -export default movieSummary; \ No newline at end of file + + + +// 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/components/UI/Modal/Modal.js b/src/components/UI/Modal/Modal.js index 08a7213..44c4520 100644 --- a/src/components/UI/Modal/Modal.js +++ b/src/components/UI/Modal/Modal.js @@ -1,15 +1,38 @@ -import React from 'react'; +import React, {Component} from 'react'; import Aux from '../../../hoc/Aux/Aux'; import Backdrop from '../Backdrop/Backdrop' -const modal = (props) => ( - - -
- {props.children} -
- -); +class Modal extends Component { -export default modal; \ No newline at end of file + + + render() { +// `background: linear-gradient(90deg, #000000, #ffffff00), + + const backgroundStyle = { + // overflow: 'hidden', + + // backgroundRepeat: "no-repeat", + // // backgroundPosition: 'center center' + // background: "red", + backgroundSize: "cover", + // backgroundImage: 'linear-gradient(to right, #1c1b1b, rgb(237, 232, 232)' + backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path || this.props.movie.poster_path})`, + } + return ( + + +
+ {this.props.children} +
+ + + + ); + } + +} + +export default Modal; \ No newline at end of file diff --git a/src/containers/App.js b/src/containers/App.js index ef4f717..c508124 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -22,7 +22,7 @@ makeAipCall = (searchItem) => { const url = `https://api.themoviedb.org/3/search/multi?api_key=9ea839ec7891591994ec0f540b4b199f&language=en-US&include_adult=false&query=${searchItem}`; axios.get(url) .then(res => { - console.log(res.data.results); + // console.log(res.data.results); // extract the data from json object const results = res.data.results; let movieImageUrl; @@ -34,7 +34,7 @@ makeAipCall = (searchItem) => { // pass in the movie object to our MovieRow component and keep it in a variable called // movieComponent const movieComponent = this.selectMovieHandler(movie.id)} + movieDetails={() => this.selectMovieHandler(movie)} key={movie.id} movieImage={movieImageUrl} movie={movie} /> @@ -56,7 +56,7 @@ makeAipCall = (searchItem) => { }); const userInput = event.target.value; this.makeAipCall(userInput); - console.log(userInput); + if (userInput === "") { this.setState({ @@ -65,10 +65,16 @@ makeAipCall = (searchItem) => { } } - selectMovieHandler = (movieId) => { + selectMovieHandler = (movie) => { this.setState({toggleModal: true}); - console.log(movieId); - const url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&append_to_response=tv,videos`; + let url; + if (movie.media_type === "movie") { + const movieId = 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 => { @@ -93,7 +99,7 @@ makeAipCall = (searchItem) => { {this.state.toggleMovieList ? :
{this.state.rows}
} - + @@ -105,12 +111,3 @@ makeAipCall = (searchItem) => { export default App; - - - - - - -// curl --request GET \ -// --url 'https://api.themoviedb.org/3/find/ur95210597?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US&external_source=imdb_id' \ -// --data '{}' \ No newline at end of file diff --git a/src/static/sass/components/_backdrop.scss b/src/static/sass/components/_backdrop.scss index b5427b4..ad0c0f3 100644 --- a/src/static/sass/components/_backdrop.scss +++ b/src/static/sass/components/_backdrop.scss @@ -5,5 +5,6 @@ z-index: 100; left: 0; top: 0; - background-color: rgba($color-background, .7); + background-color: rgba($color-background, .7); + } \ No newline at end of file diff --git a/src/static/sass/components/_modal.scss b/src/static/sass/components/_modal.scss index adae9ae..6849031 100644 --- a/src/static/sass/components/_modal.scss +++ b/src/static/sass/components/_modal.scss @@ -1,17 +1,12 @@ .modal { - padding-left: 4rem; - padding-top: 2rem; position: fixed; z-index: 500; width: 100%; - top: 30%; + top: 25%; left: 0; - color: white; - height: 44rem; - background: $color-background-modal; - transition: all 1s; - transform: scale(0); - + color: #fff; + height: 50rem; + &__title { font-size: 4rem; } @@ -26,23 +21,41 @@ font-size: 2rem; } + &__episode { + padding-top: .5rem; + font-size: 2rem; + } + &__overview { color: $color-modal-grey; padding-top: 2rem; font-size: 2rem; + hyphens: auto; + width: 60%; } } -.show { - // transform: 50% - transition: transform 1s; - transform: scale(1); - opacity: 1; -} +// .hide { +// transition: all 1s; +// // transform: translateY(-100vh); +// display: none; +// } -.hide { + .show { + opacity: 1; + // transform: scale(1); + } - transform: translateY(-100vh); - display: none; -} + .hide { + transition: all 1s; + // transform: translateY(-100vh); + display: none; + } + .shit { + background: linear-gradient(90deg, #000 50%, transparent); + width: 70%; + padding-top: 3rem; + height: 100%; + padding-left: 3.5rem; + } \ No newline at end of file