diff --git a/web/dist/index.html b/web/dist/index.html index 9daa41d..3bc97bf 100644 --- a/web/dist/index.html +++ b/web/dist/index.html @@ -4,7 +4,7 @@ KIVI - Najbolji način da pronađeš svoj dom - + diff --git a/web/dist/main.css b/web/dist/main.css index c0a6b7c..85bcf21 100644 --- a/web/dist/main.css +++ b/web/dist/main.css @@ -170,6 +170,12 @@ html { border-radius: 5px 0 0 5px; } +.view-type-right.selected, +.view-type-left.selected { + background-color: #b6d53b; + color: #fff; +} + .view-type-right { border-radius: 0px 5px 5px 0; margin-left: -1px; @@ -179,8 +185,13 @@ html { position: fixed; bottom: 0; left: 0; - width: 100%; + width: 99%; height: 50px; + display: flex; + text-align: center; + padding-left: 10px; + padding-right: 0; + align-items: baseline; } .filter-title { @@ -256,7 +267,7 @@ html { } .filter-btn.more-filters { - float: right; + /*float: right;*/ width: 145px; } @@ -459,11 +470,39 @@ html { } } +.listings-filter { + display: none; +} + @media (max-width : 768px) { .listings-count { display: none; } + .listings-filter { + right: 5px; + min-width: 150px; + /*text-align: right;*/ + /*display: block;*/ + + display: inline-block; + border: 1px solid #b6d53b; + padding: 8px 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; + flex-grow: 1; + text-overflow: ellipsis; + overflow: hidden; + } + #right { width: 100%; float: none; @@ -540,7 +579,7 @@ html { .filter-row { display: block; - padding: 11px 0; + padding: 5px 0; border: 0; } diff --git a/web/dist/static/images/pins_sprite.png b/web/dist/static/images/pins_sprite.png index 6533948..44c9f4b 100644 Binary files a/web/dist/static/images/pins_sprite.png and b/web/dist/static/images/pins_sprite.png differ diff --git a/web/src/components/Filters.js b/web/src/components/Filters.js index e4266c1..86a47b6 100644 --- a/web/src/components/Filters.js +++ b/web/src/components/Filters.js @@ -68,8 +68,14 @@ export default class Filters extends React.Component { this.props.dispatch({type: 'SET_CATEGORY', action: {category}}) } - onRefreshClick () { + onRefreshClick (closeFilters) { this.updateSearch() + + if (closeFilters) { + this.props.dispatch({ + type: 'CLOSE_FILTERS' + }) + } } onKeyPress (e) { @@ -95,6 +101,25 @@ export default class Filters extends React.Component { this.props.dispatch({type: 'UPDATE_SEARCH'}) } + onResetSearch (e) { + this.props.dispatch({ + type: 'UPDATE_ROUTE', + action: { + params: { + minPrice: '', + maxPrice: '', + minSize: '', + maxSize: '', + rooms: '', + category: '' + } + } + }) + this.props.dispatch({ + type: 'RESET_FILTERS' + }) + } + render () { const {filters} = this.props const selectedRooms = val => filters.rooms[val] ? 'selected' : '' @@ -249,7 +274,11 @@ export default class Filters extends React.Component {
-
+
+
Poništi
+
Potvrdi
+ +
) } diff --git a/web/src/components/Listings.js b/web/src/components/Listings.js index 798c071..9c2a299 100644 --- a/web/src/components/Listings.js +++ b/web/src/components/Listings.js @@ -157,6 +157,14 @@ export default class Listings extends React.Component { }) } + onFiltersClick (e) { + e.preventDefault() + + this.props.dispatch({ + type: 'OPEN_FILTERS' + }) + } + render () { const {listings = new Map(), totalCount, sort} = this.props @@ -181,6 +189,12 @@ export default class Listings extends React.Component {
{totalCount} rezultata
+ +
+ Filteri +
diff --git a/web/src/components/Main.js b/web/src/components/Main.js index 64e1cde..040a52b 100644 --- a/web/src/components/Main.js +++ b/web/src/components/Main.js @@ -166,8 +166,12 @@ class Main extends React.Component { }) control.addEventListener('click', e => { - this.setState({ - mapClicked: true + //this.setState({ + //mapClicked: true + //}) + + this.dispatch({ + type: 'OPEN_FILTERS' }) }) @@ -183,18 +187,22 @@ class Main extends React.Component { } onCloseClick (e) { - if (this.state.mapClicked) { - setTimeout( - () => { - google.maps.event.trigger(this.map, 'resize') - }, - 100 - ) + if (this.state.filtersOpen) { + console.log('FILTERS WERE OPEN') + //setTimeout( + //() => { + //google.maps.event.trigger(this.map, 'resize') + //}, + //100 + //) } - this.setState({ - mapClicked: false + this.dispatch({ + type: 'CLOSE_FILTERS' }) + //this.setState({ + //mapClicked: false + //}) } findMarker (id) { @@ -578,12 +586,13 @@ class Main extends React.Component { let leftClass = 'left-base' let rightClass = 'right-base' - if (this.state.listingId || this.state.mapClicked) { + if (this.state.listingId || this.state.filtersOpen) { leftClass = this.addAbsoluteLeftInRender ? 'left-absolute' : '' rightClass = 'right-shown' } const {contactFormOpen} = this.state + const isMapView = this.state.mobileView === 'MAP' return (
@@ -601,10 +610,10 @@ class Main extends React.Component { type="text" />
- + - +
@@ -616,7 +625,7 @@ class Main extends React.Component {
{this.state.mobileView === 'LIST' && !this.state.listingDetails && -
+
{ diff --git a/web/src/lib/handlers.js b/web/src/lib/handlers.js index 18ac7f5..5e8d133 100644 --- a/web/src/lib/handlers.js +++ b/web/src/lib/handlers.js @@ -372,6 +372,27 @@ const mobileListView = ({type, action}, component) => { }) } +const openFilters = ({type, action}, component) => { + component.setState({ + filtersOpen: true + }) +} + +const closeFilters = ({type, action}, component) => { + component.setState({ + filtersOpen: false + }) +} + +const resetFilters = ({type, action}, component) => { + component.setState({ + filters: { + rooms: {}, + category: {} + } + }) +} + const handlers = { SET_MIN_PRICE: setMinPrice, SET_MAX_PRICE: setMaxPrice, @@ -401,7 +422,10 @@ const handlers = { SUBMIT_CONTACT_END: submitContactEnd, INVALID_CONTACT: invalidContact, MOBILE_MAP_VIEW: mobileMapView, - MOBILE_LIST_VIEW: mobileListView + MOBILE_LIST_VIEW: mobileListView, + OPEN_FILTERS: openFilters, + CLOSE_FILTERS: closeFilters, + RESET_FILTERS: resetFilters } export const handleMessage = ({type, action}, component) => {