psmattas/Netflix-Clone
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

set responsive hover styles

Browse Source
This commit is contained in:
andres alcocer
2020-08-05 13:44:25 -04:00
parent 780b0420ff
commit d9d60ac879
2 changed files with 43 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/containers/DisplayMovieRow.js
View File

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

68
src/static/sass/components/_movieShowcase.scss
View File

@@ -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;
}
}
}