search nav working!

This commit is contained in:
andres alcocer
2018-11-13 19:36:12 -05:00
parent 1cb135b50c
commit 1c657675e6
4 changed files with 13 additions and 82 deletions

View File

@@ -3,7 +3,7 @@ import React from 'react';
const movieRow = (props) => ( const movieRow = (props) => (
<div className="movie"> <div className="movie">
<div className="no movie__column-poster"> <div className="movie__column-poster">
<img src={props.movie.posterSrc} alt="" className="movie__poster" /> <img src={props.movie.posterSrc} alt="" className="movie__poster" />
</div> </div>

View File

@@ -52,14 +52,6 @@ makeAipCall = (searchItem) => {
}); });
} }
// get the user input and pass it to the makeAPICall function
// searchHandler = (event) => {
// // const searchItem = event.target.value;
// // this.makeAipCall(searchItem);
// alert("Hello");
// }
myF = (event) => { myF = (event) => {
this.setState({ this.setState({
myVal: false myVal: false
@@ -78,7 +70,7 @@ makeAipCall = (searchItem) => {
return ( return (
<div> <div>
<Navigation showMan={this.myF} /> <Navigation showMan={this.myF} />
{this.state.myVal ? <Layout /> : <div onClick={this.myB} className="no">{this.state.rows}</div>} {this.state.myVal ? <Layout /> : <div onClick={this.myB} className="search-container">{this.state.rows}</div>}
</div> </div>

View File

@@ -65,16 +65,11 @@ html {
background-color: $color-background; background-color: $color-background;
} }
.no { .search-container {
background-color: $color-background; background-color: $color-background;
height: 150%; height: 150%;
padding-bottom: 10rem; padding-bottom: 10rem;
display: flex;
} }
.yes {
background-color: purple;
height: 100vh;
}

View File

@@ -1,76 +1,20 @@
.movie { .movie {
// margin-top: 5rem; flex: 1 1 auto;
// padding-left: 16rem; padding-top: 6rem;
// padding-right: 6rem;
// padding-bottom: 6rem;
margin-top: 15rem;
height: 1rem;
display: inline-block; display: inline-block;
display: flex;
justify-content: center;
* > img {
width: 25rem;
padding-right: 2rem;
}
&__column-poster { &__column-poster {
height: 25rem; height: 25rem;
width: 18rem;
} }
&__column-overview { &__poster {
padding-left: 3.5rem; height: 100%;
text-align: left; }
width: 60%; }
padding-top: .5rem;
display: flex; div.movie:first-child {
flex-direction: column; padding-top: 15rem;
justify-content: space-between;
align-items: flex-start;
&-heading {
font-size: 3rem;
font-family: 'Fjalla One', sans-serif;
color: $color-white;
}
&-text {
color: $color-white;
font-family: 'Nanum Gothic', sans-serif;
text-align: left;
font-size: 1.6rem;
line-height: 1.5;
}
&-btn {
margin-bottom: 1rem;
color: $color-green;
cursor: pointer;
border-radius: 5rem;
// padding: .5rem;
padding: .8rem 2rem .8rem 2rem;
font-family: 'Nanum Gothic', sans-serif;
font-size: 1.5rem;
border: solid 1.7px $color-green;
transition: all .2s;
&:hover {
background-color: $color-green;
color: #fff;
}
}
}
&__poster {
height: 100%;
}
} }
.even { .even {