betterplace_explorer 0.0.1.pre.alpha3 → 0.0.1.pre.alpha4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 744007d44908e58afb9c3df1132147d461da05b0
-  data.tar.gz: d7a826b8fde7e9b7c20bd3d0f2333dd0f570ff64
+  metadata.gz: 3f05de83b8c3285d214c8e08cb1b34885d09041d
+  data.tar.gz: 3dcb0b5cdab9f9373a6a96c0ee8808351e2613ec
 SHA512:
-  metadata.gz: d35926895739173156e4b1dbb6844b427f76b76b0973ea7e2e11a930b4b696059982a186b4f237ba4a81b745b05858353c853ff5bac169cbac972f322ff9e1a9
-  data.tar.gz: 90c5334037a76eb768cee703e6300907b16ca3f5899852901120e093ee521c59cbccaf787fbb16a459b21aecaea7e45f3c62a975ed52fdc281c5a73db28bc90f
+  metadata.gz: f3efa99099cbb1c5e4aa475f235149fe794d0a6aa08b1089f4ebe76808ee5845dbaca53a25ab2420f066bc05c8dfab90e3f026143d3a8b745d11edf1d3963630
+  data.tar.gz: d9371bd9ee1184a344355d113c1e66014bd231acc3dfcdd2111a32710a27bb41f49086365285c7e739c24fc33a92b1a48b8a852eb1c991224781ef95d8fa1ce1

data/app/assets/javascripts/betterplace_explorer.js

@@ -64,14 +64,10 @@
 
 	var _Map2 = _interopRequireDefault(_Map);
 
-	var _LocationInput = __webpack_require__(277);
+	var _LocationInput = __webpack_require__(278);
 
 	var _LocationInput2 = _interopRequireDefault(_LocationInput);
 
-	var _Pagination = __webpack_require__(278);
-
-	var _Pagination2 = _interopRequireDefault(_Pagination);
-
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 	var Explorer = _react2['default'].createClass({
@@ -114,18 +110,9 @@
 	      return _react2['default'].createElement(
 	        'div',
 	        { className: 'betterplace-explorer' },
-	        _react2['default'].createElement(
-	          'div',
-	          { className: 'row' },
-	          _react2['default'].createElement(_LocationInput2['default'], { changeLocation: this.changeLocation })
-	        ),
-	        _react2['default'].createElement(
-	          'div',
-	          { className: 'row' },
-	          _react2['default'].createElement(_Pagination2['default'], { currentPage: this.state.currentPage, totalPages: this.state.totalPages, changePage: this.changePage }),
-	          _react2['default'].createElement(_VolunteeringList2['default'], { records: this.state.records, totalEntries: this.state.totalEntries, setHighlightRecord: this.setHighlightRecord }),
-	          _react2['default'].createElement(_Map2['default'], { records: this.state.records, mapIdle: this.loadByBoundingBox, changeBounds: this.state.changeBounds, highlightRecord: this.state.highlightRecord })
-	        )
+	        _react2['default'].createElement(_LocationInput2['default'], { changeLocation: this.changeLocation }),
+	        _react2['default'].createElement(_VolunteeringList2['default'], { records: this.state.records, totalEntries: this.state.totalEntries, setHighlightRecord: this.setHighlightRecord, currentPage: this.state.currentPage, totalPages: this.state.totalPages, changePage: this.changePage }),
+	        _react2['default'].createElement(_Map2['default'], { records: this.state.records, mapIdle: this.loadByBoundingBox, changeBounds: this.state.changeBounds, highlightRecord: this.state.highlightRecord, setHighlightRecord: this.setHighlightRecord })
 	      );
 	    }
 
@@ -26026,6 +26013,10 @@
 
 	var _react2 = _interopRequireDefault(_react);
 
+	var _Pagination = __webpack_require__(279);
+
+	var _Pagination2 = _interopRequireDefault(_Pagination);
+
 	var _Volunteering = __webpack_require__(230);
 
 	var _Volunteering2 = _interopRequireDefault(_Volunteering);
@@ -26045,7 +26036,7 @@
 
 	      return _react2['default'].createElement(
 	        'div',
-	        { className: 'col-md-14 bpe--volunteering-list' },
+	        { className: 'bpe--volunteering-list' },
 	        _react2['default'].createElement(
 	          'h1',
 	          null,
@@ -26058,6 +26049,11 @@
 	          'div',
 	          null,
 	          volunteeringNodes
+	        ),
+	        _react2['default'].createElement(
+	          'div',
+	          null,
+	          _react2['default'].createElement(_Pagination2['default'], { currentPage: this.props.currentPage, totalPages: this.props.totalPages, changePage: this.props.changePage })
 	        )
 	      );
 	    }
