senaduka/old-kivi
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Listing details CSS

Browse Source
This commit is contained in:
Edin Dazdarevic
2016-11-15 00:03:59 +01:00
parent 8a7193951e
commit c32e49e6c3
5 changed files with 323 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/components/Filters.js
View File

@@ -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">

84
web/components/ListingDetails.js
View File

@@ -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>);
}
}

24
web/components/Listings.js
View File

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

38
web/components/Main.js
View File

@@ -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}>

207
web/dist/main.css vendored
View File

@@ -3,6 +3,8 @@ body {
height: 100%;
font-family: "Arimo", "Roboto" , Helvetica, Arial, sans-serif;
color: #333333;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
html {
@@ -202,7 +204,7 @@ html {
.filter-btn {
display: inline-block;
border: 1px solid #b6d53b;;
padding: 6px 12px;
padding: 8px 12px;
cursor: pointer;
margin: 0 6px 6px 0;
color: #2d3138;
@@ -216,7 +218,12 @@ html {
flex-grow: 1;
text-overflow: ellipsis;
overflow: hidden;
height: 35px;
}
.value-between-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.property-type-btn {
@@ -280,6 +287,8 @@ html {
.listings-header {
padding: 10px 0;
position: relative;
display: flex;
align-items: center;
}
#listings-type {
@@ -296,6 +305,10 @@ html {
width: 101%;
}
.select-container {
width: 100%;
}
.select-group {
position: relative;
display: inline-flex;
@@ -311,24 +324,12 @@ html {
}
.listings-count {
display: inline-block;
width: 274px;
right: 5px;
color: #878698;
font-size: 16px;
text-align: center;
letter-spacing: .5px;
vertical-align: middle;
}
.listings-options {
position: absolute;
right: 0;
top: 0;
right: 0;
display: flex;
height: 100%;
vertical-align: middle;
align-items: center;
min-width: 150px;
text-align: right;
}
.property-list-item {
@@ -354,7 +355,7 @@ html {
display: flex;
flex-direction: column;
flex: 3 3;
letter-spacing: 1.4px;
letter-spacing: 1px;
}
.price {
@@ -411,7 +412,7 @@ html {
background: #fff;
cursor: pointer;
border-radius: 3px;
height: 100%;
height: inherit;
}
.property-list-item:hover {
@@ -423,7 +424,7 @@ html {
}
.description {
font-size: 20px;
font-size: 18px;
margin-top: 15px;
}
@@ -542,4 +543,170 @@ html {
.filter-property-types .filter-content {
width: 100%;
}
.value-between-box {
justify-content: space-around;
}
}
/*
* Listing details
*/
.ld-container {
margin: 10px;
}
.ld-header {
display: flex;
}
.ld-header .back-to-results {
width: 100%;
}
.back-to-results-btn {
width: 215px;
padding: 5.5px 10px;
border: 1px solid #e6e6e6;
font-size: 16px;
letter-spacing: .26px;
border-radius: 3px;
background: #fff;
color: #5ab8f8;
cursor: pointer;
}
.hide-btn {
}
.back-to-results-btn span {
padding-left: 5px;
}
.ld-header .hide-listing {
max-width: 100px;
text-align: right;
}
.ld-details {
border: 1px solid #e6e6e6;
padding: 0 10px;
margin-top: 15px;
}
.ld-image-container {
height: 375px;
width: 500px;
text-align: center;
}
.ld-image-container img {
width: 100%;
height: 100%;
}
.ld-price-address-box {
padding-top: 20px;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.ld-price {
font-size: 28px;
border-right: 1px solid #e6e6e6;
flex: 3 3;
}
.ld-address {
flex: 5 5;
padding-left: 15px;
line-height: 1.5;
}
.ld-features {
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
padding: 15px 0;
margin-top: 15px;
display: flex;
justify-content: space-between;
}
.ld-feature-box {
flex: 1 1;
text-align: center;
}
.ld-feature-box i {
display: block;
font-size: 32px;
}
.ld-description {
line-height: 2;
font-size: 14px;
position: relative;
max-height: 7em;
overflow: hidden;
}
.ld-description:after {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100%;
content: '';
pointer-events: none;
background-image: #fff;
background-image: -webkit-gradient(bottom,from(#fff),to(hsla(0,0%,100%,0)));
background-image: -webkit-linear-gradient(bottom,#fff,hsla(0,0%,100%,0));
}
.ld-check-availability {
text-align: center;
margin: 0 25px;
padding: 15px 0;
}
.ld-check-availability button {
font-size: 18px;
padding: 15px 0;
background-color: #51bc6a;
color: #ffffff;
border-radius: 3px;
width: 242px;
letter-spacing: 0.4px;
border: 1px solid #51bc6a;
cursor: pointer;
}
.ld-read-more {
text-align: center;
padding: 20px;
}
.ld-read-more a {
text-decoration: none;
color: green;
}
@media (max-width: 768px) {
.ld-image-container {
width: 100%;
height: 100%;
}
.ld-price {
font-size: 18px;
min-width: 110px;
}
.ld-address {
}
}