Finished navbar (responsive) and started to work

on filters sidebar

web/components/Filters.js

@@ -6,16 +6,69 @@ export default class Filters extends React.Component {
     return (
       <div className="filters">
         <div className="filter-row">
-          one filter
+          <div className="filter-title">
+            CIJENA
+          </div>
+
+          <div className="filter-content">
+            od <input></input> od <input></input>
+          </div>
+
         </div>
         <div className="filter-row">
-          two filter
+          <div className="filter-title">
+            TIP
+          </div>
+          <div className="filter-content">
+            <div className="filter-btn property-type-btn">
+             Stan
+            </div>
+            <div className="filter-btn property-type-btn">
+             Kuća
+            </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">
-          two filter
+          <div className="filter-title">
+            KVADRATA
+          </div>
+          <div className="filter-content">
+            od <input></input> do <input></input>
+          </div>
         </div>
         <div className="filter-row">
-          two filter
+          <div className="filter-title">
+            BROJ SOBA
+          </div>
+          <div className="filter-content">
+            <div className="filter-btn property-rooms-studio-btn">
+              Garsonjera
+            </div>
+            <div className="filter-btn property-rooms-btn">
+              2
+            </div>
+            <div className="filter-btn property-rooms-btn">
+              3
+            </div>
+            <div className="filter-btn property-rooms-btn">
+              4+
+            </div>
+          </div>
+        </div>
+        <div className="filter-row no-border">
+          <div className="filter-title">
+          </div>
+          <div className="filter-content">
+            <div className="filter-btn more-filters">Više Filtera</div>
+          </div>
+        </div>
+        <div className="filter-bottom">
         </div>
       </div>)
   }

web/components/Listings.js

@@ -5,18 +5,6 @@ export default class Listings extends React.Component {
 
     return (
       <div className="listings">
-        <div className="listings-row">
-          one filter
-        </div>
-        <div className="listings-row">
-          two filter
-        </div>
-        <div className="listings-row">
-          two filter
-        </div>
-        <div className="listings-row">
-          two filter
-        </div>
       </div>)
   }
 }

web/components/Main.js