@@ -26137,7 +26133,7 @@
 
 	  handleMouseEnter: function () {
 	    function handleMouseEnter() {
-	      this.props.setHighlightRecord(this.props.record);
+	      this.setHighlightRecord(this.props.record);
 	    }
 
 	    return handleMouseEnter;
@@ -26145,10 +26141,18 @@
 
 	  handleMouseLeave: function () {
 	    function handleMouseLeave() {
-	      this.props.setHighlightRecord(null);
+	      this.setHighlightRecord(null);
 	    }
 
 	    return handleMouseLeave;
+	  }(),
+
+	  setHighlightRecord: function () {
+	    function setHighlightRecord(record) {
+	      this.props.setHighlightRecord && this.props.setHighlightRecord(record);
+	    }
+
+	    return setHighlightRecord;
 	  }()
 	});
 
@@ -26182,8 +26186,22 @@
 
 	function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-	__webpack_require__(279);
+	__webpack_require__(277);
+
 
+	var defaultPin = {
+	  url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABCFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD26OP39/cAAADPz88AAAAAAAAAAAD9/f3p6ens7Ozt7e2CgoLb29vt7e0nJyeampqZmZns7OwsLCxKSkqZmZkAAADa2tqHh4cwMDDq6uqEhIT+/v4AAABERETPz89HR0cAAADc3Nzb29u2Og+1OA3PfWG4QRi9TSfKb1C1OQ7luqvJb0/25uHcoY325+K3PRTmu6y2PBLfqJa3PRPowrXcoo7BVzPPfmL26OO9Tii2OhDep5Tluar15eD15N/epZK5Qhkx1ZAbAAAAOnRSTlMAAQcCBA4UDwMVKAUWHBMIIi0GDB0rC/7tHp8nGin70NLVWLHXNGhn0zQ+ZiqxWTXQWfsZPJ49H7SyPeI8ZAAAAXFJREFUeAGFk+MaIzEYhZOMbdW2l7Xdte7/TnbTp2628/7N55wDLkDI0xL6h0TzEIJHIEUjl1MFWRZUzkU0BR+fNYZVdNExDEfUFZbR7kIgZVpsEM9Ekn4i4ScjmXjAWuY1AvKIeROtpr4sZl9Xw0/jxc9UMRpjEA/P+Yiz81lv8K1/ojfwsnmbQ6calMnYb9P7P/0bhtP0e5sxqWMB2oqVc9te/47J91wzZtEQF9DYaH096T8wWXejrEbhAkxQ9Yb9J4ZeMWBoCCBi46nPfQKDUk1AEPCu0l72SAG9ZUNxeUBz+rtDn8ghonM0kFQxOSYHjFuiKgEkOP6IHDDyHQEBJBuJFTlglzDk8IDwFnjI2Ysh8ZqRl2viQ83Jh5ofDwWREC8NXpwaf1aB/FmFDwwNT989ff7u6UcRf/d/BfP7JJiT5CqPkvuRrmDJ3Yu2RxTtSfaxaBHLfrTZjGaLX6nCSfbPxul0HowTZr1w84ba/y8wjYohV+qwEQAAAABJRU5ErkJggg==',
+	  size: new google.maps.Size(32, 32),
+	  origin: new google.maps.Point(0, 0),
+	  anchor: new google.maps.Point(16, 16)
+	};
+
+	var highlightPin = {
+	  url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABDlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADr4eH39/fPz88AAAAAAAAAAADp6ekAAAD9/f3s7Ozt7e3t7e2CgoInJyfb29uZmZmamprs7OyEhISHh4cwMDBKSkr+/v7a2toAAAAsLCzq6uqZmZlEREQAAADPz89HR0cAAADb29vc3NxjGxtSAgJRAABZDAyNWFhUBQVSAQHEqKiBRkaBR0eth4fp39+OWVlWBwfq4OCzkJCuiIhsKCjCpqZaDQ1kHBzr4eHDp6exjIzo3t7CpaXKsbFVBgayjo5TAwPo3d2OWlqAlY+pAAAAOnRSTlMAAQcCBA4UDwMVKAUWHBMIIi0GDB0rC/7tnx4nGtAp+9LV11g0sWdo01lZNT77sSo00GY8GZ49H7K0BXS41QAAAXhJREFUeAGFk/OiG0EYxXdmbSvGdZwytnXr9v1fpJkYi9+/83nOwU4AwBA83MITDADYLQAnoEVLrCCwEm1BAge3zzJJiQpnqqrJKSJFylchANd0KpLIunEnmXTibjYRoXTtHAEYSH6MVlObYX89aS0Gw++pp2iMhAw45kPaeHi0x3+aBxpj+/HBoOGhBq6Rxof0z1XzgtYy/dkgNXxXgNBj5cys0byi+zuTi+kEQAVkKlrsdZs3dHtfo5SMowJkpGq3mne07KcIuS0BIJVI/Wt60H4psRBgjCW+ThteAY3pm2gxGEErn+ZNT+auQhMYL3HxgXfAoMJJPAZZ06l7B9Qdk4UYFNTkxDvgV1IVwgPCW6Ah+wFDojXdwDXRoUbehxrtDgUgm3hpB5wafdaz92c9fyEJcPju9/vvfq9x6Lt9BfPtIJiD5PK3kvuRziPJXYm2fSrSaJ9Ee5J9LPqEZF/vdOr94d/U80n2t8YpFG6NE269UPOG2P8/TQCL+fVhnpUAAAAASUVORK5CYII=',
+	  size: new google.maps.Size(32, 32),
+	  origin: new google.maps.Point(0, 0),
+	  anchor: new google.maps.Point(16, 16)
+	};
 
 	var Map = _react2['default'].createClass({
 	  displayName: 'Map',
@@ -26192,58 +26210,42 @@
 	    function render() {
 	      var _this = this;
 
-	      var image = {
-	        url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABCFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD26OP39/cAAADPz88AAAAAAAAAAAD9/f3p6ens7Ozt7e2CgoLb29vt7e0nJyeampqZmZns7OwsLCxKSkqZmZkAAADa2tqHh4cwMDDq6uqEhIT+/v4AAABERETPz89HR0cAAADc3Nzb29u2Og+1OA3PfWG4QRi9TSfKb1C1OQ7luqvJb0/25uHcoY325+K3PRTmu6y2PBLfqJa3PRPowrXcoo7BVzPPfmL26OO9Tii2OhDep5Tluar15eD15N/epZK5Qhkx1ZAbAAAAOnRSTlMAAQcCBA4UDwMVKAUWHBMIIi0GDB0rC/7tHp8nGin70NLVWLHXNGhn0zQ+ZiqxWTXQWfsZPJ49H7SyPeI8ZAAAAXFJREFUeAGFk+MaIzEYhZOMbdW2l7Xdte7/TnbTp2628/7N55wDLkDI0xL6h0TzEIJHIEUjl1MFWRZUzkU0BR+fNYZVdNExDEfUFZbR7kIgZVpsEM9Ekn4i4ScjmXjAWuY1AvKIeROtpr4sZl9Xw0/jxc9UMRpjEA/P+Yiz81lv8K1/ojfwsnmbQ6calMnYb9P7P/0bhtP0e5sxqWMB2oqVc9te/47J91wzZtEQF9DYaH096T8wWXejrEbhAkxQ9Yb9J4ZeMWBoCCBi46nPfQKDUk1AEPCu0l72SAG9ZUNxeUBz+rtDn8ghonM0kFQxOSYHjFuiKgEkOP6IHDDyHQEBJBuJFTlglzDk8IDwFnjI2Ysh8ZqRl2viQ83Jh5ofDwWREC8NXpwaf1aB/FmFDwwNT989ff7u6UcRf/d/BfP7JJiT5CqPkvuRrmDJ3Yu2RxTtSfaxaBHLfrTZjGaLX6nCSfbPxul0HowTZr1w84ba/y8wjYohV+qwEQAAAABJRU5ErkJggg==',
-	        size: new google.maps.Size(32, 32),
-	        origin: new google.maps.Point(0, 0),
-	        anchor: new google.maps.Point(16, 16)
-	      };
-
-	      var highlightImage = {
-	        url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABDlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADr4eH39/fPz88AAAAAAAAAAADp6ekAAAD9/f3s7Ozt7e3t7e2CgoInJyfb29uZmZmamprs7OyEhISHh4cwMDBKSkr+/v7a2toAAAAsLCzq6uqZmZlEREQAAADPz89HR0cAAADb29vc3NxjGxtSAgJRAABZDAyNWFhUBQVSAQHEqKiBRkaBR0eth4fp39+OWVlWBwfq4OCzkJCuiIhsKCjCpqZaDQ1kHBzr4eHDp6exjIzo3t7CpaXKsbFVBgayjo5TAwPo3d2OWlqAlY+pAAAAOnRSTlMAAQcCBA4UDwMVKAUWHBMIIi0GDB0rC/7tnx4nGtAp+9LV11g0sWdo01lZNT77sSo00GY8GZ49H7K0BXS41QAAAXhJREFUeAGFk/OiG0EYxXdmbSvGdZwytnXr9v1fpJkYi9+/83nOwU4AwBA83MITDADYLQAnoEVLrCCwEm1BAge3zzJJiQpnqqrJKSJFylchANd0KpLIunEnmXTibjYRoXTtHAEYSH6MVlObYX89aS0Gw++pp2iMhAw45kPaeHi0x3+aBxpj+/HBoOGhBq6Rxof0z1XzgtYy/dkgNXxXgNBj5cys0byi+zuTi+kEQAVkKlrsdZs3dHtfo5SMowJkpGq3mne07KcIuS0BIJVI/Wt60H4psRBgjCW+ThteAY3pm2gxGEErn+ZNT+auQhMYL3HxgXfAoMJJPAZZ06l7B9Qdk4UYFNTkxDvgV1IVwgPCW6Ah+wFDojXdwDXRoUbehxrtDgUgm3hpB5wafdaz92c9fyEJcPju9/vvfq9x6Lt9BfPtIJiD5PK3kvuRziPJXYm2fSrSaJ9Ee5J9LPqEZF/vdOr94d/U80n2t8YpFG6NE269UPOG2P8/TQCL+fVhnpUAAAAASUVORK5CYII=',
-	        size: new google.maps.Size(32, 32),
-	        origin: new google.maps.Point(0, 0),
-	        anchor: new google.maps.Point(16, 16)
-	      };
-
 	      var markers = this.props.records.map(function (record) {
 	        return _react2['default'].createElement(_reactGoogleMaps.Marker, {
 	          position: { lat: record.latitude, lng: record.longitude },
 	          key: record.id,
-	          icon: record == _this.props.highlightRecord ? highlightImage : image,
+	          icon: record == _this.props.highlightRecord ? highlightPin : defaultPin,
 	          zIndex: record == _this.props.highlightRecord ? 10000 : null,
 	          onClick: _this.handleMarkerClick.bind(_this, record),
+	          onMouseover: _this.handleMarkerMouseOver.bind(_this, record),
+	          onMouseout: _this.handleMarkerMouseOut.bind(_this, record),
 	          customInfo: 'Marker A'
 	        });
 	      });
 
 	      return _react2['default'].createElement(
-	        'div',
-	        { className: 'col-md-10' },
-	        _react2['default'].createElement(
-	          'section',
-	          { style: { height: "800px", width: "100%" } },
-	          _react2['default'].createElement(_reactGoogleMaps.GoogleMapLoader, {
-	            containerElement: _react2['default'].createElement('div', { style: { height: "100%" } }),
-	            googleMapElement: _react2['default'].createElement(
-	              _reactGoogleMaps.GoogleMap,
-	              {
-	                ref: function () {
-	                  function ref(map) {
-	                    return _this.googlemap = map;
-	                  }
-
-	                  return ref;
-	                }(),
-	                defaultZoom: 5,
-	                defaultCenter: { lat: 52.49928, lng: 13.44944 },
-	                onIdle: this.idle,
-	                onClick: this.handleMapClick
-	              },
-	              markers
-	            )
-	          })
-	        )
+	        'section',
+	        { className: 'bpe--map' },
+	        _react2['default'].createElement(_reactGoogleMaps.GoogleMapLoader, {
+	          containerElement: _react2['default'].createElement('div', { style: { height: "100%" } }),
+	          googleMapElement: _react2['default'].createElement(
+	            _reactGoogleMaps.GoogleMap,
+	            {
+	              ref: function () {
+	                function ref(map) {
+	                  return _this.googlemap = map;
+	                }
+
+	                return ref;
+	              }(),
+	              defaultZoom: 5,
+	              defaultCenter: { lat: 52.49928, lng: 13.44944 },
+	              onIdle: this.idle,
+	              onClick: this.handleMapClick
+	            },
+	            markers
+	          )
+	        })
 	      );
 	    }
 
@@ -26256,6 +26258,10 @@
 	        this.googlemap.fitBounds(this.props.changeBounds);
 	        this.googlemap.props.map.setZoom(this.googlemap.getZoom() + 1);
 	      }
+
+	      if (this.props.records.indexOf(this.infoBubbleRecord) === -1) {
+	        this.closeInfoBubble();
+	      }
 	    }
 
 	    return componentDidUpdate;
