set responsive hover styles

src/containers/DisplayMovieRow.js

@@ -12,34 +12,6 @@ import MovieGenre from '../components/MovieGenre';
 // install Swiper components
 SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
 
-const getMovieRows = (movies, url, selectMovieHandler) => {
-  const movieRow = movies.map((movie) => {
-    let movieImageUrl =
-      'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
-    if (
-      url === `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
-    ) {
-      movieImageUrl =
-        'https://image.tmdb.org/t/p/original/' + movie.poster_path;
-    }
-
-    if (movie.poster_path && movie.backdrop_path !== null) {
-      const movieComponent = (
-        <MovieGenre
-          selectMovieHandler={selectMovieHandler}
-          key={movie.id}
-          url={url}
-          posterUrl={movieImageUrl}
-          movie={movie}
-        />
-      );
-
-      return movieComponent;
-    }
-  });
-  return movieRow;
-};
-
 export default class DisplayMovieRow extends Component {
   constructor(props) {
     super(props);
@@ -67,11 +39,26 @@ export default class DisplayMovieRow extends Component {
         <h1 className="movieShowcase__heading">{this.props.title}</h1>
         <Swiper
           className="movieShowcase__container"
-          slidesPerView={4}
+          // slidesPerView={4}
           navigation
           grabCursor={false}
+          slidesPerGroup={4}
           draggable={false}
           loop={true}
+          breakpoints={{
+            1378: {
+              slidesPerView: 5
+            },
+            998: {
+              slidesPerView: 4
+            },
+            625: {
+              slidesPerView: 3
+            },
+            0: {
+              slidesPerView: 2
+            },
+          }}
           preventClicksPropagation={true}
           preventClicks={true}
           scrollbar={{ draggable: false, hide: true }}
@@ -105,24 +92,3 @@ export default class DisplayMovieRow extends Component {
     );
   }
 }
-
-{/* <div className="movieShowcase__container">
-  {
-    this.props.movies.map((movie) => {
-      let movieImageUrl =
-        'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
-      if (
-        this.props.url ===
-        `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
-      ) {
-        movieImageUrl =
-          'https://image.tmdb.org/t/p/original/' + movie.poster_path;
-      }
-      return (
-        <div className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
-          <img src={movieImageUrl} className="movieShowcase__container--movie-image" />
-        </div>
-      )
-    })
-  }
-</div> */}

src/static/sass/components/_movieShowcase.scss

@@ -18,21 +18,25 @@
 
 div.swiper-button-prev,
 div.swiper-button-next {
-   color: rgb(252, 252, 252);
    transition: all .3s;
+   color: rgb(255, 255, 255);
 
    &:hover {
+      transform: scale(1.2);
       transition: all .3s;
    }
-
 }
 
 .swiper-wrapper:hover .swiper-slide {
    opacity: .3;
 
    &:hover {
-      transform: scale(1.4);
+      transform: scale(1.3);
       opacity: 1;
+
+      @include responsive(tab_port) {
+         transform: scale(1.2);
+      }
    }
 }
 
@@ -57,20 +61,11 @@ div.swiper-button-next {
          width: 98vw;
       }
 
-      &:hover &--movie {
-         // opacity: .3;
-
-         &:hover {
-            // transform: scale(1.4);
-            // opacity: 1;
-         }
-      }
-
       &--movie:hover~&--movie {
-         transform: translate3d(6rem, 0, 0);
+         transform: translate3d(5rem, 0, 0);
 
          @include responsive(tab_port) {
-            transform: translate3d(4.5rem, 0, 0);
+            transform: translate3d(3rem, 0, 0);
          }
 
          @include responsive(phone) {
@@ -78,31 +73,21 @@ div.swiper-button-next {
          }
       }
 
-      // &:hover>div.swiper-wrapper>* {
+      &--movie__netflix:hover~&--movie__netflix {
-      //    // transform: translate3d(-5rem, 0, 0);
+         transform: translate3d(1rem, 0, 0);
+      }
 
-      //    @include responsive(tab_port) {
-      //       // transform: translate3d(-5rem, 0, 0);
-      //    }
-
-      //    @include responsive(phone) {
-      //       // transform: translate3d(-3rem, 0, 0);
-      //    }
-      // }
-
-      // &:hover>div.swiper-wrapper~&--movie__netflix {
-      //    transform: translate3d(-1rem, 0, 0);
-      // }
-
-      // &--movie__netflix:hover~&--movie__netflix {
-      //    transform: translate3d(1rem, 0, 0);
-      // }
       &:hover &--movie__netflix {
-         opacity: .3;
-
          &:hover {
             transform: scale(1.1);
-            opacity: 1;
+
+            @include responsive(tab_port) {
+               transform: scale(1.05);
+            }
+
+            @include responsive(phone) {
+               transform: scale(1.05);
+            }
          }
       }
 
@@ -112,16 +97,17 @@ div.swiper-button-next {
          transform: center left;
          padding-top: 3.5rem;
          padding-bottom: 4rem;
-         height: 21.5rem;
+         // height: 21.5rem;
          min-height: 0;
          object-fit: contain;
 
          @include responsive(tab_port) {
-            height: 18.5rem;
+            // height: 18.5rem;
+            // height: 40rem;
          }
 
          @include responsive(phone) {
-            height: 14rem;
+            // height: 14rem;
          }
 
          &:not(:last-child) {
@@ -139,17 +125,17 @@ div.swiper-button-next {
             padding-top: 3rem;
             padding-bottom: 4rem;
             padding-right: 1rem;
-            height: 52rem;
+            // height: 52rem;
             cursor: pointer;
             transition: all 450ms;
             transform: center left;
 
             @include responsive(tab_port) {
-               height: 42rem;
+               // height: 42rem;
             }
 
             @include responsive(phone) {
-               height: 34rem;
+               // height: 34rem;
             }
          }
       }