Skip to content

Commit

Permalink
Search body card spacing fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ejmudrak
ejmudrak committed Mar 4, 2018
1 parent 07a42f6 commit 3be709a
Showing 1 changed file with 77 additions and 58 deletions.
135 changes: 77 additions & 58 deletions src/presentation/search/SearchBody.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,27 +66,34 @@ const SearchBody = ({ enriched, enrichedVendors, enrichedLocations, location, to
: null }
</div>
</Row>
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start' }}>
<GridList style={{ display: 'flex', flexWrap: 'nowrap', overflowX: 'auto' }} padding={4}>
{take(enriched, 4).map((enrichedResult, i) => (
<Link key={i} to={{ pathname: '/profile', search: `?query=${encodeURIComponent(get(enrichedResult, 'objectID'))}` }}>
<Card key={enrichedResult.objectID} containerStyle={{ paddingBottom: 0, display: 'flex', flexDirection: 'row' }} style={{ width: 400, height: 150, marginRight: 20, borderRadius: 10, marginLeft: i === 0 ? 30 : 0 }}>
<CardMedia>
<img src={get(enrichedResult, 'photoURL', 'http://sunfieldfarm.org/wp-content/uploads/2014/02/profile-placeholder.png')} alt="" style={{ width: 150, height: 150, borderBottomLeftRadius: 10, borderTopLeftRadius: 10 }} />
</CardMedia>
<div>
<CardText style={{ fontSize: 25 }}>
{`${get(enrichedResult, 'firstName', '')} ${get(enrichedResult, 'lastName', '')}`}
</CardText>
<CardText>
{get(enrichedResult, 'headline', '')}
</CardText>
</div>
</Card>
</Link>
))}
</GridList>
</div>

<Row style={{ overflowX: 'auto' }}>
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start' }}>
<GridList style={{ display: 'flex', flexWrap: 'nowrap' }} padding={4}>
{take(enriched, 4).map((enrichedResult, i) => (

<Link key={enrichedResult.objectID} to={{ pathname: '/profile', search: `?query=${encodeURIComponent(get(enrichedResult, 'objectID'))}` }} style={{ width: 'inherit' }}>
<Card containerStyle={{ paddingBottom: 0, display: 'flex', flexDirection: 'row' }} style={{ width: 400, height: 150, marginRight: 20, borderRadius: 10, marginLeft: i === 0 ? 30 : 0 }}>
<CardMedia>
<img src={get(enrichedResult, 'photoURL', 'http://sunfieldfarm.org/wp-content/uploads/2014/02/profile-placeholder.png')} alt="" style={{ width: 150, height: 150, borderBottomLeftRadius: 10, borderTopLeftRadius: 10 }} />
</CardMedia>

<div>
<CardText style={{ fontSize: 25 }}>
{`${get(enrichedResult, 'firstName', '')} ${get(enrichedResult, 'lastName', '')}`}
</CardText>
<CardText>
{get(enrichedResult, 'headline', '')}
</CardText>
</div>

</Card>
</Link>

))}
</GridList>
</div>
</Row>

</div>
) : null }
Expand Down Expand Up @@ -115,22 +122,28 @@ const SearchBody = ({ enriched, enrichedVendors, enrichedLocations, location, to
: null }
</div>
</Row>
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start', alignItems: 'center' }}>
<GridList style={{ display: 'flex', flexWrap: 'nowrap', overflowX: 'auto', overflowY: 'hidden', minHeight: 250 }} padding={4}>
{take(enrichedVendors, 8).map((enrichedResult, i) => (
<div key={enrichedResult.objectID} style={{ display: 'flex', flexDirection: 'column' }}>
<Link to={{ pathname: `/vendor/${enrichedResult.objectID}` }} style={{ display: 'block', margin: 'auto' }}>
<Card key={enrichedResult.objectID} containerStyle={{ paddingBottom: 0, display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }} style={{ width: 200, height: 150, marginRight: 20, borderRadius: 10, marginLeft: i === 0 ? 30 : 0 }}>
<CardMedia>
<img src={get(enrichedResult, 'profileImage', 'https://images.vexels.com/media/users/3/144866/isolated/preview/927c4907bbd0598c70fb79de7af6a35c-business-building-silhouette-by-vexels.png')} alt="" style={{ width: 200, height: 150, borderRadius: 10, objectFit: 'fill' }} />
</CardMedia>
</Card>
</Link>
<h3 style={{ textAlign: 'center', width: '100%', marginLeft: enrichedVendors.length === 1 ? 50 : 0 }}> {`${get(enrichedResult, 'vendorName', '')}`} </h3>
</div>
))}
</GridList>
</div>

<Row style={{ overflowX: 'auto' }}>
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start', alignItems: 'center' }}>
<GridList style={{ display: 'flex', flexWrap: 'nowrap', overflowX: 'auto', overflowY: 'hidden', minHeight: 250 }} padding={4}>
{take(enrichedVendors, 8).map((enrichedResult, i) => (

<div key={enrichedResult.objectID} style={{ display: 'flex', flexDirection: 'column' }}>
<Link to={{ pathname: `/vendor/${enrichedResult.objectID}` }} style={{ display: 'block', margin: 'auto' }}>
<Card containerStyle={{ paddingBottom: 0, display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }} style={{ width: 200, height: 150, marginRight: 20, borderRadius: 10, marginLeft: i === 0 ? 30 : 0 }}>
<CardMedia>
<img src={get(enrichedResult, 'profileImage', 'https://images.vexels.com/media/users/3/144866/isolated/preview/927c4907bbd0598c70fb79de7af6a35c-business-building-silhouette-by-vexels.png')} alt="" style={{ width: 200, height: 150, borderRadius: 10, objectFit: 'fill' }} />
</CardMedia>
</Card>
</Link>
<h3 style={{ textAlign: 'center', width: '100%', marginLeft: enrichedVendors.length === 1 ? 50 : 0 }}> {`${get(enrichedResult, 'vendorName', '')}`} </h3>
</div>

))}
</GridList>
</div>
</Row>

</div>
) : null
}
Expand Down Expand Up @@ -160,26 +173,32 @@ const SearchBody = ({ enriched, enrichedVendors, enrichedLocations, location, to
: null }
</div>
</Row>
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start', alignItems: 'center' }}>
<GridList style={{ display: 'flex', flexWrap: 'nowrap', overflowX: 'auto', overflowY: 'hidden', minHeight: 250 }} padding={4}>
{take(enrichedLocations, 4).map((enrichedResult, i) => (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Link to={{ pathname: `/location/${enrichedResult.objectID}` }} style={{ display: 'block', margin: 'auto' }}>
<Card
key={enrichedResult.objectID}
containerStyle={{ paddingBottom: 0, display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}
style={{ width: 300, height: 200, marginRight: 20, borderRadius: 10, marginLeft: i === 0 ? 30 : 0 }}
>
<CardMedia>
<img src={get(enrichedResult, 'displayImages[0].url', 'https://images.vexels.com/media/users/3/144866/isolated/preview/927c4907bbd0598c70fb79de7af6a35c-business-building-silhouette-by-vexels.png')} alt="" style={{ width: 300, height: 200, borderRadius: 10, objectFit: 'fill' }} />
</CardMedia>
</Card>
</Link>
<h3 style={{ textAlign: 'center', width: '100%', marginLeft: enrichedLocations.length === 1 ? 90 : 0 }}> {`${get(enrichedResult, 'locationName', '')}`} </h3>
</div>
))}
</GridList>
</div>

<Row style={{ overflowX: 'auto' }}>
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start', alignItems: 'center' }}>
<GridList style={{ display: 'flex', flexWrap: 'nowrap', overflowX: 'auto', overflowY: 'hidden', minHeight: 250 }} padding={4}>
{take(enrichedLocations, 4).map((enrichedResult, i) => (

<div key={enrichedResult.objectID} style={{ display: 'flex', flexDirection: 'column' }}>
<Link to={{ pathname: `/location/${enrichedResult.objectID}` }} style={{ display: 'block', margin: 'auto' }}>
<Card
key={enrichedResult.objectID}
containerStyle={{ paddingBottom: 0, display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}
style={{ width: 300, height: 200, marginRight: 20, borderRadius: 10, marginLeft: i === 0 ? 30 : 0 }}
>
<CardMedia>
<img src={get(enrichedResult, 'displayImages[0].url', 'https://images.vexels.com/media/users/3/144866/isolated/preview/927c4907bbd0598c70fb79de7af6a35c-business-building-silhouette-by-vexels.png')} alt="" style={{ width: 300, height: 200, borderRadius: 10, objectFit: 'fill' }} />
</CardMedia>
</Card>
</Link>
<h3 style={{ textAlign: 'center', width: '100%', marginLeft: enrichedLocations.length === 1 ? 90 : 0 }}> {`${get(enrichedResult, 'locationName', '')}`} </h3>
</div>

))}
</GridList>
</div>
</Row>

</div>
) : null
}
Expand Down Expand Up @@ -220,7 +239,7 @@ const SearchBody = ({ enriched, enrichedVendors, enrichedLocations, location, to
}}
key={enrichedResult.objectID}
containerStyle={{ paddingBottom: 0, display: 'flex', flexDirection: 'row' }}
style={{ width: 400, height: 150, marginRight: 20, borderRadius: 10, marginLeft: 30, cursor: 'pointer' }}
style={{ width: 400, height: 150, marginRight: 20, marginBottom: 10, borderRadius: 10, marginLeft: 30, cursor: 'pointer' }}
>
<CardMedia>
<img src={get(enrichedResult, 'photoURL', 'http://sunfieldfarm.org/wp-content/uploads/2014/02/profile-placeholder.png')} alt="" style={{ objectFit: 'cover', width: 150, height: 150, borderBottomLeftRadius: 10, borderTopLeftRadius: 10 }} />
Expand Down

0 comments on commit 3be709a

Please sign in to comment.