@@ -26280,7 +26286,7 @@
 	        return;
 	      }
 
-	      if (this.infoBubble) this.infoBubble.close();
+	      this.closeInfoBubble();
 
 	      var newBounds = JSON.stringify(this.googlemap.getBounds());
 
@@ -26295,7 +26301,7 @@
 
 	  handleMapClick: function () {
 	    function handleMapClick() {
-	      if (this.infoBubble) this.infoBubble.close();
+	      this.closeInfoBubble();
 	    }
 
 	    return handleMapClick;
@@ -26305,7 +26311,7 @@
 	    function handleMarkerClick(record) {
 	      var _ref;
 
-	      if (this.infoBubble) this.infoBubble.close();
+	      this.closeInfoBubble();
 
 	      var div = document.createElement('div');
 	      _reactDom2['default'].render(_react2['default'].createElement(_Volunteering2['default'], { record: record, key: record.id }), div);
@@ -26317,14 +26323,42 @@
 	        map: this.googlemap.props.map,
 	        borderRadius: 0,
 	        shadowStyle: 0,
-	        minWidth: 200
-	      }, _defineProperty(_ref, 'maxWidth', 300), _defineProperty(_ref, 'minHeight', 200), _defineProperty(_ref, 'maxHeight', 200), _defineProperty(_ref, 'hideCloseButton', true), _defineProperty(_ref, 'padding', 0), _ref));
+	        minWidth: 212
+	      }, _defineProperty(_ref, 'maxWidth', 212), _defineProperty(_ref, 'minHeight', 290), _defineProperty(_ref, 'maxHeight', 290), _defineProperty(_ref, 'hideCloseButton', true), _defineProperty(_ref, 'padding', 0), _ref));
 
 	      this.preventReloadOnce = true;
