From d457ad851f171cae53d9f1994e9f6cc38e1f1da5 Mon Sep 17 00:00:00 2001
From: andres alcocer <andresalcocer7@yahoo.com>
Date: Sat, 17 Nov 2018 12:58:54 -0500
Subject: [PATCH] main layout completed

---
 src/components/Footer/Footer.js               | 20 ++---------------
 src/containers/Layout/Layout.js               |  1 -
 .../MovieOriginals/MovieOriginals.js          | 22 -------------------
 .../MovieOriginalsRows/MovieOriginalsRows.js  | 14 ------------
 .../sass/components/_movieOriginals.scss      |  2 +-
 .../sass/components/_movieShowcase.scss       | 11 +++++-----
 src/static/sass/layout/_footer.scss           | 20 ++++++++++-------
 src/static/sass/layout/_header.scss           |  2 +-
 8 files changed, 21 insertions(+), 71 deletions(-)
 delete mode 100644 src/containers/MovieOriginals/MovieOriginals.js
 delete mode 100644 src/containers/MovieOriginals/MovieOriginalsRows/MovieOriginalsRows.js

diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index ec2da54..b5e104d 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -3,24 +3,8 @@ import React from 'react';
 const footer = () => (
   
    <footer className="footer">
-      <div className="footer__heading">icons</div>
-      <div className="footer__container">
-         <div className="footer__container--description">desc 1</div>
-         <div className="footer__container--description">desc 2</div>
-         <div className="footer__container--description">desc 3</div>
-         <div className="footer__container--description">desc 4</div>
-         <div className="footer__container--description">desc 5</div>
-         <div className="footer__container--description">desc 6</div>
-         <div className="footer__container--description">desc 7</div>
-         <div className="footer__container--description">desc 8</div>
-         <div className="footer__container--description">desc 9</div>
-         <div className="footer__container--description">desc 10</div>
-         <div className="footer__container--description">desc 11</div>
-         <div className="footer__container--description">desc 12</div>
-         <div className="footer__container--description">desc 13</div>
-      </div>
-      <div className="footer__serviceCode">service code</div>
-      <div className="footer__copyright">copyright</div>
+   
+      <div className="footer__copyright">Copyright &copy; 2018 Made with ❤️ by Andres Alcocer</div>
    </footer>
 );
 
diff --git a/src/containers/Layout/Layout.js b/src/containers/Layout/Layout.js
index d1a719f..7614766 100644
--- a/src/containers/Layout/Layout.js
+++ b/src/containers/Layout/Layout.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import axios from 'axios'; 
 import Header from '../../components/Header/Header'; 
 import MovieShowcase from '../MovieShowcase/MovieShowcase'; 
-import MovieOriginals from '../MovieOriginals/MovieOriginals'; 
 import Footer from '../../components/Footer/Footer'; 
 import { BrowserRouter } from "react-router-dom"; 
 
diff --git a/src/containers/MovieOriginals/MovieOriginals.js b/src/containers/MovieOriginals/MovieOriginals.js
deleted file mode 100644
index 9dd20da..0000000
--- a/src/containers/MovieOriginals/MovieOriginals.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { Component } from 'react';
-
-class MovieOriginals extends Component {
-   render() {
-      return (
-         <div className="movieOriginals">
-            <h1>Netflix Originals</h1>
-            <div className="movieOriginals__container">
-               <div className="movieOriginals__container--movie">movie 1</div>
-               <div className="movieOriginals__container--movie">movie 2</div>
-               <div className="movieOriginals__container--movie">movie 3</div>
-               <div className="movieOriginals__container--movie">movie 4</div>
-               <div className="movieOriginals__container--movie">movie 5</div>
-               <div className="movieOriginals__container--movie">movie 6</div>
-            </div>
-         </div>
-
-      );
-   }
-}
-
-export default MovieOriginals; 
\ No newline at end of file
diff --git a/src/containers/MovieOriginals/MovieOriginalsRows/MovieOriginalsRows.js b/src/containers/MovieOriginals/MovieOriginalsRows/MovieOriginalsRows.js
deleted file mode 100644
index 178c54e..0000000
--- a/src/containers/MovieOriginals/MovieOriginalsRows/MovieOriginalsRows.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Component } from 'react';
-
-// `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`;
-
-const movieOriginalsRows = (props) => (
-
-
-   <div onClick={props.movieDetails} className="movieShowcase__container" id="netflixOriginals">
-      <img src={props.posterUrl} className="movieShowcase__container--movie-image" />
-   </div>
-
-);
-
-export default movieOriginalsRows; 
\ No newline at end of file
diff --git a/src/static/sass/components/_movieOriginals.scss b/src/static/sass/components/_movieOriginals.scss
index 0625a01..efe6b9b 100644
--- a/src/static/sass/components/_movieOriginals.scss
+++ b/src/static/sass/components/_movieOriginals.scss
@@ -1,5 +1,5 @@
 .movieOriginals {
-   background-color: pink;
+   background-color: $color-background;
    grid-column: 2 / 13;
 
    &__container {
diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss
index 6346395..10f47fe 100644
--- a/src/static/sass/components/_movieShowcase.scss
+++ b/src/static/sass/components/_movieShowcase.scss
@@ -8,14 +8,14 @@
    }
 
    &__container { 
-     overflow-y: hidden;
+      overflow-y: hidden;
       transition: transform 450ms;
       overflow-x: scroll;
       
       flex: 1 1 auto;
       display: grid;
       grid-template-columns: repeat(20, 1fr);
-      column-gap: .5rem;
+      column-gap: 0;
 
 
       &:hover &--movie {
@@ -27,21 +27,20 @@
          }
       }
       &:hover > *  {
-         transform: translate3d(-5rem, 0, 0); 
+         transform: translate3d(-6rem, 0, 0); 
       }
       &--movie:hover ~ &--movie {
-          transform: translate3d(5rem, 0, 0); 
+          transform: translate3d(6rem, 0, 0); 
       }
 
 
       &--movie { 
-
          cursor: pointer;
          transition: all 450ms; 
          transform: center left; 
          padding-top: 3.5rem;
          padding-bottom: 4rem;
-         height: 18rem;
+         height: 21.5rem;
         
          &:not(:last-child) {
             padding-right: .5rem;
diff --git a/src/static/sass/layout/_footer.scss b/src/static/sass/layout/_footer.scss
index 34a87e4..791a8c5 100644
--- a/src/static/sass/layout/_footer.scss
+++ b/src/static/sass/layout/_footer.scss
@@ -1,14 +1,18 @@
 .footer {
-   background-color: greenyellow;
-   grid-column: 2 / 13;
+   background-color: $color-background;
+   padding-top: 15rem;
+   padding-bottom: 4rem;
+   grid-column: 1 / 13;
+   text-align: center;
    
 
-   &__container {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
+   // // &__container {
+   //    // display: grid;
+   //    // grid-template-columns: repeat(4, 1fr);
 
-      &--description {
-         padding: 3rem;
+      &__copyright {
+         color: #fff;
+         font-size: 1.8rem;
       }
-   }
+   // // }
 }
\ No newline at end of file
diff --git a/src/static/sass/layout/_header.scss b/src/static/sass/layout/_header.scss
index 7518012..91f8a3e 100644
--- a/src/static/sass/layout/_header.scss
+++ b/src/static/sass/layout/_header.scss
@@ -1,5 +1,5 @@
 .header {
-   background-color: rebeccapurple;
+   background-color: $color-background;
    grid-column: 1 / 13;
    display: flex;