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 {
padding: 0 5%;
position: absolute;
width: 90%;
height: 100%;
width: 100%;
overflow-y: auto;
}
#exploreMaps > div {
margin-top: 110px;
margin: 110px auto 0 auto;
}
.button.loadMore {

View file

@ -9,7 +9,7 @@
overflow: visible;
background: #e8e8e8;
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);
}
.map.newMap {

View file

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

View file

@ -2,30 +2,41 @@ import React, { Component, PropTypes } from 'react'
import Header from './Header'
import MapperCard from './MapperCard'
import MapCard from './MapCard'
import MapListItem from './MapListItem'
const MAP_WIDTH = 252
class Maps extends Component {
render = () => {
const { maps, currentUser, section, displayStyle, user, moreToLoad, loadMore } = this.props
let mapElements
if (displayStyle === 'grid') {
mapElements = maps.models.map(function (map) {
return <MapCard key={ map.id } map={ map } currentUser={ currentUser } />
})
} else if (displayStyle === 'list') {
mapElements = maps.models.map(function (map) {
return <MapListItem key={ map.id } map={ map } />
})
constructor(props) {
super(props)
this.state = { mapsWidth: 0 }
}
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 (
<div>
<div id='exploreMaps'>
<div>
<div style={ style }>
{ 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 }
{ mapElements }
{ maps.models.map(map => <MapCard key={ map.id } map={ map } currentUser={ currentUser } />) }
<div className='clearfloat'></div>
{!moreToLoad ? null : [
<button className="button loadMore" onClick={ loadMore }>load more</button>,
@ -46,7 +57,6 @@ Maps.propTypes = {
section: PropTypes.string.isRequired,
maps: PropTypes.object.isRequired,
moreToLoad: PropTypes.bool.isRequired,
displayStyle: PropTypes.string,
user: PropTypes.object,
currentUser: PropTypes.object,
loadMore: PropTypes.func