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) => (
<div className="movie">
<div className="no movie__column-poster">
<div className="movie__column-poster">
<img src={props.movie.posterSrc} alt="" className="movie__poster" />
</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) => {
this.setState({
myVal: false
@@ -78,7 +70,7 @@ makeAipCall = (searchItem) => {
return (
<div>
<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>

View File

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

View File

@@ -1,71 +1,11 @@
.movie {
// margin-top: 5rem;
// padding-left: 16rem;
// padding-right: 6rem;
// padding-bottom: 6rem;
margin-top: 15rem;
height: 1rem;
flex: 1 1 auto;
padding-top: 6rem;
display: inline-block;
display: flex;
justify-content: center;
* > img {
width: 25rem;
padding-right: 2rem;
}
&__column-poster {
height: 25rem;
}
&__column-overview {
padding-left: 3.5rem;
text-align: left;
width: 60%;
padding-top: .5rem;
display: flex;
flex-direction: column;
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;
}
}
width: 18rem;
}
&__poster {
@@ -73,6 +13,10 @@
}
}
div.movie:first-child {
padding-top: 15rem;
}
.even {
background-color: $color-purple;
}