Listing details CSS

web/components/Filters.js

@@ -24,8 +24,8 @@ export default class Filters extends React.Component {
             CIJENA
           </div>
 
-          <div className="filter-content">
-            od <input></input> od <input></input>
+          <div className="filter-content value-between-box">
+            izmedju <input></input> i <input></input>
           </div>
 
         </div>
@@ -54,9 +54,9 @@ export default class Filters extends React.Component {
           <div className="filter-title">
             KVADRATA
           </div>
-          <div className="filter-content">
-              od <input></input>
-              do <input></input>
+          <div className="filter-content value-between-box">
+              izmedju <input></input>
+              i <input></input>
           </div>
         </div>
         <div className="filter-row filter-property-rooms">

web/components/ListingDetails.js

@@ -0,0 +1,84 @@
+import React from 'react';
+
+export default class ListingDetails extends React.Component {
+  onBackClick() {
+    if (this.props.onBackClick) {
+      this.props.onBackClick();
+    }
+  }
+  render() {
+    return (
+      <div className="ld-container">
+        <div className="ld-header">
+          <div className="back-to-results">
+            <button className="back-to-results-btn"
+              onClick={this.onBackClick.bind(this)}>
+              <i className="fa fa-arrow-left" aria-hidden="true"></i>
+              <span>
+                Nazad na rezultate
+              </span>
+            </button>
+          </div>
+          <button className="hide-listing">
+            <i className="fa fa-thumbs-o-down" aria-hidden="true"></i>
+
+            <span>
+              Sakrij
+            </span>
+          </button>
+        </div>
+
+        <div className="ld-details">
+          <div className="ld-image-container">
+            <img src="https://d1qwdw9cs0do74.cloudfront.net/150698038/640x480"></img>
+          </div>
+          <div className="ld-price-address-box">
+            <div className="ld-price">
+              120 000 KM
+            </div>
+
+            <div className="ld-address">
+              <div className="">Hakije Turajlica 4</div>
+              <div className="">Novi Grad, Sarajevo</div>
+            </div>
+          </div>
+
+          <div className="ld-features">
+            <div className="ld-feature-box">
+              <i className="fa fa-bed"></i>
+              4 sobe
+            </div>
+            <div className="ld-feature-box">
+              <i className="fa fa-home"></i>
+              88m2
+            </div>
+            <div className="ld-feature-box">
+              <i className="fa fa-home"></i>
+              1. sprat
+            </div>
+            <div className="ld-feature-box">
+              <i className="fa fa-home"></i>
+              Balkon
+            </div>
+          </div>
+          <div className="ld-check-availability">
+            <button>Kontaktiraj</button>
+          </div>
+          <div className="ld-description">
+            Agencija "Nekretnina", (www.nekretnina.ba), prodaje komforan trosoban stan, 67m2, na veoma lijepoj lokaciji, Dobrinja 3. Stan se nalazi na visokom prizemlju stambene zgrade od samo četiri etaže. 
+            Sastoji se od: Ulaznog hodnika, dnevnog boravka, kuhinje, trpezarije, iz koje se izlazi na balkon, dvije spavaće sobe i kupatila. Stan je dvostran a posjeduje i podrumsku prostoriju. Veoma miran kvart sa odličnim komšilukom, okružen šetalištima i parkovima za djecu, sa javnim i privatnim parkingom. Stan zahtjeva dodatna ulaganja po vlastitom izboru i odlična je ponuda za višečlanu porodicu. 
+            Stan je trenutno bez namještaja i kuhinje, spreman za obnovu i useljenje.
+              U neposrednoj blizini se nalaze sve važnije ustanove, osnovna i srednja škola, Peta gimnazija, vrtići, uslužne djelatnosti te gradski saobraćaj. Molimo sve ozbiljno zainteresovane osobe da se jave za dodatne informacije.
+                Želite kvalitetno investirati u nekretnine? Nazovite nas!
+          </div>
+          <div className="ld-read-more">
+            <a href="">Procitajte vise</a>
+          </div>
+
+          <div className="ld-footer">
+          </div>
+        </div>
+      </div>);
+  }
+}
+

web/components/Listings.js

@@ -1,28 +1,30 @@
 import React from 'react';
 
 export default class Listings extends React.Component {
+  onListingClick() {
+    if (this.props.onListingClick) {
+      this.props.onListingClick();
+    }
+  }
   render() {
 
     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 className="select-container">
+            <div className="select-group">
+              <select name="listings-type" id="listings-type">
+                <option value="cijena">Cijena: od najmanje</option>
+              </select>
+            </div>
           </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 className="listings-items">
-          <div className="property-list-item">
+          <div className="property-list-item" onClick={this.onListingClick.bind(this)}>
             <div className="pli-image">
               <img src="https://d37lj287rvypnj.cloudfront.net/150225204/medium" alt=""></img>
               </div>
@@ -42,7 +44,7 @@ export default class Listings extends React.Component {
             </div>
             <div className="property-list-item">
               <div className="pli-image">
-                <img src="https://d37lj287rvypnj.cloudfront.net/150225204/medium" alt=""></img>
+                <img src="https://d37lj287rvypnj.cloudfront.net/151086207/medium" alt=""></img>
                 </div>
                 <div className="pli-details">
                   <div className="price">12 000 KM</div>

web/components/Main.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import Filters from './Filters';
 import Listings from './Listings';
+import ListingDetails from './ListingDetails';
 import { pacSelectFirst } from '../helpers/googleMaps';
 
 class Main extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      listingDetails: false
     };
   }
 
@@ -74,9 +76,40 @@ class Main extends React.Component {
     });
   }
 
+  onListingClick() {
+    this.setState({
+      listingDetails: true
+    })
+  }
+
+  onBackClick() {
+    this.setState({
+      listingDetails: false
+    })
+  }
+
+  renderRightContent() {
+
+    const children = [];
+
+    if (this.state.listingDetails) {
+      children.push(<ListingDetails onBackClick={this.onBackClick.bind(this)}/>);
+    } else {
+      children.push(<Filters onClose={this.onCloseClick.bind(this)}/>);
+      children.push(<Listings onListingClick={this.onListingClick.bind(this)}/>);
+    }
+    const content = (
+      <div className="right-content">
+        {children}
+      </div>);
+
+    return content;
+  }
+
   render() {
     const leftStyle  = {};
     const rightStyle = {};
+    const listingDetails = true;
 
     let leftClass    = 'left-base';
     let rightClass   = 'right-base';
@@ -107,10 +140,7 @@ class Main extends React.Component {
         </div>
 
         <div id="right" style={rightStyle} className={rightClass}>
-          <div className="right-content">
-            <Filters onClose={this.onCloseClick.bind(this)}/>
-            <Listings />
-          </div>
+          {this.renderRightContent()}
         </div>
 
         <div id="left" style={leftStyle} className={leftClass}>