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

6
src/containers/Home.js
View File

@@ -46,14 +46,16 @@ class Home extends Component {
render() { render() {
return ( return (
<div> <>
<div class="main-content">
<MainContent /> <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;

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

@@ -12,6 +12,7 @@
@include responsive(tab_port) { @include responsive(tab_port) {
height: 38rem; height: 38rem;
} }
@include responsive(phone) { @include responsive(phone) {
height: 50rem; height: 50rem;
} }
@@ -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;
} }

14
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;
@@ -37,19 +37,19 @@
} }
&: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);
@@ -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 @@
} }
} }
} }