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

main styles added

Browse Source
This commit is contained in:
andres alcocer
2018-11-17 20:45:11 -05:00
parent d457ad851f
commit 731af42186
14 changed files with 400 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Footer/Footer.js
View File

@@ -4,7 +4,7 @@ const footer = () => (
<footer className="footer">
<div className="footer__copyright">Copyright &copy; 2018 Made with ❤️ by Andres Alcocer</div>
<div className="footer__copyright">&copy; 2018 Made with ❤️ by Andres Alcocer</div>
</footer>
);

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

@@ -1,8 +1,6 @@
import React, { Component } from 'react';
import React, { Component } from 'react';
import PlayLogo from '../../static/images/play-button.svg';
import AddLogo from '../../static/images/add.svg';
class Header extends Component {
@@ -20,8 +18,14 @@ class Header extends Component {
<header style={backgroundStyle} className="header">
<div className="header__container">
<h1 className="header__container-heading">{this.props.movie.name}</h1>
<button onClick={() => alert("not a moive!")} className="header__container-btnPlay">Play</button>
<button className="header__container-btnMyList">My List</button>
<button onClick={() => alert("not a moive!")} className="header__container-btnPlay">
<PlayLogo className="header__container-btnMyList-play" />
Play
</button>
<button className="header__container-btnMyList">
<AddLogo className="header__container-btnMyList-add" />
My List
</button>
<p className="header__container-overview">{this.props.movie.overview}</p>
</div>
@@ -32,14 +36,5 @@ class Header extends Component {
}
// 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;

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

@@ -7,24 +7,28 @@ class MovieSummary extends Component {
render() {
return (
<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 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>
<button>Play</button>
<button>My list</button>
<p>staring: mdf gglo bool emmy djf </p>
<p>Genres: mdf gglo bool emmy djf </p>
</div>
</Aux>
)
return <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 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>
<button>Play</button>
<button>My list</button>
<p>staring: mdf gglo bool emmy djf </p>
<p>Genres: mdf gglo bool emmy djf </p>
</div>
</Aux>;
}
}