From c32e49e6c38e17ce593d1eba94acd4c5d9b43b7a Mon Sep 17 00:00:00 2001 From: Edin Dazdarevic Date: Tue, 15 Nov 2016 00:03:59 +0100 Subject: [PATCH] Listing details CSS --- web/components/Filters.js | 10 +- web/components/ListingDetails.js | 84 +++++++++++++ web/components/Listings.js | 24 ++-- web/components/Main.js | 38 +++++- web/dist/main.css | 207 ++++++++++++++++++++++++++++--- 5 files changed, 323 insertions(+), 40 deletions(-) diff --git a/web/components/Filters.js b/web/components/Filters.js index 74dac2b..5fe3ce3 100644 --- a/web/components/Filters.js +++ b/web/components/Filters.js @@ -24,8 +24,8 @@ export default class Filters extends React.Component { CIJENA -
- od od +
+ izmedju i
@@ -54,9 +54,9 @@ export default class Filters extends React.Component {
KVADRATA
-
- od - do +
+ izmedju + i
diff --git a/web/components/ListingDetails.js b/web/components/ListingDetails.js index e69de29..52a16b1 100644 --- a/web/components/ListingDetails.js +++ b/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 ( +
+
+
+ +
+ +
+ +
+
+ +
+
+
+ 120 000 KM +
+ +
+
Hakije Turajlica 4
+
Novi Grad, Sarajevo
+
+
+ +
+
+ + 4 sobe +
+
+ + 88m2 +
+
+ + 1. sprat +
+
+ + Balkon +
+
+
+ +
+
+ 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! +
+
+ Procitajte vise +
+ +
+
+
+
); + } +} + diff --git a/web/components/Listings.js b/web/components/Listings.js index 4624580..b4fd032 100644 --- a/web/components/Listings.js +++ b/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 (
-
- +
+
+ +
322 rezultata
-
-
-
-
-
-
+
@@ -42,7 +44,7 @@ export default class Listings extends React.Component {
- +
12 000 KM
diff --git a/web/components/Main.js b/web/components/Main.js index 33bebe5..c4dfe66 100644 --- a/web/components/Main.js +++ b/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(); + } else { + children.push(); + children.push(); + } + const content = ( +
+ {children} +
); + + 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 {
diff --git a/web/dist/main.css b/web/dist/main.css index e4e2af1..2c5e5df 100644 --- a/web/dist/main.css +++ b/web/dist/main.css @@ -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 { + + } }