center the explore maps div! (#787)

* ooh baby

* will add displayStyle again later if we actually build it

app/assets/stylesheets/clean.css.erb

@@ -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 {

app/assets/stylesheets/mapcard.scss.erb

@@ -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 {

frontend/src/Metamaps/Views/ExploreMaps.js

@@ -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,

frontend/src/components/Maps/index.js

@@ -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') {
+  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 (
       <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