Skip to content

Commit 2a7fab7

Browse files
uds5501niranjan94
uds5501
authored and
niranjan94
committed
feat: toggle filters in mobile devices (#3137)
* Add toggle filters for mobile screens * simplify logic as suggested
1 parent 92d1d3d commit 2a7fab7

File tree

2 files changed

+96
-82
lines changed

2 files changed

+96
-82
lines changed

‎app/components/explore/side-bar.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ export default Component.extend({
99

1010
customStartDate: moment().toISOString(),
1111

12-
customEndDate: null,
12+
customEndDate : null,
13+
showFilters : false,
1314

1415
hideClearFilters: computed('category', 'sub_category', 'event_type', 'startDate', 'endDate', 'location', function() {
1516
return !(this.category || this.sub_category || this.event_type || this.startDate || this.endDate || this.location !== null);
@@ -19,6 +20,10 @@ export default Component.extend({
1920
return getDateRanges.bind(this)();
2021
}),
2122

23+
showFiltersOnMobile: computed('device.isMobile', 'showFilters', function() {
24+
return (!this.device.isMobile || this.showFilters);
25+
}),
26+
2227
actions: {
2328
onLocationChangeHandler(lat, lng) {
2429
this.setProperties({
@@ -111,6 +116,10 @@ export default Component.extend({
111116
this.set('sub_category', null);
112117
this.set('event_type', null);
113118
this.set('location', null);
119+
},
120+
121+
toggleFilters() {
122+
this.set('showFilters', !this.showFilters);
114123
}
115124
}
116125
});

‎app/templates/components/explore/side-bar.hbs

Lines changed: 86 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
{{#g-map lat=37.7833 lng=-122.4167 zoom=2 address=location class='google-maps' as |context|}}
33
{{g-map-address-marker context address=location onLocationChange=(action 'onLocationChangeHandler')}}
44
{{/g-map}}
5-
</div>
5+
</div>
66
<div class="item">
77
<div class="ui input">
88
{{widgets/forms/places-autocomplete
@@ -12,89 +12,94 @@
1212
placeholder=(t 'Enter Location')}}
1313
</div>
1414
</div>
15-
<div class="item">
16-
{{#ui-accordion}}
17-
<span class="title">
18-
<i class="right floated dropdown icon"></i>
19-
{{t 'Categories'}}
20-
</span>
21-
<div class="content menu">
22-
{{#each model.eventTopics as |Category| }}
23-
<a href="#"
24-
class="link item {{if (eq category Category.name) 'active'}}" {{action 'selectCategory' Category.name}}>
25-
<i class="caret {{if (eq category Category.name) 'down' 'right'}} icon"></i>
26-
{{Category.name}}
27-
</a>
28-
{{#if (eq category Category.name)}}
29-
{{#each Category.subTopics as |subCategory|}}
30-
<a href="#"
31-
class="link inner item {{if (eq sub_category subCategory.slug) 'active'}}"
32-
{{action 'selectCategory' Category.name subCategory.slug}}>
33-
{{subCategory.name}}
34-
</a>
35-
{{/each}}
36-
{{/if}}
37-
{{/each}}
38-
</div>
39-
{{/ui-accordion}}
40-
</div>
41-
<div class="item">
42-
{{#ui-accordion}}
43-
<span class="title">
44-
<i class="dropdown icon"></i>
45-
{{t 'Event Type' }}
46-
</span>
47-
<div class="content menu">
48-
{{#each model.eventTypes as |eventType|}}
49-
<a href="#"
50-
class="link item {{if (eq event_type eventType.name) 'active'}}"
51-
{{action 'selectEventType' eventType.name}}>
52-
{{eventType.name}}
53-
</a>
54-
{{/each}}
55-
</div>
56-
{{/ui-accordion}}
57-
</div>
58-
<div class="item">
59-
{{#ui-accordion}}
60-
<span class="title">
61-
<i class="dropdown icon"></i>
62-
{{t 'Date'}}
63-
</span>
64-
<div class="content menu">
65-
{{#each dateRanges as |dateRange|}}
66-
<a href="#" class="link item {{if (eq dateType dateRange.key) 'active'}}" {{action 'selectDateFilter'
67-
dateRange.key}}>
68-
{{dateRange.name}}
69-
{{#if (and (eq dateRange.key 'custom_dates') (eq dateType 'custom_dates'))}}
70-
<div class="explore sub menu">
71-
<div class="ui form">
72-
<div class="grouped fields">
73-
<div class="item field">
74-
<label class="required" for="start_date">{{t 'Starts'}}</label>
75-
{{widgets/forms/date-picker type='text'
76-
value=customStartDate
77-
rangePosition='start'
78-
onChange=(action 'dateValidate')
79-
}}
80-
</div>
81-
<div class="item field">
82-
<label class="required" for="end_date">{{t 'Ends'}}</label>
83-
{{widgets/forms/date-picker type='text'
84-
value=customEndDate
85-
rangePosition='end'
86-
onChange=(action 'onDateChange')
87-
}}
15+
{{#if showFiltersOnMobile}}
16+
<div class="item">
17+
{{#ui-accordion}}
18+
<span class="title">
19+
<i class="right floated dropdown icon"></i>
20+
{{t 'Categories'}}
21+
</span>
22+
<div class="content menu">
23+
{{#each model.eventTopics as |Category| }}
24+
<a href="#"
25+
class="link item {{if (eq category Category.name) 'active'}}" {{action 'selectCategory' Category.name}}>
26+
<i class="caret {{if (eq category Category.name) 'down' 'right'}} icon"></i>
27+
{{Category.name}}
28+
</a>
29+
{{#if (eq category Category.name)}}
30+
{{#each Category.subTopics as |subCategory|}}
31+
<a href="#"
32+
class="link inner item {{if (eq sub_category subCategory.slug) 'active'}}"
33+
{{action 'selectCategory' Category.name subCategory.slug}}>
34+
{{subCategory.name}}
35+
</a>
36+
{{/each}}
37+
{{/if}}
38+
{{/each}}
39+
</div>
40+
{{/ui-accordion}}
41+
</div>
42+
<div class="item">
43+
{{#ui-accordion}}
44+
<span class="title">
45+
<i class="dropdown icon"></i>
46+
{{t 'Event Type' }}
47+
</span>
48+
<div class="content menu">
49+
{{#each model.eventTypes as |eventType|}}
50+
<a href="#"
51+
class="link item {{if (eq event_type eventType.name) 'active'}}"
52+
{{action 'selectEventType' eventType.name}}>
53+
{{eventType.name}}
54+
</a>
55+
{{/each}}
56+
</div>
57+
{{/ui-accordion}}
58+
</div>
59+
<div class="item">
60+
{{#ui-accordion}}
61+
<span class="title">
62+
<i class="dropdown icon"></i>
63+
{{t 'Date'}}
64+
</span>
65+
<div class="content menu">
66+
{{#each dateRanges as |dateRange|}}
67+
<a href="#" class="link item {{if (eq dateType dateRange.key) 'active'}}" {{action 'selectDateFilter'
68+
dateRange.key}}>
69+
{{dateRange.name}}
70+
{{#if (and (eq dateRange.key 'custom_dates') (eq dateType 'custom_dates'))}}
71+
<div class="explore sub menu">
72+
<div class="ui form">
73+
<div class="grouped fields">
74+
<div class="item field">
75+
<label class="required" for="start_date">{{t 'Starts'}}</label>
76+
{{widgets/forms/date-picker type='text'
77+
value=customStartDate
78+
rangePosition='start'
79+
onChange=(action 'dateValidate')
80+
}}
81+
</div>
82+
<div class="item field">
83+
<label class="required" for="end_date">{{t 'Ends'}}</label>
84+
{{widgets/forms/date-picker type='text'
85+
value=customEndDate
86+
rangePosition='end'
87+
onChange=(action 'onDateChange')
88+
}}
89+
</div>
8890
</div>
8991
</div>
9092
</div>
91-
</div>
92-
{{/if}}
93-
</a>
94-
{{/each}}
95-
</div>
96-
{{/ui-accordion}}
97-
</div>
93+
{{/if}}
94+
</a>
95+
{{/each}}
96+
</div>
97+
{{/ui-accordion}}
98+
</div>
99+
{{/if}}
98100
<div class="item">
99101
<button class="ui red button {{if hideClearFilters 'disabled'}}" {{action 'clearFilters'}}>{{t 'Clear Filters'}}</button>
102+
{{#if device.isMobile}}
103+
<button class="ui blue button" {{action 'toggleFilters'}}>{{if showFiltersOnMobile 'Hide Filters' 'Show Filters'}}</button>
104+
{{/if}}
100105
</div>

0 commit comments

Comments
 (0)