Mobile adjustments

web/src/components/Main.js

@@ -21,6 +21,7 @@ class Main extends React.Component {
         rooms: {},
         category: {}
       },
+      mobileView: 'MAP',
       contact: {
         message: '',
         name: '',
@@ -79,9 +80,10 @@ class Main extends React.Component {
 
     var control = document.createElement('div')
     control.classList.add('filters-btn-toggle')
-    control.innerHTML = '<button>Filters</button>'
+    control.innerHTML = '<button>Filteri</button>'
     //control.style = "top: 200px;"
-    control['style'] = 'top: 200px;'
+    // TODO: enable this
+    //control['style'] = 'top: 200px;'
 
     var input = document.getElementById('gmaps-places-input')
 
@@ -540,6 +542,7 @@ class Main extends React.Component {
           onClose={this.onCloseClick.bind(this)}
         />
       )
+
       children.push(
         <Listings
           sort={this.state.sort}
@@ -559,6 +562,20 @@ class Main extends React.Component {
     return content
   }
 
+  onMobileListViewClick (e) {
+    e.preventDefault()
+    this.dispatch({
+      type: 'MOBILE_LIST_VIEW'
+    })
+  }
+
+  onMobileMapViewClick (e) {
+    e.preventDefault()
+    this.dispatch({
+      type: 'MOBILE_MAP_VIEW'
+    })
+  }
+
   render () {
     const leftStyle = {}
     const rightStyle = {}
@@ -567,7 +584,7 @@ class Main extends React.Component {
     let leftClass = 'left-base'
     let rightClass = 'right-base'
 
-    if (this.state.mapClicked) {
+    if (this.state.listingId || this.state.mapClicked) {
       leftClass = 'left-hidden'
       rightClass = 'right-shown'
     }
@@ -576,7 +593,7 @@ class Main extends React.Component {
       <div id="container">
         <div id="header">
           <a className="hamburger-menu">K</a>
-          <span className="title">Kiwi</span>
+          <span className="title">KIVI</span>
           <input
             id="gmaps-places-input"
             placeholder="Unesite adresu, naselje ili grad"
@@ -584,10 +601,10 @@ class Main extends React.Component {
             type="text"
           />
           <div className="view-types">
-            <a className="view-type-left">
+            <a onClick={this.onMobileListViewClick.bind(this)}className="view-type-left">
               <i className="btn-select-map fa fa-list" />
             </a>
-            <a className="view-type-right">
+            <a onClick={this.onMobileMapViewClick.bind(this)} className="view-type-right">
               <i className="view-type-map-icon fa fa-map-marker" />
             </a>
           </div>
@@ -598,7 +615,17 @@ class Main extends React.Component {
         </div>
 
         <div id="left" style={leftStyle} className={leftClass}>
-          <div id="map" ref="map" />
+          {this.state.mobileView === 'LIST' && !this.state.listingDetails  &&  
+          <div className="map-list-view">
+        <Listings
+          sort={this.state.sort}
+          totalCount={this.state.totalCount}
+          loadingMore={this.state.loadingMore}
+          listings={this.state.listings}
+          dispatch={this.dispatch.bind(this)}
+        />
+          </div>}
+          <div id="map" ref="map" className={this.state.mobileView !== 'MAP' && "hide"} />
         </div>
       </div>
     )