@@ -10,9 +10,9 @@ class Main extends React.Component {
   }
 
   componentDidMount() {
-    const uluru = {lat: -25.363, lng: 131.044};
+    const uluru = {lat: 43.845031, lng: 18.4019262};
     const map = new google.maps.Map(this.refs.map, {
-      zoom: 4,
+      zoom: 13,
       center: uluru,
       streetViewControl: false,
       mapTypeControl: false
@@ -27,6 +27,14 @@ class Main extends React.Component {
     control.innerHTML = '<button>Filters</button>';
     control.style = "top: 200px;"
 
+    var input = document.getElementById('gmaps-places-input');
+    var options = {
+      componentRestrictions: {country: "BA"}
+    };
+    var searchBox = new google.maps.places.Autocomplete(input, options);
+    searchBox.addListener('places_changed', function() {
+      console.log('search changed', searchBox.getPlaces());
+    });
     control.addEventListener('click', (e) => {
       this.setState({
         mapClicked: true
@@ -34,6 +42,7 @@ class Main extends React.Component {
     });
     control.index = 1;
     map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
+
   }
 
   onCloseClick(e) {
@@ -57,7 +66,21 @@ class Main extends React.Component {
     return (
       <div id="container">
         <div id="header">
-          Kivi {this.state.mapClicked ? 'YEs': 'No'}
+          <a className="hamburger-menu">K</a>
+          <span className="title">Kiwi</span>
+          <input
+            id="gmaps-places-input"
+            placeholder="Kuda?"
+            className="where-to"
+            type="text"></input>
+          <div className="view-types">
+            <a className="view-type-left">
+              <i className="btn-select-map fa fa-list"></i>
+            </a>
+            <a className="view-type-right">
+              <i className="view-type-map-icon fa fa-map-marker"></i>
+            </a>
+          </div>
         </div>
 
         <div id="right" style={rightStyle} className={rightClass}>

web/dist/index.html

@@ -1,13 +1,17 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
     <link rel="stylesheet" href="main.css">
   </head>
   <body>
     <div id="root">
     </div>
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBghY4-1wa7jETxDbyDdcGL731ZtOxpkA">
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBghY4-1wa7jETxDbyDdcGL731ZtOxpkA&libraries=places">
     </script>
     <script type="text/javascript" src="app.bundle.js"></script>
     </div>

web/dist/main.css

@@ -1,6 +1,8 @@
 body {
   margin: 0;
   height: 100%;
+  font-family: "Roboto" , Helvetica, Arial, sans-serif;
+  color: #333333;
 }
 
 html {
@@ -30,13 +32,24 @@ html {
   z-index: 10000;
   width: 100%;
   box-sizing: border-box;
-  padding: 20px;
+  padding: 9px 9px 9px 20px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+#header .title {
+  font-weight: bold;
+  font-size: 1.5em;
+  color: #b6d53b;
 }
 
 
 .filter-row {
   padding: 15px 0;
   border-bottom: 1px solid #e7e7e7;
+  display: flex;
+  align-items: baseline;
 }
 
 .listings-row {
@@ -75,11 +88,13 @@ html {
 }
 
 .filters {
+  position: relative;
   margin: 0;
   padding: 10px 25px 0;
   border: 1px solid #e6e6e6;
   background: #fff;
   border-radius: 3px;
+  font-size: 13px;
 }
 
 .filters-btn-toggle {
@@ -99,6 +114,15 @@ html {
   display: block;
 }
 
+.hamburger-menu {
+  display: none;
+}
+
+.view-types {
+  display: none;
+  margin-left: 10px;
+}
+
 @media (max-width : 768px) {
   #right {
     width: 100%;
@@ -128,4 +152,149 @@ html {
   .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;
+  margin-left: 30px;
+  padding-left: 50px;
+  border: 1px solid #e6e6e6;
+  background: #fff;
+  /*background-image: url(/static/images/search.svg);*/
+  background-image: url(https://d214hhm15p4t1d.cloudfront.net/7_4_2/p/img/icons/search.svg);
+  background-repeat: no-repeat;
+  background-position: 10px;
+  background-size: 20px;
+  color: #2d3138;
+  font-size: 16px;
+  letter-spacing: .3px;
+  --webkit-flex: 4 4;
+  border-radius: 3px;
+  align-self: center;
+  width: 100%;
+}
+
+.pac-container {
+  z-index: 10000051 !important;
+}
+
+.view-types a {
+  border: 1px solid #b6d53b;
+  background: #fff;
+  color: #b6d53b;
+  font-size: 18px;
+  letter-spacing: .4px;
+  width: 48px;
+  height: 32px;
+  padding: 0;
+  padding-top: 5px;
+  text-align: center;
+}
+
+.view-type-left {
+  border-radius: 5px 0 0 5px;
+}
+
+.view-type-right {
+  border-radius: 0px 5px 5px 0;
+  margin-left: -1px;
+}
+
+.filter-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 50px;
+}
+
+.filter-title {
+  width: 40%;
+  letter-spacing: 1px;
+}
+
+.filter-content {
+  width: 100%;
+}
+
+.filter-content input {
+  padding: 5px 8px;
+  border: 1px solid #e2e2e6;
+  width: 100px;
+  border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  font-size: 14px;
+  color: #212126;
+  letter-spacing: .2px;
+}
+
+.property-type-btn {
+  width: 171px;
+}
+
+.filter-btn {
+  display: inline-block;
+  border: 1px solid #b6d53b;;
+  padding: 12px;
+  cursor: pointer;
+  margin: 0 6px 6px 0;
+  color: #2d3138;
+  font-size: 14px;
+  letter-spacing: .4px;
+  border-radius: 3px;
+  user-select: none;
+  touch-action: manipulation;
+  vertical-align: middle;
+  text-align: center;
+}
+
+.property-rooms-btn {
+  width: 58px;
+}
+
+.property-rooms-studio {
+  width: 93px;
+}
+
+.filter-row.no-border {
+  border: 0;
+}
+
+.filter-btn.more-filters {
+  float: right;
+  width: 145px;
+}
+
+.filter-btn:hover {
+  background-color: #FFFFEE;
 }

web/webpack.config.js

@@ -2,7 +2,8 @@ module.exports = {
   entry: ["./index.js"],
   output: {
     path: __dirname + "/dist",
-    filename: "app.bundle.js"
+    filename: "app.bundle.js",
+    publicPath: "http://0.0.0.0:8080/"
   },
   module: {
     loaders: [