minor details

2018-11-18 22:03:40 -05:00
parent 731af42186
commit 3192982638
11 changed files with 159 additions and 46 deletions
--- 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 = () => (
  
   <footer className="footer">
   
-      <div className="footer__copyright">&copy; 2018 Made with ❤️ by Andres Alcocer</div>
+      <div className="footer__copyright">
+      &copy; 2018 Made with ❤️ by <a className="footer__copyright--link" href="http://andresio.com"> Andres Alcocer</a></div>
   </footer>
 );

--- 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 
- */
--- 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}

-         <div onClick={this.props.movieDetails} style={netflixUrl ? netflixStyle : null} className={"movieShowcase__container--movie"}>
+         <div onClick={this.props.movieDetails} 
+            className={ "movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
            <img src={this.props.posterUrl} className="movieShowcase__container--movie-image"/>
         </div>

--- a/src/containers/Navigation/Navigation.js
+++ b/src/containers/Navigation/Navigation.js
@@ -56,16 +56,38 @@ class navigation extends Component {
         
          <NavigationItem link="/">KIDS</NavigationItem>         
          <NavigationItem link="/">DVD</NavigationItem>
-          <BellLogo className="navigation__container--bellLogo"/>
-
+          <BellLogo className="navigation__container--bellLogo" />  
+         
            <div className="dropdownContainer">
-            <div className="navigation__container--userLogo">
-              <div className="dropdownContent"></div>
-            </div>
+            
+              <div className="navigation__container--userLogo">
+                <div className="dropdownContent">
+                <div>
+                  <div className="dropdownContent--user"></div>
+                  <p className="dropdownContent--user-text">Andres</p>
+                </div>
+                <div>
+                  <div className="dropdownContent--user dropdownContent--user-2"></div>
+                  <p className="dropdownContent--user-text">Tony</p>
+                </div>
+                <div>
+                  <div className="dropdownContent--user dropdownContent--user-3"></div>
+                  <p className="dropdownContent--user-text">Luis</p>
+                </div>
+                <p className="dropdownContent-text">Manage Profiles</p>
+             
+                </div>
+                <div className="dropdownContent dropdownContent--2">
+                <p className="dropdownContent-textOutside">Account</p>
+                <p className="dropdownContent-textOutside">Help Center</p>
+                <p className="dropdownContent-textOutside">Sign out of Netflix</p>
+                </div>
+              </div>
            </div>
  
          <DropdownArrow className="navigation__container--downArrow"/>
        </ul>
+        
      </nav>
    )
  }
--- a/src/index.html
+++ b/src/index.html
@@ -13,4 +13,13 @@
   <div id="app"></div>
 </body>

-</html>
+</html>
+
+
+
+
+
+
+
+
+
--- a/src/static/sass/components/_movieOriginals.scss
+++ b/src/static/sass/components/_movieOriginals.scss
@@ -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;
-      }
-   }
-}
--- 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;
         }

      }
--- 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;
+         }
+      }  
+ 
 }
--- 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;
--- 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;
   }
-}
+}
--- 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";