+	      this.infoBubbleRecord = record;
 	      this.infoBubble.open();
 	    }
 
 	    return handleMarkerClick;
+	  }(),
+
+	  handleMarkerMouseOver: function () {
+	    function handleMarkerMouseOver(record) {
+	      this.props.setHighlightRecord(record);
+	    }
+
+	    return handleMarkerMouseOver;
+	  }(),
+
+	  handleMarkerMouseOut: function () {
+	    function handleMarkerMouseOut(record) {
+	      this.props.setHighlightRecord(null);
+	    }
+
+	    return handleMarkerMouseOut;
+	  }(),
+
+	  closeInfoBubble: function () {
+	    function closeInfoBubble() {
+	      if (this.infoBubble) {
+	        this.infoBubbleRecord = null;
+	        this.infoBubble.close();
+	      }
+	    }
+
+	    return closeInfoBubble;
 	  }()
 	});
 
@@ -30534,232 +30568,6 @@
 
 /***/ },
 /* 277 */
-/***/ function(module, exports, __webpack_require__) {
-
-	'use strict';
-
-	Object.defineProperty(exports, "__esModule", {
-	  value: true
-	});
-
-	var _react = __webpack_require__(1);
-
-	var _react2 = _interopRequireDefault(_react);
-
-	var _reactDom = __webpack_require__(99);
-
-	var _reactDom2 = _interopRequireDefault(_reactDom);
-
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-	var LocationInput = _react2['default'].createClass({
-	  displayName: 'LocationInput',
-
-	  render: function () {
-	    function render() {
-	      return _react2['default'].createElement(
-	        'div',
-	        { className: 'row' },
-	        _react2['default'].createElement(
-	          'div',
-	          { className: 'col-md-5' },
-	          _react2['default'].createElement('input', { type: 'text', placeholder: 'Ort', ref: 'locationInput', className: 'bpe--location-input--input', value: this.props.value }),
-	          _react2['default'].createElement(
-	            'a',
-	            { className: 'bpe--location-input--reset', onClick: this.resetInput },
-	            '×'
-	          )
-	        )
-	      );
-	    }
-
-	    return render;
-	  }(),
-
-	  getInput: function () {
-	    function getInput() {
-	      return _reactDom2['default'].findDOMNode(this.refs.locationInput);
-	    }
-
-	    return getInput;
-	  }(),
-	  componentDidMount: function () {
-	    function componentDidMount() {
-	      var input = this.getInput();
-	      input.focus();
-	      this.searchBox = new google.maps.places.SearchBox(input, { 'types': ['(regions)'] });
-	      google.maps.event.addListener(this.searchBox, 'places_changed', this.handlePlacesChanged);
-	    }
-
-	    return componentDidMount;
-	  }(),
-	  resetInput: function () {
-	    function resetInput() {
-	      var input = this.getInput();
-	      input.value = '';
-	      input.focus();
-	    }
-
-	    return resetInput;
-	  }(),
-	  getGeometry: function () {
-	    function getGeometry() {
-	      return this.searchBox.getPlaces()[0].geometry;
-	    }
-
-	    return getGeometry;
-	  }(),
-	  handlePlacesChanged: function () {
-	    function handlePlacesChanged() {
-	      var geometry = this.getGeometry();
-
-	      if (!geometry) return false;
-
-	      var value = this.getInput().value.replace(', ', '--');
-
-	      if (geometry.viewport) {
-	        this.props.changeLocation(value, geometry.viewport.toJSON());
-	      } else {
-	        var lat = geometry.location.lat(),
-	            lng = geometry.location.lng(),
-	            rim = 0.05;
-	        this.props.changeLocation(value, { north: lat - rim, east: lng + rim, south: lat + rim, west: lng - rim });
-	      }
-	    }
-
-	    return handlePlacesChanged;
-	  }()
-	});
-
-	exports['default'] = LocationInput;
-
-/***/ },
-/* 278 */
-/***/ function(module, exports, __webpack_require__) {
-
-	"use strict";
-
-	Object.defineProperty(exports, "__esModule", {
-	  value: true
-	});
-
-	var _react = __webpack_require__(1);
-
-	var _react2 = _interopRequireDefault(_react);
-
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-	var PrevButton = _react2["default"].createClass({
-	  displayName: "PrevButton",
-
-	  render: function () {
-	    function render() {
-	      if (this.props.currentPage > 1) {
-	        return _react2["default"].createElement(
-	          "li",
-	          { className: "previous" },
-	          _react2["default"].createElement(
-	            "a",
-	            { href: "#", onClick: this.props.handleClick },
-	            _react2["default"].createElement(
-	              "span",
-	              { "aria-hidden": "true" },
-	              "←"
-	            ),
-	            " zurück"
-	          )
-	        );
-	      } else {
-	        return null;
-	      }
-	    }
-
-	    return render;
-	  }()
-	});
-
-	var NextButton = _react2["default"].createClass({
-	  displayName: "NextButton",
-
-	  render: function () {
-	    function render() {
-	      if (this.props.currentPage < this.props.totalPages) {
-	        return _react2["default"].createElement(
-	          "li",
-	          { className: "next" },
-	          _react2["default"].createElement(
-	            "a",
-	            { href: "#", onClick: this.props.handleClick },
-	            "weiter ",
-	            _react2["default"].createElement(
-	              "span",
-	              { "aria-hidden": "true" },
-	              "→"
-	            )
-	          )
-	        );
-	      } else {
-	        return null;
-	      }
-	    }
-
-	    return render;
-	  }()
-	});
-
-	var Pagination = _react2["default"].createClass({
-	  displayName: "Pagination",
-
-	  render: function () {
-	    function render() {
-	      if (this.props.currentPage) {
-	        return _react2["default"].createElement(
-	          "div",
-	          { className: "col-md-14" },
-	          _react2["default"].createElement(
-	            "nav",
-	            null,
-	            _react2["default"].createElement(
-	              "ul",
-	              { className: "pager" },
-	              _react2["default"].createElement(PrevButton, { currentPage: this.props.currentPage, handleClick: this.previousPage }),
-	              "Seite ",
-	              this.props.currentPage,
-	              " von ",
-	              this.props.totalPages,
-	              _react2["default"].createElement(NextButton, { currentPage: this.props.currentPage, totalPages: this.props.totalPages, handleClick: this.nextPage })
-	            )
-	          )
-	        );
-	      } else {
-	        return null;
-	      }
-	    }
-
-	    return render;
-	  }(),
-
-	  previousPage: function () {
-	    function previousPage(event) {
-	      this.props.changePage(this.props.currentPage - 1);
-	    }
-
-	    return previousPage;
-	  }(),
-
-	  nextPage: function () {
-	    function nextPage(event) {
-	      this.props.changePage(this.props.currentPage + 1);
-	    }
-
-	    return nextPage;
-	  }()
-	});
-
-	exports["default"] = Pagination;
-
-/***/ },
-/* 279 */
 /***/ function(module, exports) {
 
 	// ==ClosureCompiler==
@@ -32543,5 +32351,223 @@
 	};
 
 
