Mobile adjustments

web/dist/main.css

@@ -467,8 +467,26 @@ html {
   }
 
   .filters-btn-toggle {
-    margin-top: 90px;
+    margin-top: 70px;
+    margin-right: 10px;
     display: block;
+    min-width: 35px;
+    padding: 5px 10px;
+    border: 1px solid #d8d8d8;
+    background: hsla(0,0%,100%,.9);
+    color: #878698;
+    border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+  }
+
+  .filters-btn-toggle button {
+    font-size: 1.2em;
+    -webkit-appearance: none;
+    -webkit-border-radius: 0;
+    border: 0;
+    background: #fff;
+
   }
 
   .filters-close-button {
@@ -542,6 +560,7 @@ html {
   .filters {
     border: none;
     padding: 0 15px;
+    height: 100%;
   }
 
   .filters-close {
@@ -560,6 +579,18 @@ html {
   .value-between-box {
     justify-content: space-around;
   }
+
+  .map-list-view {
+    width: 100%;
+    border: 1px solid red;
+    overflow-y: auto;
+    height: 100%;
+    padding-top: 60px;
+  }
+
+  .right-content .listings {
+    display: none;
+  }
 }
 
 /*
@@ -783,7 +814,8 @@ html {
 
 
 @media (max-width: 768px) {
-  .ld-image-container {
+  .ld-image-container,
+  .ld-image-container img {
     width: 100%;
     height: 100%;
   }

web/src/components/ListingDetails.js

@@ -57,12 +57,6 @@ export default class ListingDetails extends React.Component {
               </span>
             </button>
           </div>
-          <button className="hide-listing">
-            <i className="fa fa-thumbs-o-down" aria-hidden="true" />
-            <span>
-              Sakrij
-            </span>
-          </button>
         </div>
 
         <div className="ld-details">

web/src/components/Listings.js

@@ -7,7 +7,14 @@ export default class Listings extends React.Component {
   constructor (props) {
     super(props)
 
+    this.handleTouchMove = e => {
+      const node = e.target
+      const offset = node.scrollHeight - node.scrollTop - node.clientHeight
+      console.log('HANDLE TOUCH MOVE OFFSET', offset)
+    }
+
     this.handleScroll = e => {
+      console.log('scrolling');
       const node = e.target
       const offset = node.scrollHeight - node.scrollTop - node.clientHeight
 
@@ -123,11 +130,13 @@ export default class Listings extends React.Component {
   attachScrollListener () {
     const listings = findDOMNode(this.refs.listings)
     listings.parentNode.addEventListener('scroll', this.handleScroll)
+    listings.parentNode.addEventListener('touchmove', this.handleTouchMove)
   }
 
   removeScrollListener () {
     const listings = findDOMNode(this.refs.listings)
     listings.parentNode.removeEventListener('scroll', this.handleScroll)
+    listings.parentNode.removeEventListener('touchmove', this.handleTouchMove)
   }
 
   onSortChange (e) {

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>
     )

web/src/lib/handlers.js

@@ -49,8 +49,16 @@ const setMaxSize = ({type, action}, component) => {
   })
 }
 
+const getScrollElem = (component) => {
+  const {mobileView} = component.state
+  const scrollElem = mobileView === 'LIST' ?
+    document.querySelector('.map-list-view') : document.querySelector('.right-content')
+
+  return scrollElem
+}
+
 const viewListingDetails = ({type, action}, component) => {
-  const scrollElem = document.querySelector('.right-content')
+  const scrollElem = getScrollElem(component)
   component.savedScrollTop = scrollElem.scrollTop
 
   component.setState(
@@ -224,7 +232,8 @@ const backToResults = ({type, action}, component) => {
         prevSelected.marker.setIcon(component.visitedMarkerIcon())
       }
 
-      const scrollElem = document.querySelector('.right-content')
+      //const scrollElem = document.querySelector('.right-content')
+      const scrollElem = getScrollElem(component)
       scrollElem.scrollTop = component.savedScrollTop
     }
   )
@@ -251,7 +260,8 @@ const mapIdle = ({type, action}, component) => {
       page: 0
     },
     () => {
-      const scrollElem = document.querySelector('.right-content')
+      const scrollElem = getScrollElem(component)
+      //const scrollElem = document.querySelector('.right-content')
       scrollElem.scrollTop = 0
       component.refreshListings()
     }
@@ -345,6 +355,23 @@ const submitContactEnd = ({type, action}, component) => {
   })
 }
 
+const mobileMapView = ({type, action}, component) => {
+
+  component.setState({
+    mobileView: 'MAP'
+  }, () => {
+    backToResults({type, action}, component)
+  })
+}
+
+const mobileListView = ({type, action}, component) => {
+  component.setState({
+    mobileView: 'LIST'
+  }, () => {
+    backToResults({type, action}, component)
+  })
+}
+
 const handlers = {
   SET_MIN_PRICE: setMinPrice,
   SET_MAX_PRICE: setMaxPrice,
@@ -372,7 +399,9 @@ const handlers = {
   UPDATE_CONTACT_INFO: updateContactInfo,
   SUBMIT_CONTACT_START: submitContactStart,
   SUBMIT_CONTACT_END: submitContactEnd,
-  INVALID_CONTACT: invalidContact
+  INVALID_CONTACT: invalidContact,
+  MOBILE_MAP_VIEW: mobileMapView,
+  MOBILE_LIST_VIEW: mobileListView
 }
 
 export const handleMessage = ({type, action}, component) => {