diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb index deb2719f..2ac35019 100644 --- a/app/assets/stylesheets/clean.css.erb +++ b/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 { diff --git a/app/assets/stylesheets/mapcard.scss.erb b/app/assets/stylesheets/mapcard.scss.erb index 529257ed..871b6baf 100644 --- a/app/assets/stylesheets/mapcard.scss.erb +++ b/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 { diff --git a/frontend/src/Metamaps/Views/ExploreMaps.js b/frontend/src/Metamaps/Views/ExploreMaps.js index c9f9b78b..e843e7fe 100644 --- a/frontend/src/Metamaps/Views/ExploreMaps.js +++ b/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, diff --git a/frontend/src/components/Maps/MapListItem.js b/frontend/src/components/Maps/MapListItem.js deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/components/Maps/index.js b/frontend/src/components/Maps/index.js index 22a41d3e..9326c6c1 100644 --- a/frontend/src/components/Maps/index.js +++ b/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') { - mapElements = maps.models.map(function (map) { - return - }) - } else if (displayStyle === 'list') { - mapElements = maps.models.map(function (map) { - return - }) - } + 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 (
-
+
{ user ? : null } { currentUser && !user ? : null } - { mapElements } + { maps.models.map(map => ) }
{!moreToLoad ? null : [ , @@ -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