From 707227806127db830026f0081a2d79ea603305be Mon Sep 17 00:00:00 2001 From: Edin Dazdarevic Date: Tue, 8 Nov 2016 10:25:48 +0100 Subject: [PATCH] Finished navbar (responsive) and started to work on filters sidebar --- web/components/Filters.js | 61 ++++++++++- web/components/Listings.js | 12 --- web/components/Main.js | 29 ++++- web/dist/index.html | 6 +- web/dist/main.css | 171 +++++++++++++++++++++++++++++- web/dist/static/images/search.svg | Bin 0 -> 276 bytes web/webpack.config.js | 3 +- 7 files changed, 260 insertions(+), 22 deletions(-) create mode 100644 web/dist/static/images/search.svg diff --git a/web/components/Filters.js b/web/components/Filters.js index f1f11e6..8d9c2e2 100644 --- a/web/components/Filters.js +++ b/web/components/Filters.js @@ -6,16 +6,69 @@ export default class Filters extends React.Component { return (
- one filter +
+ CIJENA +
+ +
+ od od +
+
- two filter +
+ TIP +
+
+
+ Stan +
+
+ Kuća +
+
+ Zemljište +
+
+ Poslovni prostor +
+
- two filter +
+ KVADRATA +
+
+ od do +
- two filter +
+ BROJ SOBA +
+
+
+ Garsonjera +
+
+ 2 +
+
+ 3 +
+
+ 4+ +
+
+
+
+
+
+
+
Više Filtera
+
+
+
) } diff --git a/web/components/Listings.js b/web/components/Listings.js index 9117192..31f67b7 100644 --- a/web/components/Listings.js +++ b/web/components/Listings.js @@ -5,18 +5,6 @@ export default class Listings extends React.Component { return (
-
- one filter -
-
- two filter -
-
- two filter -
-
- two filter -
) } } diff --git a/web/components/Main.js b/web/components/Main.js index 47adcb5..4d589e9 100644 --- a/web/components/Main.js +++ b/web/components/Main.js @@ -10,9 +10,9 @@ class Main extends React.Component { } componentDidMount() { - const uluru = {lat: -25.363, lng: 131.044}; + const uluru = {lat: 43.845031, lng: 18.4019262}; const map = new google.maps.Map(this.refs.map, { - zoom: 4, + zoom: 13, center: uluru, streetViewControl: false, mapTypeControl: false @@ -27,6 +27,14 @@ class Main extends React.Component { control.innerHTML = ''; control.style = "top: 200px;" + var input = document.getElementById('gmaps-places-input'); + var options = { + componentRestrictions: {country: "BA"} + }; + var searchBox = new google.maps.places.Autocomplete(input, options); + searchBox.addListener('places_changed', function() { + console.log('search changed', searchBox.getPlaces()); + }); control.addEventListener('click', (e) => { this.setState({ mapClicked: true @@ -34,6 +42,7 @@ class Main extends React.Component { }); control.index = 1; map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control); + } onCloseClick(e) { @@ -57,7 +66,21 @@ class Main extends React.Component { return (
diff --git a/web/dist/main.css b/web/dist/main.css index 8c37293..f4d0361 100644 --- a/web/dist/main.css +++ b/web/dist/main.css @@ -1,6 +1,8 @@ body { margin: 0; height: 100%; + font-family: "Roboto" , Helvetica, Arial, sans-serif; + color: #333333; } html { @@ -30,13 +32,24 @@ html { z-index: 10000; width: 100%; box-sizing: border-box; - padding: 20px; + padding: 9px 9px 9px 20px; + overflow: hidden; + display: flex; + align-items: center; +} + +#header .title { + font-weight: bold; + font-size: 1.5em; + color: #b6d53b; } .filter-row { padding: 15px 0; border-bottom: 1px solid #e7e7e7; + display: flex; + align-items: baseline; } .listings-row { @@ -75,11 +88,13 @@ html { } .filters { + position: relative; margin: 0; padding: 10px 25px 0; border: 1px solid #e6e6e6; background: #fff; border-radius: 3px; + font-size: 13px; } .filters-btn-toggle { @@ -99,6 +114,15 @@ html { display: block; } +.hamburger-menu { + display: none; +} + +.view-types { + display: none; + margin-left: 10px; +} + @media (max-width : 768px) { #right { width: 100%; @@ -128,4 +152,149 @@ html { .left-base { display: block; } + + #header .title { + display: none; + } + + .hamburger-menu { + display: inline-block; + } + + .where-to { + width: 70%; + } + + .where-to:focus { + width: 85%; + } + + .view-types { + display: flex; + } + + .filter-row { + display: block; + } + + .filter-title { + margin-bottom: 10px; + } +} + +.where-to { + max-width: 352px; + height: 40px; + margin-left: 30px; + padding-left: 50px; + border: 1px solid #e6e6e6; + background: #fff; + /*background-image: url(/static/images/search.svg);*/ + background-image: url(https://d214hhm15p4t1d.cloudfront.net/7_4_2/p/img/icons/search.svg); + background-repeat: no-repeat; + background-position: 10px; + background-size: 20px; + color: #2d3138; + font-size: 16px; + letter-spacing: .3px; + --webkit-flex: 4 4; + border-radius: 3px; + align-self: center; + width: 100%; +} + +.pac-container { + z-index: 10000051 !important; +} + +.view-types a { + border: 1px solid #b6d53b; + background: #fff; + color: #b6d53b; + font-size: 18px; + letter-spacing: .4px; + width: 48px; + height: 32px; + padding: 0; + padding-top: 5px; + text-align: center; +} + +.view-type-left { + border-radius: 5px 0 0 5px; +} + +.view-type-right { + border-radius: 0px 5px 5px 0; + margin-left: -1px; +} + +.filter-bottom { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + height: 50px; +} + +.filter-title { + width: 40%; + letter-spacing: 1px; +} + +.filter-content { + width: 100%; +} + +.filter-content input { + padding: 5px 8px; + border: 1px solid #e2e2e6; + width: 100px; + border-radius: 3px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + font-size: 14px; + color: #212126; + letter-spacing: .2px; +} + +.property-type-btn { + width: 171px; +} + +.filter-btn { + display: inline-block; + border: 1px solid #b6d53b;; + padding: 12px; + cursor: pointer; + margin: 0 6px 6px 0; + color: #2d3138; + font-size: 14px; + letter-spacing: .4px; + border-radius: 3px; + user-select: none; + touch-action: manipulation; + vertical-align: middle; + text-align: center; +} + +.property-rooms-btn { + width: 58px; +} + +.property-rooms-studio { + width: 93px; +} + +.filter-row.no-border { + border: 0; +} + +.filter-btn.more-filters { + float: right; + width: 145px; +} + +.filter-btn:hover { + background-color: #FFFFEE; } diff --git a/web/dist/static/images/search.svg b/web/dist/static/images/search.svg new file mode 100644 index 0000000000000000000000000000000000000000..8d9c4a73607706fb862d68e85bca948a53fcdbd3 GIT binary patch literal 276 zcmV+v0qg!BiwFQZFB(_^|5cFPZi6rkMqkCst}%(j??kv*Z?~&G0V-L^mL>?&QuXN< zpq(^DvOXW>*pi$1dV