+/***/ },
+/* 278 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+
+	var _react = __webpack_require__(1);
+
+	var _react2 = _interopRequireDefault(_react);
+
+	var _reactDom = __webpack_require__(99);
+
+	var _reactDom2 = _interopRequireDefault(_reactDom);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+	var LocationInput = _react2['default'].createClass({
+	  displayName: 'LocationInput',
+
+	  render: function () {
+	    function render() {
+	      return _react2['default'].createElement(
+	        'div',
+	        { className: 'bpe--location-input' },
+	        _react2['default'].createElement('input', { type: 'text', placeholder: 'Ort', ref: 'locationInput', className: 'bpe--location-input--input', value: this.props.value }),
+	        _react2['default'].createElement(
+	          'a',
+	          { className: 'bpe--location-input--reset', onClick: this.resetInput },
+	          '×'
+	        )
+	      );
+	    }
+
+	    return render;
+	  }(),
+
+	  getInput: function () {
+	    function getInput() {
+	      return _reactDom2['default'].findDOMNode(this.refs.locationInput);
+	    }
+
+	    return getInput;
+	  }(),
+	  componentDidMount: function () {
+	    function componentDidMount() {
+	      var input = this.getInput();
+	      input.focus();
+	      this.searchBox = new google.maps.places.SearchBox(input, { 'types': ['(regions)'] });
+	      google.maps.event.addListener(this.searchBox, 'places_changed', this.handlePlacesChanged);
+	    }
+
+	    return componentDidMount;
+	  }(),
+	  resetInput: function () {
+	    function resetInput() {
+	      var input = this.getInput();
+	      input.value = '';
+	      input.focus();
+	    }
+
+	    return resetInput;
+	  }(),
+	  getGeometry: function () {
+	    function getGeometry() {
+	      return this.searchBox.getPlaces()[0].geometry;
+	    }
+
+	    return getGeometry;
+	  }(),
+	  handlePlacesChanged: function () {
+	    function handlePlacesChanged() {
+	      var geometry = this.getGeometry();
+
+	      if (!geometry) return false;
+
+	      var value = this.getInput().value.replace(', ', '--');
+
+	      if (geometry.viewport) {
+	        this.props.changeLocation(value, geometry.viewport.toJSON());
+	      } else {
+	        var lat = geometry.location.lat(),
+	            lng = geometry.location.lng(),
+	            rim = 0.05;
+	        this.props.changeLocation(value, { north: lat - rim, east: lng + rim, south: lat + rim, west: lng - rim });
+	      }
+	    }
+
+	    return handlePlacesChanged;
+	  }()
+	});
+
+	exports['default'] = LocationInput;
+
+/***/ },
+/* 279 */
+/***/ function(module, exports, __webpack_require__) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+
+	var _react = __webpack_require__(1);
+
+	var _react2 = _interopRequireDefault(_react);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+	var PrevButton = _react2["default"].createClass({
+	  displayName: "PrevButton",
+
+	  render: function () {
+	    function render() {
+	      if (this.props.currentPage > 1) {
+	        return _react2["default"].createElement(
+	          "li",
+	          { className: "previous" },
+	          _react2["default"].createElement(
+	            "a",
+	            { href: "#", onClick: this.props.handleClick },
+	            _react2["default"].createElement(
+	              "span",
+	              { "aria-hidden": "true" },
+	              "←"
+	            ),
+	            " zurück"
+	          )
+	        );
+	      } else {
+	        return null;
+	      }
+	    }
+
+	    return render;
+	  }()
+	});
+
+	var NextButton = _react2["default"].createClass({
+	  displayName: "NextButton",
+
+	  render: function () {
+	    function render() {
+	      if (this.props.currentPage < this.props.totalPages) {
+	        return _react2["default"].createElement(
+	          "li",
+	          { className: "next" },
+	          _react2["default"].createElement(
+	            "a",
+	            { href: "#", onClick: this.props.handleClick },
+	            "weiter ",
+	            _react2["default"].createElement(
+	              "span",
+	              { "aria-hidden": "true" },
+	              "→"
+	            )
+	          )
+	        );
+	      } else {
+	        return null;
+	      }
+	    }
+
+	    return render;
+	  }()
+	});
+
+	var Pagination = _react2["default"].createClass({
+	  displayName: "Pagination",
+
+	  render: function () {
+	    function render() {
+	      if (this.props.currentPage) {
+	        return _react2["default"].createElement(
+	          "nav",
+	          { className: "bpe--pagination" },
+	          _react2["default"].createElement(
+	            "ul",
+	            { className: "pager" },
+	            _react2["default"].createElement(PrevButton, { currentPage: this.props.currentPage, handleClick: this.previousPage }),
+	            "Seite ",
+	            this.props.currentPage,
+	            " von ",
+	            this.props.totalPages,
+	            _react2["default"].createElement(NextButton, { currentPage: this.props.currentPage, totalPages: this.props.totalPages, handleClick: this.nextPage })
+	          )
+	        );
+	      } else {
+	        return null;
+	      }
+	    }
+
+	    return render;
+	  }(),
+
+	  previousPage: function () {
+	    function previousPage(event) {
+	      this.props.changePage(this.props.currentPage - 1);
+	    }
+
+	    return previousPage;
+	  }(),
+
+	  nextPage: function () {
+	    function nextPage(event) {
+	      this.props.changePage(this.props.currentPage + 1);
+	    }
+
+	    return nextPage;
+	  }()
+	});
+
+	exports["default"] = Pagination;
+
 /***/ }
 /******/ ]);

