From 3192982638364eba98fb2de586f6625704c9ed52 Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Sun, 18 Nov 2018 22:03:40 -0500 Subject: [PATCH] minor details --- src/components/Footer/Footer.js | 4 +- src/containers/MovieShowcase/MovieShowcase.js | 8 -- .../MovieShowcaseRow/MovieShowcaseRow.js | 9 ++- src/containers/Navigation/Navigation.js | 32 ++++++-- src/index.html | 11 ++- .../sass/components/_movieOriginals.scss | 14 ---- .../sass/components/_movieShowcase.scss | 31 ++++++++ src/static/sass/layout/_footer.scss | 15 +++- src/static/sass/layout/_header.scss | 6 +- src/static/sass/layout/_navigation.scss | 74 +++++++++++++++++-- src/static/sass/style.scss | 1 - 11 files changed, 159 insertions(+), 46 deletions(-) delete mode 100644 src/static/sass/components/_movieOriginals.scss diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index 480f2c2..f4d2eb4 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -1,10 +1,12 @@ import React from 'react'; +import NavigationItem from '../NavigationItems/NavigationItem/NavigationItem'; const footer = () => ( ); diff --git a/src/containers/MovieShowcase/MovieShowcase.js b/src/containers/MovieShowcase/MovieShowcase.js index a5ad6bd..7f4ea1c 100644 --- a/src/containers/MovieShowcase/MovieShowcase.js +++ b/src/containers/MovieShowcase/MovieShowcase.js @@ -267,11 +267,3 @@ class MovieShowcase extends Component { } export default MovieShowcase; - -/** - * id: - * 18 = drama - * 878 - science fiction - * 80 - crime - * 36 - history - */ \ No newline at end of file diff --git a/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js b/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js index 2b97c1e..0086a85 100644 --- a/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js +++ b/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js @@ -6,9 +6,10 @@ class movieShowcaseRow extends Component { render() { let netflixUrl = false; + const netflixStyle = { - height: "52rem", - + height: "52rem", + } if (this.props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") { @@ -16,8 +17,10 @@ class movieShowcaseRow extends Component { } return ( + // style = { netflixUrl? netflixStyle : null} -
+
diff --git a/src/containers/Navigation/Navigation.js b/src/containers/Navigation/Navigation.js index ffc9e20..96cebad 100644 --- a/src/containers/Navigation/Navigation.js +++ b/src/containers/Navigation/Navigation.js @@ -56,16 +56,38 @@ class navigation extends Component { KIDS DVD - - + +
-
-
-
+ +
+
+
+
+

Andres

+
+
+
+

Tony

+
+
+
+

Luis

+
+

Manage Profiles

+ +
+
+

Account

+

Help Center

+

Sign out of Netflix

+
+
+ ) } diff --git a/src/index.html b/src/index.html index 0d117d9..2cb3d8b 100644 --- a/src/index.html +++ b/src/index.html @@ -13,4 +13,13 @@
- \ No newline at end of file + + + + + + + + + + diff --git a/src/static/sass/components/_movieOriginals.scss b/src/static/sass/components/_movieOriginals.scss deleted file mode 100644 index efe6b9b..0000000 --- a/src/static/sass/components/_movieOriginals.scss +++ /dev/null @@ -1,14 +0,0 @@ -.movieOriginals { - background-color: $color-background; - grid-column: 2 / 13; - - &__container { - display: grid; - grid-template-columns: repeat(6, 1fr); - column-gap: .5rem; - - &--movie { - padding-bottom: 45rem; - } - } -} \ No newline at end of file diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss index 10f47fe..5edc8b8 100644 --- a/src/static/sass/components/_movieShowcase.scss +++ b/src/static/sass/components/_movieShowcase.scss @@ -26,14 +26,33 @@ opacity: 1; } } + &:hover > * { transform: translate3d(-6rem, 0, 0); } + &--movie:hover ~ &--movie { transform: translate3d(6rem, 0, 0); } + &:hover > &--movie__netflix { + transform: translate3d(-2rem, 0, 0); + } + + &--movie__netflix:hover ~ &--movie__netflix { + transform: translate3d(1rem, 0, 0); + } + + &:hover &--movie__netflix { + opacity: .3; + + &:hover { + transform: scale(1.1); + opacity: 1; + } + } + &--movie { cursor: pointer; transition: all 450ms; @@ -48,6 +67,18 @@ &-image { height: 100%; + + } + + &__netflix { + // width: 2rem; + padding-top: 3rem; + padding-bottom: 4rem; + padding-right: 1rem; + height: 52rem; + cursor: pointer; + transition: all 450ms; + transform: center left; } } diff --git a/src/static/sass/layout/_footer.scss b/src/static/sass/layout/_footer.scss index 791a8c5..90b0682 100644 --- a/src/static/sass/layout/_footer.scss +++ b/src/static/sass/layout/_footer.scss @@ -13,6 +13,17 @@ &__copyright { color: #fff; font-size: 1.8rem; - } - // // } + + &--link { + text-decoration: none; + color: #fff; + transition: all .3s; + + } + + &--link:hover { + color: orange; + } + } + } \ No newline at end of file diff --git a/src/static/sass/layout/_header.scss b/src/static/sass/layout/_header.scss index 31bb9a3..09c3dbf 100644 --- a/src/static/sass/layout/_header.scss +++ b/src/static/sass/layout/_header.scss @@ -5,7 +5,7 @@ &__container { - padding-top: 25rem; + padding-top: 20rem; padding-left: 4.5rem; color: #fff; @@ -23,9 +23,9 @@ border: none; font-weight: 700; border-radius: .2vw; - padding-left: 5rem; + padding-left: 3.5rem; + padding-right: 3.5rem; margin-right: 1rem; - padding-right: 5rem; padding-top: 1rem; background-color: rgba(51,51,51,.5); padding-bottom: 1rem; diff --git a/src/static/sass/layout/_navigation.scss b/src/static/sass/layout/_navigation.scss index 1a6ce08..0c0bd7c 100644 --- a/src/static/sass/layout/_navigation.scss +++ b/src/static/sass/layout/_navigation.scss @@ -1,3 +1,4 @@ + .navigation { background-color: transparent; z-index: 100; @@ -33,6 +34,7 @@ fill: red; width: 2.2rem; padding-right: 2.5rem; + } &--userLogo { @@ -40,12 +42,13 @@ border-radius: 5px; cursor: pointer; background-color: rgb(201, 199, 78); - height: 2.5rem; - width: 2.5rem; + height: 3rem; + width: 3rem; margin-right: .5rem; - &:hover .dropdownContent { - transition: all .4s; + &:hover > .dropdownContent { + + transition: all .4s; opacity: 1; visibility: visible; } @@ -131,18 +134,73 @@ .dropdownContent { + display: flex; + flex-direction: column; +// align-items: center; opacity: 0; + + color: #FFF; + transition-delay: .5s; + padding-left: 1rem; + padding-top: 1.8rem; visibility: hidden; - height: 20rem; + height: 19rem; + border: 1px solid rgb(73, 73, 73); width: 15rem; - background-color: red; + background-color: rgba(#000, .9); transform: translateY(4.6rem) translateX(-11rem); + &--2 { + height: 10rem; + } + + &-text { + width: 60%; + padding-top: 1.2rem; + font-size: 1.2rem; + + &:hover { + border-bottom: 1px solid #fff; + // border-width: 2%; + } + } + + &-textOutside { + font-size: 1.2rem; + padding-bottom: 1rem; + } + + &--user { + height: 3rem; + width: 3rem; + border-radius: 5px; + background-color: rgb(64, 168, 228); + + &-2 { + background-color: rgb(230, 145, 48); + } + + &-3 { + background-color: rgb(123, 230, 96); + } + + &-text { + width: 3rem; + font-size: 1.2rem; + transform: translateX(4rem) translateY(-2rem); + + &:hover { + border-bottom: 1px solid #fff; + border-width: 100%; + } + } + } + } .dropdownContainer { + height: 100%; - display: flex; justify-content: center; align-content: center; @@ -151,4 +209,4 @@ opacity: 1; visibility: visible; } -} \ No newline at end of file +} diff --git a/src/static/sass/style.scss b/src/static/sass/style.scss index 6b47bef..10c935f 100644 --- a/src/static/sass/style.scss +++ b/src/static/sass/style.scss @@ -11,7 +11,6 @@ @import "components/modal"; @import "components/search"; @import "components/movie"; -@import "components/movieOriginals"; @import "components/movieShowcase"; @import "layout/footer";