diff --git a/src/containers/DisplayMovieRow.js b/src/containers/DisplayMovieRow.js
index 9c5573a..abab825 100644
--- a/src/containers/DisplayMovieRow.js
+++ b/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 = (
-
- );
-
- return movieComponent;
- }
- });
- return movieRow;
-};
-
export default class DisplayMovieRow extends Component {
constructor(props) {
super(props);
@@ -67,11 +39,26 @@ export default class DisplayMovieRow extends Component {
{this.props.title}
- {
- 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 (
-
-

-
- )
- })
- }
- */}
\ No newline at end of file
diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss
index 0b44132..c2d6769 100644
--- a/src/static/sass/components/_movieShowcase.scss
+++ b/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>* {
- // // transform: translate3d(-5rem, 0, 0);
+ &--movie__netflix:hover~&--movie__netflix {
+ 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;
}
}
}