data/app/assets/stylesheets/betterplace_explorer/explorer.sass

@@ -0,0 +1,2 @@
+.betterplace-explorer
+  height: 100vh

data/app/assets/stylesheets/betterplace_explorer/location_input.sass

@@ -0,0 +1,27 @@
+.bpe--location-input
+  background: white
+  position: absolute
+  top: 10px
+  right: 10px
+  z-index: 100
+  width: 400px
+  box-shadow: 0 0 10px 0 rgba(0,0,0,0.25)
+
+.bpe--location-input--input
+  display: block
+  margin: 20px
+  padding: 5px
+  padding-right: 30px
+  width: calc(100% - 70px)
+
+.bpe--location-input--reset
+  position: absolute
+  right: 20px
+  top: 13px
+  z-index: 1000
+  font-size: 3rem
+  font-weight: 100
+  cursor: pointer
+
+.bpe--location-input--reset:hover
+  text-decoration: none

data/app/assets/stylesheets/betterplace_explorer/map.sass

@@ -0,0 +1,7 @@
+.bpe--map
+  position: fixed
+  top: 0
+  right: 0
+  z-index: 70
+  width: calc(100% - 600px)
+  height: 100vh

data/app/assets/stylesheets/betterplace_explorer/pagination.sass

@@ -0,0 +1,2 @@
+.bpe--pagination
+  background: #E7E7E7

