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-content">
-            <div className="filter-btn property-type-btn">
+              <div className="filter-btn property-type-btn">
-             Stan
+                Stan
+              </div>
+              <div className="filter-btn property-type-btn">
+                Kuća
+              </div>
             </div>
-            <div className="filter-btn property-type-btn">
+            <div className="filter-content">
-             Kuća
+              <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 leftClass    = 'left-base';
-    let rightClass ='right-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">
+            <Filters onClose={this.onCloseClick.bind(this)}/>
-          <button onClick={this.onCloseClick.bind(this)}>Close me!</button>
-        </div>
-            <Filters />
             <Listings />
           </div>
         </div>

web/dist/main.css

@@ -69,11 +69,10 @@ html {
   height: 100%;
 }
 
-
 .right-content {
-  padding: 10px 10px 0;
   overflow-y: auto;
   height: 100%;
+  padding: 10px 10px 0;
 }
 
 #right {
@@ -123,65 +122,6 @@ html {
   margin-left: 10px;
 }
 
-@media (max-width : 768px) {
-  #right {
-    width: 100%;
-  }
-
-  .filters-btn-toggle {
-    margin-top: 90px;
-    display: block;
-  }
-
-  .filters-close-button {
-    display: block;
-  }
-
-  .left-hidden{
-    display: none;
-  }
-
-  .right-shown {
-    display: block;
-  }
-
-  .right-base {
-    display: none;
-  }
-
-  .left-base {
-    display: block;
-  }
-
-  #header .title {
-    display: none;
-  }
-
-  .hamburger-menu {
-    display: inline-block;
-  }
-
-  .where-to {
-    width: 70%;
-  }
-
-  .where-to:focus {
-    width: 85%;
-  }
-
-  .view-types {
-    display: flex;
-  }
-
-  .filter-row {
-    display: block;
-  }
-
-  .filter-title {
-    margin-bottom: 10px;
-  }
-}
-
 .where-to {
   max-width: 352px;
   height: 40px;
@@ -203,6 +143,7 @@ html {
   width: 100%;
 }
 
+
 .pac-container {
   z-index: 10000051 !important;
 }
@@ -258,14 +199,10 @@ html {
   letter-spacing: .2px;
 }
 
-.property-type-btn {
-  width: 171px;
-}
-
 .filter-btn {
   display: inline-block;
   border: 1px solid #b6d53b;;
-  padding: 12px;
+  padding: 6px 12px;
   cursor: pointer;
   margin: 0 6px 6px 0;
   color: #2d3138;
@@ -276,6 +213,15 @@ html {
   touch-action: manipulation;
   vertical-align: middle;
   text-align: center;
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: 35px;
+}
+
+.property-type-btn {
+  width: 171px;
+  text-align: left;
 }
 
 .property-rooms-btn {
@@ -284,6 +230,7 @@ html {
 
 .property-rooms-studio {
   width: 93px;
+  flex-grow: 2;
 }
 
 .filter-row.no-border {
@@ -298,3 +245,186 @@ html {
 .filter-btn:hover {
   background-color: #FFFFEE;
 }
+
+.clear-both {
+  clear: both;
+}
+
+.filter-property-rooms .filter-content,
+.filter-property-types .filter-content {
+  display: flex;
+}
+
+.filter-property-types .filter-content {
+  flex-wrap: wrap;
+  width: 50%;
+}
+
+.close-icon {
+  position: absolute;
+  right: 0;
+  cursor: pointer;
+  color: #c1c1c1;
+}
+
+.filters-close {
+  position: relative;
+  text-align: center;
+  padding: 5px;
+  font-size: 18px;
+  font-weight: 500;
+  border-bottom: 1px solid #e6e6e6;
+  display: none;
+}
+
+.listings-header {
+  padding: 10px 0;
+  position: relative;
+}
+
+#listings-type {
+  padding: 5px 20px 6px 10px;
+  border: 1px solid #d8d8d8;
+  -webkit-appearance: none;
+  background: #fff;
+  height: 32px;
+  padding: 5px 20px 6px 10px;
+  color: #2d3138;
+  font-size: 13px;
+  letter-spacing: .81px;
+  border-radius: 3px;
+  width: 101%;
+}
+
+.select-group {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+
+.select-group:after {
+  font-family: FontAwesome;
+  content: '\F0D7';
+  position: absolute;
+  right: 6px;
+}
+
+.listings-count {
+  display: inline-block;
+  width: 274px;
+  color: #878698;
+  font-size: 16px;
+  text-align: center;
+  letter-spacing: .5px;
+  vertical-align: middle;
+}
+
+.listings-options {
+  position: absolute;
+  right: 0;
+  top: 0;
+  right: 0;
+  display: flex;
+  height: 100%;
+  vertical-align: middle;
+  align-items: center;
+}
+
+
+@media (max-width : 768px) {
+  #right {
+    width: 100%;
+  }
+
+  .filters-btn-toggle {
+    margin-top: 90px;
+    display: block;
+  }
+
+  .filters-close-button {
+    display: block;
+  }
+
+  .left-hidden {
+    position: absolute;
+    left: -100%;
+  }
+
+  .right-shown {
+    display: block;
+  }
+
+  .right-base {
+    display: none;
+  }
+
+  .left-base {
+    display: block;
+  }
+
+  #header .title {
+    display: none;
+  }
+
+  .hamburger-menu {
+    display: inline-block;
+  }
+
+  .where-to {
+    max-width: none;
+    margin-left: 10px;
+    font-size: 14px;
+    height: 32px;
+    padding-left: 35px;
+  }
+
+  .where-to:focus {
+    /*width: 85%;*/
+  }
+
+  .view-types {
+    display: flex;
+  }
+
+  .filter-row {
+    display: block;
+    padding: 11px 0;
+    border: 0;
+  }
+
+  .filter-title {
+    width: 100%;
+    padding-bottom: 15px;
+  }
+
+  .property-type-btn {
+    width: 33.3%;
+  }
+
+  .property-rooms-btn {
+    width: 15%;
+  }
+
+  .property-rooms-studio-btn {
+    width: 40%;
+  }
+
+  .filters {
+    border: none;
+    padding: 0 15px;
+  }
+
+  .filters-close {
+    display: block;
+    padding: 10px 0;
+  }
+
+  .right-content {
+    padding: 0;
+  }
+
+  .filter-property-types .filter-content {
+    width: 100%;
+  }
+}