diff --git a/src/containers/DisplayMovieRow.js b/src/containers/DisplayMovieRow.js
index 272cfb0..9c5573a 100644
--- a/src/containers/DisplayMovieRow.js
+++ b/src/containers/DisplayMovieRow.js
@@ -69,8 +69,13 @@ export default class DisplayMovieRow extends Component {
className="movieShowcase__container"
slidesPerView={4}
navigation
+ grabCursor={false}
+ draggable={false}
+ loop={true}
+ preventClicksPropagation={true}
+ preventClicks={true}
scrollbar={{ draggable: false, hide: true }}
- slideToClickedSlide={{ draggable: false }}
+ slideToClickedSlide={false}
pagination={{ clickable: true }}
onSwiper={(swiper) => console.log(swiper)}
onSlideChange={() => console.log('slide change')}
@@ -86,11 +91,13 @@ export default class DisplayMovieRow extends Component {
movieImageUrl =
'https://image.tmdb.org/t/p/original/' + movie.poster_path;
}
- return (
-
-
-
- )
+ if (movie.poster_path && movie.backdrop_path !== null) {
+ return (
+
+
+
+ )
+ }
})
}
diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss
index fd9d29a..0b44132 100644
--- a/src/static/sass/components/_movieShowcase.scss
+++ b/src/static/sass/components/_movieShowcase.scss
@@ -1,3 +1,42 @@
+// Override swiper styles
+.swiper-pagination {
+ top: 0;
+ height: 2rem;
+ text-align: right;
+ padding-right: 4rem;
+}
+
+.swiper-pagination-bullet {
+ background-color: rgb(255, 255, 255);
+}
+
+.swiper-container-horizontal>.swiper-pagination-bullets {
+ bottom: 0;
+ left: 0;
+ width: 100%;
+}
+
+div.swiper-button-prev,
+div.swiper-button-next {
+ color: rgb(252, 252, 252);
+ transition: all .3s;
+
+ &:hover {
+ transition: all .3s;
+ }
+
+}
+
+.swiper-wrapper:hover .swiper-slide {
+ opacity: .3;
+
+ &:hover {
+ transform: scale(1.4);
+ opacity: 1;
+ }
+}
+
+
.movieShowcase {
background-color: $color-background;
grid-column: 2 / 13;
@@ -12,26 +51,18 @@
}
&__container {
- // overflow-y: hidden;
transition: transform 450ms;
- // overflow: -moz-hidden-unscrollable;
- // overflow-x: scroll;
- // display: flex;
- // width: 95vw;
- // overflow: -moz-scrollbars-horizontal;
- // grid-template-columns: repeat(20, 1fr);
- // column-gap: 0;
@include responsive(phone) {
width: 98vw;
}
&:hover &--movie {
- opacity: .3;
+ // opacity: .3;
&:hover {
- transform: scale(1.4);
- opacity: 1;
+ // transform: scale(1.4);
+ // opacity: 1;
}
}
@@ -99,7 +130,8 @@
&-image {
height: 100%;
- // object-fit: contain;
+ width: 100%;
+ object-fit: contain;
}
&__netflix {
@@ -122,33 +154,4 @@
}
}
}
-}
-
-// Override swiper styles
-.swiper-pagination {
- top: 0;
- height: 2rem;
- text-align: right;
- padding-right: 4rem;
-}
-
-.swiper-pagination-bullet {
- background-color: rgb(255, 255, 255);
-}
-
-.swiper-container-horizontal>.swiper-pagination-bullets {
- bottom: 0;
- left: 0;
- width: 100%;
-}
-
-div.swiper-button-prev,
-div.swiper-button-next {
- color: rgb(252, 252, 252);
- transition: all .3s;
-
- &:hover {
- background-color: grayscale($color: #202020);
- }
-
}
\ No newline at end of file