Listings view

web/components/Filters.js

@@ -1,10 +1,24 @@
 import React from 'react';
 
 export default class Filters extends React.Component {
+
+  onCloseClick(e) {
+    if (this.props.onClose) {
+      this.props.onClose();
+    }
+  }
+
   render() {
 
     return (
       <div className="filters">
+        <div className="filters-close">
+          Uslovi Pretrage
+          <i onClick={this.onCloseClick.bind(this)}
+            className="close-icon fa fa-times"
+            aria-hidden="true"></i>
+        </div>
+
         <div className="filter-row">
           <div className="filter-title">
             CIJENA
@@ -15,34 +29,37 @@ export default class Filters extends React.Component {
           </div>
 
         </div>
-        <div className="filter-row">
+        <div className="filter-row filter-property-types">
           <div className="filter-title">
             TIP
           </div>
-          <div className="filter-content">
-            <div className="filter-btn property-type-btn">
-             Stan
+            <div className="filter-content">
+              <div className="filter-btn property-type-btn">
+                Stan
+              </div>
+              <div className="filter-btn property-type-btn">
+                Kuća
+              </div>
             </div>
-            <div className="filter-btn property-type-btn">
-             Kuća
+            <div className="filter-content">
+              <div className="filter-btn property-type-btn">
+                Zemljište
+              </div>
+              <div className="filter-btn property-type-btn">
+                Poslovni prostor
+              </div>
             </div>
-            <div className="filter-btn property-type-btn">
-             Zemljište
-            </div>
-            <div className="filter-btn property-type-btn">
-             Poslovni prostor
-            </div>
-          </div>
         </div>
         <div className="filter-row">
           <div className="filter-title">
             KVADRATA
           </div>
           <div className="filter-content">
-            od <input></input> do <input></input>
+              od <input></input>
+              do <input></input>
           </div>
         </div>
-        <div className="filter-row">
+        <div className="filter-row filter-property-rooms">
           <div className="filter-title">
             BROJ SOBA
           </div>
@@ -68,6 +85,8 @@ export default class Filters extends React.Component {
             <div className="filter-btn more-filters">Više Filtera</div>
           </div>
         </div>
+        <div className="clear-both">
+        </div>
         <div className="filter-bottom">
         </div>
       </div>)

web/components/Listings.js

@@ -5,6 +5,21 @@ export default class Listings extends React.Component {
 
     return (
       <div className="listings">
+        <div className="listings-header">
+          <div className="select-group">
+            <select name="listings-type" id="listings-type">
+              <option value="cijena">Cijena: od najmanje</option>
+            </select>
+          </div>
+          <div className="listings-count">
+            322 rezultata
+          </div>
+          <div className="listings-options">
+            <div className="lo-list"></div>
+            <div className="lo-grid"></div>
+            <div className="lo-single"></div>
+          </div>
+        </div>
       </div>)
   }
 }

web/components/Main.js

@@ -42,10 +42,16 @@ class Main extends React.Component {
     });
     control.index = 1;
     map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
-
+    this.map = map;
   }
 
   onCloseClick(e) {
+    if (this.state.mapClicked) {
+      setTimeout(() => {
+        google.maps.event.trigger(this.map, 'resize');
+      }, 100);
+    }
+
     this.setState({
       mapClicked: false
     });
@@ -55,8 +61,8 @@ class Main extends React.Component {
     const leftStyle  = {};
     const rightStyle = {};
 
-    let leftClass = 'left-base';
-    let rightClass ='right-base';
+    let leftClass    = 'left-base';
+    let rightClass   = 'right-base';
 
     if (this.state.mapClicked) {
       leftClass = 'left-hidden';
@@ -85,10 +91,7 @@ class Main extends React.Component {
 
         <div id="right" style={rightStyle} className={rightClass}>
           <div className="right-content">
-        <div className="filters-close-button">
-          <button onClick={this.onCloseClick.bind(this)}>Close me!</button>
-        </div>
-            <Filters />
+            <Filters onClose={this.onCloseClick.bind(this)}/>
             <Listings />
           </div>
         </div>