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

queries

Browse Source
This commit is contained in:
andres alcocer
2018-11-19 23:32:00 -05:00
parent 013e11eeeb
commit fb5fe91325
9 changed files with 155 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/containers/MovieGenreRow/MovieGenreRow.js
View File

@@ -215,7 +215,7 @@ class MovieGenreRow extends Component {
return (
<div className="movieShowcase">
<h1 className="movieShowcase__heading">Netflix Originals</h1>
<h1 className="movieShowcase__heading">NETFLIX ORIGINALS</h1>
<div className="movieShowcase__container">
{this.state.netflixOriginalsRow}
</div>

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

@@ -38,11 +38,13 @@ class navigation extends Component {
<nav className={"navigation " + (this.state.scrolling ? "black" : "")} >
<ul className="navigation__container">
<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>
<NavigationItem link="/">Recently Added</NavigationItem>
<NavigationItem link="/">My List</NavigationItem>
<DropdownArrow className="navigation__container--downArrow-2"></DropdownArrow>
<div className="navigation__container-link pseudo-link">Home</div>
<div className="navigation__container-link pseudo-link">TV Shows</div>
<div className="navigation__container-link pseudo-link">Movies</div>
<div className="navigation__container-link pseudo-link">Recently Added</div>
<div className="navigation__container-link pseudo-link">My List</div>
<div className="navigation__container--left">
<SearchLogo className="logo" />
@@ -55,12 +57,13 @@ class navigation extends Component {
</div>
<NavigationItem link="/">KIDS</NavigationItem>
<NavigationItem link="/">DVD</NavigationItem>
<div className="navigation__container-link pseudo-link">KIDS</div>
<div className="navigation__container-link pseudo-link">DVD</div>
<BellLogo className="navigation__container--bellLogo" />
<DropdownContent />
<DropdownArrow className="navigation__container--downArrow"/>
</ul>
</nav>
)

28
src/static/sass/abstracts/_functions.scss
View File

@@ -0,0 +1,28 @@
/* Media query manager */
@mixin responsive($breakpoint) {
@if $breakpoint == phone {
@media only screen and (max-width: 37.5em) { // 600px --> 600 / 16
@content
};
}
@if $breakpoint == tab_medium { // 980px
@media only screen and (max-width: 61.25em) {
@content
};
}
@if $breakpoint == tab_port {
@media only screen and (max-width: 74em) { // 1184px
@content
};
}
@if $breakpoint == lg_desktop {
@media only screen and (max-width: 102em) { // 1633px
@content
};
}
}

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

@@ -51,12 +51,16 @@ body {
html {
// this defines what 1rem is --> font root size
font-size: 62.5%; // 10/16, 1rem = 10px;
font-size: 62.5%; // 10/16, 1rem = 10px;
@include responsive(tab_port) {
font-size: 50%;
}
}
// GRID AREA
.container {
display: grid;
grid-template-rows: min-content min-content min-content min-content;
grid-template-columns: 4% repeat(10, 1fr) 4%;

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

@@ -7,9 +7,12 @@
color: #fff;
height: 52rem;
opacity: 0;
// transform: scale(0);
box-shadow: 0 1.5rem 4rem rgba($color-dark, .15);
// transition: all 2s 1s;
@include responsive(tab_port) {
height: 38rem;
}
&__container {
background: linear-gradient(90deg, #000 50%, transparent);
@@ -17,6 +20,17 @@
padding-top: 3rem;
height: 100%;
padding-left: 5rem;
@include responsive(tab_port) {
background: linear-gradient(90deg, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0.733), transparent);
width: 88%;
}
@include responsive(tab_medium) {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.966) 65%, transparent);
width: 100%;
}
}
&__title {
@@ -43,8 +57,22 @@
padding-top: 2rem;
font-size: 2rem;
hyphens: auto;
width: 55%;
width: 60%;
line-height: 1.2;
@include responsive(lg_desktop) {
width: 60%;
font-size: 1.8rem;
}
@include responsive(tab_port) {
width: 80%;
}
@include responsive(tab_medium) {
width: 95%;
color: rgba(255, 255, 255, 0.877);
}
}
&__btn {

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

@@ -3,15 +3,28 @@
padding-top: 6rem;
display: inline-block;
@include responsive(tab_port) {
padding-top: 4rem;
}
&__column-poster {
height: 25rem;
width: 17.5rem;
cursor: pointer;
transition: transform .3s;
-webkit-transition: transform .3s;
@include responsive(tab_port) {
height: 20rem;
width: 14rem;
}
&:hover {
transform: scale(1.25);
@include responsive(tab_port) {
transform: scale(1.15);
}
}
}

17
src/static/sass/components/_movieShowcase.scss
View File

@@ -30,10 +30,19 @@
&:hover > * {
transform: translate3d(-6rem, 0, 0);
@include responsive(tab_port) {
transform: translate3d(-5rem, 0, 0);
}
}
&--movie:hover ~ &--movie {
transform: translate3d(6rem, 0, 0);
@include responsive(tab_port) {
transform: translate3d(4.5rem, 0, 0);
}
}
@@ -62,6 +71,10 @@
padding-bottom: 4rem;
height: 21.5rem;
min-height: 0;
@include responsive(tab_port) {
height: 18.5rem;
}
&:not(:last-child) {
padding-right: .5rem;
@@ -81,6 +94,10 @@
cursor: pointer;
transition: all 450ms;
transform: center left;
@include responsive(tab_port) {
height: 42rem;
}
}
}

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

@@ -66,7 +66,7 @@
}
&--fadeBottom {
height: 27.4rem;
height: 28.5rem;
background-image: linear-gradient(180deg, transparent,rgba(37, 37, 37, 0.61), rgb(17, 17, 17));
}
}

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

@@ -45,6 +45,10 @@
height: 3rem;
width: 3rem;
margin-right: .5rem;
@include responsive(tab_port) {
margin-right: 3rem;
}
&:hover > .dropdownContent {
@@ -61,17 +65,40 @@
width: 1rem;
margin-right: 5.8rem;
@include responsive(tab_port) {
display: none;
}
}
&--downArrow-2 {
display: none;
cursor: pointer;
fill: #fff;
height: 1rem;
width: 1rem;
@include responsive(tab_port) {
height: 1.5rem;
width: 1.5rem;
display: inline-block;
}
}
&--logo {
margin-top: 1rem;
height: 5rem;
padding-right: 1rem;
@include responsive(tab_port) {
padding-right: .1rem;
}
}
&-link {
font-weight: 500;
font-weight: 500;
font-size: 1.5rem;
color: rgb(221, 221, 221);
text-decoration: none;
@@ -96,19 +123,19 @@
justify-content: flex-end;
&__input {
font-size: 1.4rem;
border: none;
color: #fff;
outline: none;
width: 0px;
padding: 10px;
padding-right: 2rem;
background: $color-background;
border: 1px solid #fff;
transition: width .5s;
cursor: pointer;
font-size: 1.4rem;
border: none;
color: #fff;
outline: none;
width: 0px;
padding: 10px;
padding-right: 2rem;
background: $color-background;
border: 1px solid #fff;
transition: width .5s;
cursor: pointer;
opacity: 0;
opacity: 0;
&:focus {
@@ -116,7 +143,6 @@
width: 22rem;
cursor: text;
opacity: 1;
}
}
}
@@ -210,3 +236,11 @@
visibility: visible;
}
}
.pseudo-link {
@include responsive(tab_port) {
display: none;
}
}