data/app/assets/stylesheets/betterplace_explorer/volunteering.sass

@@ -0,0 +1,41 @@
+.bpe--volunteering
+  display: flex
+  margin-bottom: 20px
+  border: 1px solid #ccc
+
+.bpe--volunteering--image
+  margin-right: 10px
+
+.bpe--volunteering--body
+  flex-grow: 1
+  padding-top: 10px
+  font-size: 14px
+
+  p:first-child:before
+    content: ''
+    display: inline-block
+    margin-right: 5px
+    vertical-align: middle
+    height: 17px
+    width: 17px
+    background-image: url('data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABFCAMAAADerVCrAAAAM1BMVEUAAAC60wS60wS60wS60wS60wS60wS60wS60wS60wS60wS60wS60wS60wS60wS60wS60wSM4IHZAAAAEHRSTlMAwECAYDDg0KDwsBBQIJBwPkbmYQAAAMhJREFUWMPt18sOgjAQheFpGa4Fnfd/Wp1E2sbZcaqpZv5dAzl+JiyAvthx50R4+yYi6zKCmGGSVzMnCFNSFobRCgvAGBaAMSwAY1gAxrAAjGEBGMO6hrEsAGNZFgOwagzCImnUPw+FZ7NABY20tArQTCVGHshIdfFqI30sDmf6I2M+sV685aO51TTIWdS/mk+DXgz5+HarD/mQD/mQD/mQD/3iUFyAl+yDSpMAbRVIoHoe6qvEAW/biRZpEpO0aerw66i/odCoByH8r05KM8SjAAAAAElFTkSuQmCC')
+    background-size: contain
+    background-repeat: no-repeat
+
+  h4
+    font-weight: 400
+
+.bpe--map
+  .bpe--volunteering
+    flex-direction: column
+    border: 0
+    margin-bottom: 0
+
+  .bpe--volunteering--image
+    width: 210px
+    height: 109px
+    margin-right: 0
+
+  .bpe--volunteering--body
+    padding: 10px
+

