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

header background

Browse Source
This commit is contained in:
andres alcocer
2018-11-15 15:43:13 -05:00
parent f9dbf2ae9d
commit 65db39c1f0
12 changed files with 159 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,42 @@
import React from 'react';
import React, { Component } from 'react';
const header = () => (
<header className="header">
class Header extends Component {
render() {
const backgroundStyle = {
transform: "scaleY(-45rem)",
backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`
}
return (
<header style={backgroundStyle} className="header">
<div className="header__background">
{/* <h1>{this.props.movie.name}</h1> */}
</div>
</header>
);
</header>
)
export default header;
}
}
// const header = (props) => (
// <header className="header">
// <div className="header__background" style={{ background: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path})` }}>
// <h1>{props.movie.name}</h1>
// </div>
// </header>
// );
export default Header;

14
src/components/MovieRow/MovieSummary/MovieSummary.js
View File

@@ -1,23 +1,20 @@
import React, { Component } from 'react';
import Aux from '../../../hoc/Aux/Aux';
import MovieRow from '../MovieRow';
class MovieSummary extends Component {
render() {
return (
<Aux>
<div className="shit">
<Aux>
<div className="modal__container">
<h1 className="modal__title">{this.props.movie.title || this.props.movie.name}</h1>
<p className="modal__info">
<span className="modal__rating">Rating: {this.props.movie.vote_average * 10}% </span>
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
</p>
</p>
<p className="modal__episode">{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 : ""}</p>
<p className="modal__overview">{this.props.movie.overview}</p>
@@ -26,10 +23,7 @@ class MovieSummary extends Component {
<p>staring: mdf gglo bool emmy djf </p>
<p>Genres: mdf gglo bool emmy djf </p>
</div>
</Aux>
</Aux>
)
}
}

16
src/components/UI/Modal/Modal.js
View File

@@ -2,21 +2,15 @@ import React, {Component} from 'react';
import Aux from '../../../hoc/Aux/Aux';
import Backdrop from '../Backdrop/Backdrop'
class Modal extends Component {
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 (
@@ -25,10 +19,8 @@ class Modal extends Component {
<div
style={backgroundStyle}
className={"modal " + (this.props.show ? "show" : "hide")}>
{this.props.children}
{this.props.children}
</div>
</Aux>
);
}

7
src/containers/App.js
View File

@@ -5,6 +5,7 @@ import axios from 'axios';
import MovieRow from '../components/MovieRow/MovieRow'
import Modal from '../components/UI/Modal/Modal';
import MovieSummary from '../components/MovieRow/MovieSummary/MovieSummary';
import CancelIcon from '../static/images/cancel-music.svg'
@@ -77,9 +78,9 @@ makeAipCall = (searchItem) => {
}
axios.get(url)
.then(res => {
console.log(res);
const movieData = res.data;
console.log(movieData);
// console.log(movieData);
this.setState({movieDetails: movieData});
}).catch(error => {
@@ -97,7 +98,7 @@ makeAipCall = (searchItem) => {
return (
<div>
<Navigation showMovies={this.onSearchHandler} />
{this.state.toggleMovieList ? <Layout /> : <div //onClick={this.onChangeHandler}
{this.state.toggleMovieList ? <Layout /> : <div
className="search-container">{this.state.rows}</div>}
<Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieDetails}>
<MovieSummary movie={this.state.movieDetails}/>

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

@@ -1,5 +1,5 @@
import React, { Component } from 'react';
import axios from 'axios';
import Header from '../../components/Header/Header';
import MovieShowcase from '../MovieShowcase/MovieShowcase';
import MovieOriginals from '../MovieOriginals/MovieOriginals';
@@ -9,6 +9,28 @@ import { BrowserRouter } from "react-router-dom";
class Layout extends Component {
state = {
selectedMovie: {}
}
componentDidMount = () => {
this.getMovie();
}
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 => {
const movieData = res.data;
this.setState({ selectedMovie: movieData })
}).catch(error => {
console.log(error);
})
}
render() {
@@ -17,7 +39,7 @@ class Layout extends Component {
return (
<BrowserRouter>
<div className="container">
<Header />
<Header movie={this.state.selectedMovie}/>
<MovieShowcase />
<MovieOriginals />
<Footer />

1
src/containers/Navigation/Navigation.js
View File

@@ -46,7 +46,6 @@ class navigation extends Component {
<input
onChange={this.props.showMovies}
className="navigation__container--left__input"
// onKeyPress={this.props.showMan}
type="text"
placeholder="Title, genres, people" />

41
src/static/images/cancel-music.svg Normal file
View File

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 212.982 212.982" style="enable-background:new 0 0 212.982 212.982;" xml:space="preserve">
<g id="Close">
<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312
c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312
l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937
c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

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

@@ -45,7 +45,7 @@
body {
box-sizing: border-box;
background-color: fff;
background-color: $color-background;
}
html {
@@ -55,21 +55,8 @@ html {
// GRID AREA
.container {
display: grid;
grid-template-rows: 47vw min-content min-content min-content;
grid-template-columns: 4% repeat(10, 1fr) 4%;
}
.searchContent {
height: 100vh;
background-color: $color-background;
}
.search-container {
background-color: $color-background;
height: 150%;
padding-bottom: 10rem;
padding-left: 4rem;
}

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

@@ -26,6 +26,15 @@
font-size: 2rem;
}
&__cancel {
cursor: pointer;
width: 1.8rem;
fill: #fff;
float: right;
padding-right: 2rem;
padding-top: 2rem;
}
&__overview {
color: $color-modal-grey;
padding-top: 2rem;
@@ -35,27 +44,19 @@
}
}
// .hide {
// transition: all 1s;
// // transform: translateY(-100vh);
// display: none;
// }
.show {
opacity: 1;
}
.show {
opacity: 1;
// transform: scale(1);
}
.hide {
transition: all 1s;
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;
}
.modal__container {
background: linear-gradient(90deg, #000 50%, transparent);
width: 70%;
padding-top: 3rem;
height: 100%;
padding-left: 3.5rem;
}

4
src/static/sass/components/_movie.scss
View File

@@ -1,5 +1,4 @@
.movie {
// z-index: -1;
flex: 1 1 auto;
padding-top: 6rem;
display: inline-block;
@@ -12,7 +11,8 @@
&:hover {
z-index: -1;
transform: scale(1.4);
transform: scale(1.25);
}
}

11
src/static/sass/components/_search.scss
View File

@@ -0,0 +1,11 @@
.searchContent {
height: 100vh;
background-color: $color-background;
}
.search-container {
background-color: $color-background;
height: 150%;
padding-bottom: 10rem;
padding-left: 4rem;
}

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

@@ -1,5 +1,9 @@
.header {
padding-top: 4rem;
background-color: rebeccapurple;
grid-column: 1 / 13;
&__background {
}
}