Progress on contact

web/dist/main.css

@@ -829,3 +829,52 @@ h5 {
   color: #2d3138;
 }
 
+
+
+.modal {
+    position: fixed;
+    font-family: Arial, Helvetica, sans-serif;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 99999;
+    -webkit-transition: opacity 400ms ease-in;
+    -moz-transition: opacity 400ms ease-in;
+    transition: opacity 400ms ease-in;
+    /*pointer-events: none;*/
+    pointer-events: auto;
+}
+
+.modal > div {
+    width: 460px;
+    position: relative;
+    margin: 10% auto;
+    padding: 5px 20px 13px 20px;
+    border-radius: 10px;
+    background: #fff;
+}
+
+.modal h3 {
+  color: #575a60;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: .3px;
+}
+
+.close {
+  color: #575a60;
+  line-height: 25px;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  text-align: center;
+  width: 24px;
+  text-decoration: none;
+  font-size: 1.2em;
+}
+
+.close:hover {
+    /*background: #00d9ff;*/
+}

web/src/components/ContactModal.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+export default class ContactModal extends React.Component {
+  onContactCloseClick () {
+
+  }
+
+  onContactCloseClick (e) {
+    this.props.dispatch({
+      type: 'CLOSE_CONTACT'
+    });
+
+    e.preventDefault();
+  }
+
+
+  render() {
+    return (
+      <div className="modal">
+
+        <div>
+          <a href="#close" title="Zatvori" className="close" onClick={this.onContactCloseClick.bind(this)}>
+            <i className="fa fa-times" aria-hidden="true"></i>
+          </a>
+          <h3>Kontaktirajte prodavca</h3>
+        </div>
+      </div>
+    );
+  }
+}

web/src/components/ListingDetails.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import Gallery from './gallery'
 import {formatPrice} from '../lib/helpers'
+import ContactModal from './ContactModal';
 
 export default class ListingDetails extends React.Component {
   onReadMore (e) {
@@ -23,8 +24,14 @@ export default class ListingDetails extends React.Component {
     this.props.dispatch({type: 'BACK_TO_RESULTS'})
   }
 
+  onContactClick () {
+    this.props.dispatch({
+      type: 'OPEN_CONTACT'
+    });
+  }
+
   render () {
-    const {listing, descriptionExpanded} = this.props
+    const {listing, descriptionExpanded, contactFormOpen} = this.props
     if (!listing) {
       return null
     }
@@ -94,7 +101,7 @@ export default class ListingDetails extends React.Component {
             </div>
           </div>
           <div className="ld-check-availability">
-            <button>Kontaktiraj</button>
+            <button onClick={this.onContactClick.bind(this)}>Kontaktiraj</button>
           </div>
           <div className={descriptionClasses}>
             {listing.longDescription}
@@ -108,6 +115,8 @@ export default class ListingDetails extends React.Component {
             : null}
           <div className="ld-footer" />
         </div>
+
+        {contactFormOpen ? <ContactModal dispatch={this.props.dispatch} /> : null}
       </div>
     )
   }

web/src/components/Main.js

@@ -511,6 +511,7 @@ class Main extends React.Component {
       const listing = this.state.listing //this.state.listings.get(this.state.listingId);
       children.push(
         <ListingDetails
+          contactFormOpen={this.state.contactFormOpen}
           listing={listing}
           imageIndex={this.state.imageIndex}
           dispatch={this.dispatch.bind(this)}

web/src/lib/handlers.js

@@ -278,6 +278,18 @@ const updateRoute = ({type, action}, component) => {
   component.router.update(action)
 }
 
+const openContact = ({type, action}, component) => {
+  component.setState({
+    contactFormOpen: true
+  });
+}
+
+const closeContact = ({type, action}, component) => {
+  component.setState({
+    contactFormOpen: false
+  });
+}
+
 const handlers = {
   SET_MIN_PRICE: setMinPrice,
   SET_MAX_PRICE: setMaxPrice,
@@ -299,7 +311,9 @@ const handlers = {
   MAP_IDLE: mapIdle,
   PINS_LOADED: pinsLoaded,
   SORT_CHANGE: sortChange,
-  UPDATE_ROUTE: updateRoute
+  UPDATE_ROUTE: updateRoute,
+  OPEN_CONTACT: openContact,
+  CLOSE_CONTACT: closeContact
 }
 
 export const handleMessage = ({type, action}, component) => {
@@ -307,5 +321,6 @@ export const handleMessage = ({type, action}, component) => {
     throw new `Unhandled message: ${type}`()
   }
 
+  console.log(type);
   return handlers[type]({type, action}, component)
 }