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>
);

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

@@ -1,8 +1,6 @@
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>;
}
}

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

@@ -1,6 +1,9 @@
import React, { Component } from 'react';
import NavigationItem from '../../components/NavigationItems/NavigationItem/NavigationItem'
import SearchLogo from '../../static/images/search-icon.svg';
import NetflixLogo from '../../static/images/Netflix_Logo_RGB.png';
import BellLogo from '../../static/images/bell-logo.svg';
import DropdownArrow from '../../static/images/drop-down-arrow.svg';
class navigation extends Component {
state = {
@@ -33,7 +36,7 @@ class navigation extends Component {
<nav className={"navigation " + (this.state.scrolling ? "black" : "")} >
<ul className="navigation__container">
<NavigationItem link="/" exact>Netflix</NavigationItem>
<NavigationItem link="/" exact><img className="navigation__container--logo" src={NetflixLogo} alt=""/></NavigationItem>
<NavigationItem link="/">Home</NavigationItem>
<NavigationItem link="/">TV Shows</NavigationItem>
<NavigationItem link="/">Movies</NavigationItem>
@@ -41,8 +44,8 @@ class navigation extends Component {
<NavigationItem link="/">My List</NavigationItem>
<div className="navigation__container--left">
<SearchLogo className="logo" />
<input
onChange={this.props.showMovies}
className="navigation__container--left__input"
@@ -50,8 +53,18 @@ class navigation extends Component {
placeholder="Title, genres, people" />
</div>
<NavigationItem link="/">KIDS</NavigationItem>
<NavigationItem link="/">DVD</NavigationItem>
<BellLogo className="navigation__container--bellLogo"/>
<div className="dropdownContainer">
<div className="navigation__container--userLogo">
<div className="dropdownContent"></div>
</div>
</div>
<DropdownArrow className="navigation__container--downArrow"/>
</ul>
</nav>
)

1
src/index.html
View File

@@ -4,6 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Hind:400,500,700|Ramabhadra" rel="stylesheet">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Netflix Clone</title>
</head>

BIN
src/static/images/Netflix_Logo_RGB.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

72
src/static/images/add.svg Normal file
View File

@@ -0,0 +1,72 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, 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 491.86 491.86" style="enable-background:new 0 0 491.86 491.86;" xml:space="preserve">
<g>
<g>
<path d="M465.167,211.614H280.245V26.691c0-8.424-11.439-26.69-34.316-26.69s-34.316,18.267-34.316,26.69v184.924H26.69
C18.267,211.614,0,223.053,0,245.929s18.267,34.316,26.69,34.316h184.924v184.924c0,8.422,11.438,26.69,34.316,26.69
s34.316-18.268,34.316-26.69V280.245H465.17c8.422,0,26.69-11.438,26.69-34.316S473.59,211.614,465.167,211.614z"/>
</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>
</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.1 KiB

42
src/static/images/bell-logo.svg Normal file
View File

@@ -0,0 +1,42 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 459.334 459.334" style="enable-background:new 0 0 459.334 459.334;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<g>
<path d="M175.216,404.514c-0.001,0.12-0.009,0.239-0.009,0.359c0,30.078,24.383,54.461,54.461,54.461 s54.461-24.383,54.461-54.461c0-0.12-0.008-0.239-0.009-0.359H175.216z" fill="#FFFFFF"/>
<path d="M403.549,336.438l-49.015-72.002c0-22.041,0-75.898,0-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485 C254.152,10.963,243.19,0,229.667,0s-24.485,10.963-24.485,24.485v27.663c-57.237,11.381-100.381,61.879-100.381,122.459 c0,23.716,0,76.084,0,89.83l-49.015,72.002c-5.163,7.584-5.709,17.401-1.419,25.511c4.29,8.11,12.712,13.182,21.887,13.182 H383.08c9.175,0,17.597-5.073,21.887-13.182C409.258,353.839,408.711,344.022,403.549,336.438z" fill="#FFFFFF"/>
</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>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

48
src/static/images/bell.svg Normal file
View File

@@ -0,0 +1,48 @@
<!-- Generator: Adobe Illustrator 19.0.0, 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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M467.812,431.851l-36.629-61.056c-16.917-28.181-25.856-60.459-25.856-93.312V224c0-67.52-45.056-124.629-106.667-143.04
V42.667C298.66,19.136,279.524,0,255.993,0s-42.667,19.136-42.667,42.667V80.96C151.716,99.371,106.66,156.48,106.66,224v53.483
c0,32.853-8.939,65.109-25.835,93.291l-36.629,61.056c-1.984,3.307-2.027,7.403-0.128,10.752c1.899,3.349,5.419,5.419,9.259,5.419
H458.66c3.84,0,7.381-2.069,9.28-5.397C469.839,439.275,469.775,435.136,467.812,431.851z"/>
</g>
</g>
<g>
<g>
<path d="M188.815,469.333C200.847,494.464,226.319,512,255.993,512s55.147-17.536,67.179-42.667H188.815z"/>
</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>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

41
src/static/images/drop-down-arrow.svg Normal file
View File

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="255px" height="255px" viewBox="0 0 255 255" style="enable-background:new 0 0 255 255;" xml:space="preserve">
<g>
<g id="arrow-drop-down">
<polygon points="0,63.75 127.5,191.25 255,63.75 "/>
</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>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 761 B

38
src/static/images/play-button.svg Normal file
View File

@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, 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 41.999 41.999" style="enable-background:new 0 0 41.999 41.999;" xml:space="preserve">
<path d="M36.068,20.176l-29-20C6.761-0.035,6.363-0.057,6.035,0.114C5.706,0.287,5.5,0.627,5.5,0.999v40
c0,0.372,0.206,0.713,0.535,0.886c0.146,0.076,0.306,0.114,0.465,0.114c0.199,0,0.397-0.06,0.568-0.177l29-20
c0.271-0.187,0.432-0.494,0.432-0.823S36.338,20.363,36.068,20.176z"/>
<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: 824 B

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

@@ -44,6 +44,7 @@
}
body {
font-family: 'Hind', sans-serif;
box-sizing: border-box;
background-color: $color-background;
}

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

@@ -17,31 +17,51 @@
&-btnPlay,
&-btnMyList {
cursor: pointer;
font-size: 1.5rem;
font-size: 1.6rem;
color: #fff;
border-radius: 5px;
padding-left: 4rem;
outline: none;
border: none;
font-weight: 700;
border-radius: .2vw;
padding-left: 5rem;
margin-right: 1rem;
padding-right: 4rem;
border: 1px solid rgba(255, 255, 255, .4);
padding-right: 5rem;
padding-top: 1rem;
background-color: rgba(51, 51, 51, .4);
background-color: rgba(51,51,51,.5);
padding-bottom: 1rem;
&-add {
width: 15px;
height: 15px;
fill: #fff;
margin-right: 1rem;
}
&-play {
width: 15px;
height: 15px;
fill: #fff;
margin-right: 1rem;
}
&:hover {
color: $color-dark;
background-color: #fff;
transition: all .3s;
color: #000;
background-color: #e6e6e6;
transition: all .2s;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
& > * {
fill: #000;
}
}
}
&-overview {
width: 45rem;
line-height: 1.3;
padding-top: 1.5rem;
padding-top: 2.5rem;
font-size: 1.8rem;
}
}
}

77
src/static/sass/layout/_navigation.scss
View File

@@ -27,15 +27,61 @@
font-size: 4rem;
}
&--bellLogo {
cursor: pointer;
height: 2.2rem;
fill: red;
width: 2.2rem;
padding-right: 2.5rem;
}
&--userLogo {
margin-top: 2rem;
border-radius: 5px;
cursor: pointer;
background-color: rgb(201, 199, 78);
height: 2.5rem;
width: 2.5rem;
margin-right: .5rem;
&:hover .dropdownContent {
transition: all .4s;
opacity: 1;
visibility: visible;
}
}
&--downArrow {
cursor: pointer;
fill: #fff;
height: 1rem;
width: 1rem;
margin-right: 5.8rem;
}
&--logo {
margin-top: 1rem;
height: 5rem;
padding-right: 1rem;
}
&-link {
color: #fff;
font-weight: 500;
font-size: 1.5rem;
color: rgb(221, 221, 221);
text-decoration: none;
margin-right: 2rem;
transition: all .2s;
&:last-child {
padding-right: 2.6rem;
}
&:hover {
color: rgb(167, 167, 167);
}
}
@@ -54,19 +100,17 @@
width: 0px;
padding: 10px;
padding-right: 2rem;
// background: none;
background: $color-background;
border: 1px solid #fff;
transition: width .5s;
cursor: pointer;
opacity: 0;
// transition: all .5s;
&:focus {
padding-left: 4rem;
width: 22rem;
// border: 1px solid #fff;
cursor: text;
opacity: 1;
@@ -83,3 +127,28 @@
transform: translateX(2.4rem) translateY(1rem);
cursor: pointer;
}
.dropdownContent {
opacity: 0;
visibility: hidden;
height: 20rem;
width: 15rem;
background-color: red;
transform: translateY(4.6rem) translateX(-11rem);
}
.dropdownContainer {
height: 100%;
display: flex;
justify-content: center;
align-content: center;
&:hover .dropdownContent {
transition: all .4s;
opacity: 1;
visibility: visible;
}
}