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

fixed modal style bug

Browse Source
This commit is contained in:
andres alcocer
2020-07-11 20:10:32 -04:00
parent 093a8f54c2
commit caee6b8726
5 changed files with 46 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/containers/Home.js
View File

@@ -46,14 +46,16 @@ class Home extends Component {
render() { render() {
return ( return (
<div> <>
<MainContent /> <div class="main-content">
<MainContent />
</div>
<Modal show={this.state.toggleModal} <Modal show={this.state.toggleModal}
modalClosed={this.closeModal} modalClosed={this.closeModal}
movie={this.state.movieOverview}> movie={this.state.movieOverview}>
<MovieDetails movie={this.state.movieOverview} /> <MovieDetails movie={this.state.movieOverview} />
</Modal> </Modal>
</div> </>
); );
} }
} }

1
src/index.js
View File

@@ -16,7 +16,6 @@ const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
// - fix styling issue // - fix styling issue
// - implement carousel // - implement carousel
// - fix modal backdrop bug // - fix modal backdrop bug
// - fix search movie onClickFunction
const app = ( const app = (
<Provider store={createStoreWithMiddleware(reducers)}> <Provider store={createStoreWithMiddleware(reducers)}>
<App /> <App />

2
src/static/sass/components/_backdrop.scss
View File

@@ -1,5 +1,5 @@
.backdrop { .backdrop {
width: 100%; width: 120%;
height: 100%; height: 100%;
position: fixed; position: fixed;
z-index: 100; z-index: 100;

14
src/static/sass/components/_modal.scss
View File

@@ -2,7 +2,7 @@
position: fixed; position: fixed;
z-index: 500; z-index: 500;
width: 100%; width: 100%;
top: 0; top: 0;
left: 0; left: 0;
color: #fff; color: #fff;
height: 52rem; height: 52rem;
@@ -12,9 +12,10 @@
@include responsive(tab_port) { @include responsive(tab_port) {
height: 38rem; height: 38rem;
} }
@include responsive(phone) {
height: 50rem; @include responsive(phone) {
} height: 50rem;
}
&__container { &__container {
@@ -84,6 +85,7 @@
width: 95%; width: 95%;
color: rgba(255, 255, 255, 0.877); color: rgba(255, 255, 255, 0.877);
} }
@include responsive(phone) { @include responsive(phone) {
padding-top: 1rem; padding-top: 1rem;
font-size: 1.7rem; font-size: 1.7rem;
@@ -132,10 +134,8 @@
left: 0; left: 0;
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
.hide { .hide {
visibility: hidden; visibility: hidden;
} }

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

@@ -12,7 +12,7 @@
} }
&__container { &__container {
scrollbar-width: none; overflow-y: hidden;
transition: transform 450ms; transition: transform 450ms;
overflow: -moz-hidden-unscrollable; overflow: -moz-hidden-unscrollable;
overflow-x: scroll; overflow-x: scroll;
@@ -36,20 +36,20 @@
} }
} }
&:hover > * { &:hover>* {
transform: translate3d(-6rem, 0, 0); // transform: translate3d(-5rem, 0, 0);
@include responsive(tab_port) { @include responsive(tab_port) {
transform: translate3d(-5rem, 0, 0); transform: translate3d(-5rem, 0, 0);
} }
@include responsive(phone) { // @include responsive(phone) {
transform: translate3d(-3rem, 0, 0); // // transform: translate3d(-3rem, 0, 0);
} // }
} }
&--movie:hover ~ &--movie { &--movie:hover~&--movie {
transform: translate3d(6rem, 0, 0); // transform: translate3d(6rem, 0, 0);
@include responsive(tab_port) { @include responsive(tab_port) {
transform: translate3d(4.5rem, 0, 0); transform: translate3d(4.5rem, 0, 0);
@@ -61,12 +61,12 @@
} }
&:hover > &--movie__netflix { &:hover>&--movie__netflix {
transform: translate3d(-1rem, 0, 0); transform: translate3d(-1rem, 0, 0);
} }
&--movie__netflix:hover ~ &--movie__netflix { &--movie__netflix:hover~&--movie__netflix {
transform: translate3d(1rem, 0, 0); transform: translate3d(1rem, 0, 0);
} }
&:hover &--movie__netflix { &:hover &--movie__netflix {
@@ -117,6 +117,7 @@
@include responsive(tab_port) { @include responsive(tab_port) {
height: 42rem; height: 42rem;
} }
@include responsive(phone) { @include responsive(phone) {
height: 34rem; height: 34rem;
} }
@@ -125,4 +126,3 @@
} }
} }
} }