data/app/assets/stylesheets/betterplace_explorer/volunteering_list.sass

@@ -0,0 +1,9 @@
+.bpe--volunteering-list
+  position: absolute
+  top: 0
+  left: 0
+  width: 600px
+  height: 100vh
+  overflow-x: hidden
+  overflow-y: scroll
+  padding: 20px

data/app/assets/stylesheets/betterplace_explorer.sass

@@ -0,0 +1,6 @@
+@import betterplace_explorer/explorer
+@import betterplace_explorer/location_input
+@import betterplace_explorer/map
+@import betterplace_explorer/pagination
+@import betterplace_explorer/volunteering
+@import betterplace_explorer/volunteering_list

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: betterplace_explorer
 version: !ruby/object:Gem::Version
-  version: 0.0.1.pre.alpha3
+  version: 0.0.1.pre.alpha4
 platform: ruby
 authors:
 - betterplace developers
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-06-16 00:00:00.000000000 Z
+date: 2016-06-17 00:00:00.000000000 Z
 dependencies: []
 description: An awesome explorer
 email:
@@ -18,7 +18,13 @@ extensions: []
 extra_rdoc_files: []
 files:
 - app/assets/javascripts/betterplace_explorer.js
-- app/assets/stylesheets/betterplace_explorer.css
+- app/assets/stylesheets/betterplace_explorer.sass
+- app/assets/stylesheets/betterplace_explorer/explorer.sass
+- app/assets/stylesheets/betterplace_explorer/location_input.sass
+- app/assets/stylesheets/betterplace_explorer/map.sass
+- app/assets/stylesheets/betterplace_explorer/pagination.sass
+- app/assets/stylesheets/betterplace_explorer/volunteering.sass
+- app/assets/stylesheets/betterplace_explorer/volunteering_list.sass
 - lib/betterplace_explorer.rb
 homepage: https://github.com/betterplace/betterplace_explorer
 licenses:

data/app/assets/stylesheets/betterplace_explorer.css

@@ -1,45 +0,0 @@
-betterplace-explorer {
-  height: 97vh;
-}
-
-.bpe--volunteering-list {
-  height: 80vh;
-  overflow: scroll;
-}
-
-.bpe--volunteering {
-  display: flex;
-  margin-bottom: 20px;
-  border: 1px solid #ccc;
-}
-
-.bpe--volunteering--image {
-  margin-right: 10px;
-  /*width: 100px;*/
-}
-
-.bpe--volunteering--body {
-  flex-grow: 1;
-}
-
-.bpe--location-input--input {
-  display: block;
-  margin: 20px;
-  padding: 5px;
-  padding-right: 30px;
-  width: 100%;
-}
-
-.bpe--location-input--reset {
-  position: absolute;
-  right: 0px;
-  top: 13px;
-  z-index: 1000;
-  font-size: 3rem;
-  font-weight: 100;
-  cursor: pointer;
-}
-.bpe--location-input--reset:hover {
-  text-decoration: none;
-}
-