center the explore maps div! (#787)

* ooh baby

* will add displayStyle again later if we actually build it
This commit is contained in:
Connor Turland 2016-10-19 14:40:42 -04:00 committed by GitHub
parent 9299ca5f2c
commit 52c340b8f5
5 changed files with 29 additions and 21 deletions

View file

@ -656,15 +656,14 @@
} }
#exploreMaps { #exploreMaps {
padding: 0 5%;
position: absolute; position: absolute;
width: 90%;
height: 100%; height: 100%;
width: 100%;
overflow-y: auto; overflow-y: auto;
} }
#exploreMaps > div { #exploreMaps > div {
margin-top: 110px; margin: 110px auto 0 auto;
} }
.button.loadMore { .button.loadMore {

View file

@ -9,7 +9,7 @@
overflow: visible; overflow: visible;
background: #e8e8e8; background: #e8e8e8;
border-radius:2px; border-radius:2px;
margin:16px 16px 16px 19px; margin:16px;
box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16); box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
} }
.map.newMap { .map.newMap {

View file

@ -35,7 +35,6 @@ const ExploreMaps = {
var exploreObj = { var exploreObj = {
currentUser: Active.Mapper, currentUser: Active.Mapper,
section: self.collection.id, section: self.collection.id,
displayStyle: 'grid',
maps: self.collection, maps: self.collection,
moreToLoad: self.collection.page != 'loadedAll', moreToLoad: self.collection.page != 'loadedAll',
user: mapperObj, user: mapperObj,

View file

@ -2,30 +2,41 @@ import React, { Component, PropTypes } from 'react'
import Header from './Header' import Header from './Header'
import MapperCard from './MapperCard' import MapperCard from './MapperCard'
import MapCard from './MapCard' import MapCard from './MapCard'
import MapListItem from './MapListItem'
const MAP_WIDTH = 252
class Maps extends Component { class Maps extends Component {
render = () => {
const { maps, currentUser, section, displayStyle, user, moreToLoad, loadMore } = this.props
let mapElements
if (displayStyle === 'grid') { constructor(props) {
mapElements = maps.models.map(function (map) { super(props)
return <MapCard key={ map.id } map={ map } currentUser={ currentUser } /> this.state = { mapsWidth: 0 }
})
} else if (displayStyle === 'list') {
mapElements = maps.models.map(function (map) {
return <MapListItem key={ map.id } map={ map } />
})
} }
componentDidMount() {
window && window.addEventListener('resize', this.resize)
this.resize()
}
componentWillUnmount() {
window && window.removeEventListener('resize', this.resize)
}
resize = () => {
const mapSpaces = Math.floor(document.body.clientWidth / MAP_WIDTH)
this.setState({ mapsWidth: mapSpaces * MAP_WIDTH })
}
render = () => {
const { maps, currentUser, section, user, moreToLoad, loadMore } = this.props
const style = { width: this.state.mapsWidth + 'px' }
return ( return (
<div> <div>
<div id='exploreMaps'> <div id='exploreMaps'>
<div> <div style={ style }>
{ user ? <MapperCard user={ user } /> : null } { user ? <MapperCard user={ user } /> : null }
{ currentUser && !user ? <div className="map newMap"><a href="/maps/new"><div className="newMapImage"></div><span>Create new map...</span></a></div> : null } { currentUser && !user ? <div className="map newMap"><a href="/maps/new"><div className="newMapImage"></div><span>Create new map...</span></a></div> : null }
{ mapElements } { maps.models.map(map => <MapCard key={ map.id } map={ map } currentUser={ currentUser } />) }
<div className='clearfloat'></div> <div className='clearfloat'></div>
{!moreToLoad ? null : [ {!moreToLoad ? null : [
<button className="button loadMore" onClick={ loadMore }>load more</button>, <button className="button loadMore" onClick={ loadMore }>load more</button>,
@ -46,7 +57,6 @@ Maps.propTypes = {
section: PropTypes.string.isRequired, section: PropTypes.string.isRequired,
maps: PropTypes.object.isRequired, maps: PropTypes.object.isRequired,
moreToLoad: PropTypes.bool.isRequired, moreToLoad: PropTypes.bool.isRequired,
displayStyle: PropTypes.string,
user: PropTypes.object, user: PropTypes.object,
currentUser: PropTypes.object, currentUser: PropTypes.object,
loadMore: PropTypes.func loadMore: PropTypes.func