Skip to content

Commit e88e685

Browse files
jeff-phillips-18jeff-phillips-18
authored
Merge pull request #674 from dtaylor113/pfFilterPanel-responsiveness
fix(pfFilterPanel): Updated filter results at mobile
2 parents 8a0a5f4 + b765c69 commit e88e685

File tree

8 files changed

+152
-187
lines changed

8 files changed

+152
-187
lines changed

‎src/filters/examples/filter-panel.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,24 +59,24 @@
5959
<div class="col-md-12">
6060
<div class="col-md-12 cfme-row-column">
6161
<div class="row">
62-
<div class="col-md-2"><b>ID</b></div>
63-
<div class="col-md-2"><b>Keyword</b></div>
64-
<div class="col-md-4"><b>Category One</b></div>
65-
<div class="col-md-4"><b>Category Two</b></div>
62+
<div class="col-xs-3 col-md-2"><b>ID</b></div>
63+
<div class="col-xs-3 col-md-2"><b>Keyword</b></div>
64+
<div class="col-xs-3 col-md-4"><b>Category One</b></div>
65+
<div class="col-sx-3 col-md-4"><b>Category Two</b></div>
6666
</div>
6767
</div>
6868
<div ng-repeat="item in items" class="col-md-12 cfme-row-column">
6969
<div class="row">
70-
<div class="col-md-2">
70+
<div class="col-xs-3 col-md-2">
7171
<span>{{item.id}}</span>
7272
</div>
73-
<div class="col-md-2">
73+
<div class="col-xs-3 col-md-2">
7474
<span>{{item.keyword}}</span>
7575
</div>
76-
<div class="col-md-4">
76+
<div class="col-xs-3 col-md-4">
7777
<span>{{item.categoryOne}}</span>
7878
</div>
79-
<div class="col-md-4">
79+
<div class="col-xs-3 col-md-4">
8080
<span>{{item.categoryTwo}}</span>
8181
</div>
8282
</div>

‎src/filters/examples/filter.js‎

Lines changed: 55 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -34,57 +34,67 @@
3434
* @example
3535
<example module="patternfly.filters">
3636
<file name="index.html">
37-
<div ng-controller="ViewCtrl" class="row example-container">
38-
<div class="col-md-12">
39-
<pf-filter id="exampleFilter" config="filterConfig"></pf-filter>
40-
</div>
41-
<hr class="col-md-12">
42-
</br></br>
43-
<div class="col-sm-4">
44-
<form role="form">
45-
<div class="form-group">
46-
<label class="checkbox-inline">
47-
<input type="checkbox" ng-model="filterConfig.inlineResults">Inline results</input>
48-
</label>
49-
</div>
50-
</form>
51-
</div>
52-
<div class="col-sm-4">
53-
<form role="form">
54-
<div class="form-group">
55-
<label class="checkbox-inline">
56-
<input type="checkbox" ng-model="filterConfig.showTotalCountResults">Show total count in results</input>
57-
</label>
58-
</div>
59-
</form>
60-
</div>
61-
<hr class="col-md-12">
62-
<div class="col-md-12">
63-
<label class="events-label">Valid Items: </label>
37+
<div ng-controller="ViewCtrl" class="example-container">
38+
<div class="row">
39+
<div class="col-sm-12">
40+
<pf-filter id="exampleFilter" config="filterConfig"></pf-filter>
41+
</div>
6442
</div>
65-
<div class="col-md-12">
66-
<div ng-repeat="item in items" class="col-md-12 cfme-row-column">
67-
<div class="row">
68-
<div class="col-md-3">
69-
<span>{{item.name}}</span>
70-
</div>
71-
<div class="col-md-7">
72-
<span>{{item.address}}</span>
73-
</div>
74-
<div class="col-md-2">
75-
<span>{{item.birthMonth}}</span>
43+
<div class="row">
44+
<div class="col-xs-12">
45+
<hr>
46+
</div>
47+
<div class="col-xs-4">
48+
<form role="form">
49+
<div class="form-group">
50+
<label class="checkbox-inline">
51+
<input type="checkbox" ng-model="filterConfig.inlineResults">Inline results</input>
52+
</label>
7653
</div>
77-
<div class="col-md-4">
78-
<span>{{item.car}}</span>
54+
</form>
55+
</div>
56+
<div class="col-xs-8">
57+
<form role="form">
58+
<div class="form-group">
59+
<label class="checkbox-inline">
60+
<input type="checkbox" ng-model="filterConfig.showTotalCountResults">Show total count in results</input>
61+
</label>
7962
</div>
80-
</div>
63+
</form>
64+
</div>
65+
</div>
66+
<div class="row">
67+
<div class="col-xs-12">
68+
<hr>
69+
</div>
70+
<div class="col-sm-12">
71+
<label class="events-label">Valid Items: </label>
8172
</div>
8273
</div>
83-
<div class="col-md-12">
84-
<label class="events-label">Current Filters: </label>
74+
<div ng-repeat="item in items" class="row">
75+
<div class="col-xs-6 col-sm-3">
76+
<span>{{item.name}}</span>
77+
</div>
78+
<div class="col-xs-6 col-sm-4">
79+
<span>{{item.address}}</span>
80+
</div>
81+
<div class="hidden-xs col-sm-2">
82+
<span>{{item.birthMonth}}</span>
83+
</div>
84+
<div class="hidden-xs col-sm-3">
85+
<span>{{item.car}}</span>
86+
</div>
8587
</div>
86-
<div class="col-md-12">
87-
<textarea rows="5" class="col-md-12">{{filtersText}}</textarea>
88+
<div class="row">
89+
<div class="col-xs-12">
90+
<hr>
91+
</div>
92+
<div class="col-xs-12">
93+
<label class="events-label">Current Filters: </label>
94+
</div>
95+
<div class="col-xs-12">
96+
<textarea class="col-xs-12" rows="5">{{filtersText}}</textarea>
97+
</div>
8898
</div>
8999
</div>
90100
</file>

‎src/filters/filter-panel/filter-panel-results.html‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,25 @@
1-
<span class="filter-pf">
2-
<span class="toolbar-pf-results">
1+
<div class="filter-pf">
2+
<div class="toolbar-pf-results">
33
<h5>
44
{{$ctrl.config.resultsCount}}
55
<span ng-if="$ctrl.config.appliedFilters.length"> of {{$ctrl.config.totalCount}}</span>
66
{{$ctrl.config.resultsLabel === undefined ? "Results" : $ctrl.config.resultsLabel}}
77
</h5>
8-
<p ng-if="$ctrl.config.appliedFilters.length">Active filters:</p>
8+
<p class="filter-pf-active-label" ng-if="$ctrl.config.appliedFilters.length">Active filters:</p>
99
<ul class="list-inline">
10-
<li ng-repeat="filter in $ctrl.config.appliedFilters">
11-
<span ng-if="filter.values.length === 1" class="active-filter label label-info single-label">
12-
<span class="pf-filter-label-category">{{filter.title}}:</span> {{filter.values[0]}}
13-
<a><span ng-click="$ctrl.clearFilter(filter, filter.values[0])" class="pficon pficon-close"></span></a>
14-
</span>
15-
<span ng-if="filter.values.length > 1" class="active-filter label pf-filter-label-category">
16-
{{filter.title}}:
17-
<ul class="list-inline category-values">
18-
<li ng-repeat="value in filter.values">
19-
<span class="active-filter label label-info">{{value}}
20-
<a><span ng-click="$ctrl.clearFilter(filter, value)" class="pficon pficon-close"></span></a>
21-
</span>
22-
</li>
23-
</ul>
24-
</span>
10+
<li ng-repeat="filter in $ctrl.config.appliedFilters" class="filter-pf-category-item">
11+
<span class="label pf-filter-category-label" ng-class="{'label-info': filter.values.length === 1, 'multiples': filter.values.length > 1}">
12+
{{filter.title}}:
13+
<ul class="list-inline filter-pf-category-values">
14+
<li ng-repeat="value in filter.values">
15+
<span class="label label-info">{{value}}
16+
<a href="javascript:void(0);"><span ng-click="$ctrl.clearFilter(filter, value)" class="pficon pficon-close"></span></a>
17+
</span>
18+
</li>
19+
</ul>
20+
</span>
2521
</li>
2622
</ul>
27-
<p><a class="clear-filters" ng-click="$ctrl.clearAllFilters()" ng-if="$ctrl.config.appliedFilters.length > 0">Clear All Filters</a></p>
28-
</span>
29-
</span>
23+
<p><a href="javascript:void(0);" ng-click="$ctrl.clearAllFilters()" ng-if="$ctrl.config.appliedFilters.length > 0">Clear All Filters</a></p>
24+
</div>
25+
</div>

‎src/filters/filter-panel/filter-panel.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="filter-pf">
1+
<div class="filter-pf inline-filter-pf">
22
<span class="dropdown primary-action" uib-dropdown>
33
<button class="btn btn-default dropdown-toggle" uib-dropdown-toggle type="button">
44
Filter

‎src/filters/filters.less‎

Lines changed: 40 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,13 @@
11
.filter-pf {
2-
a {
3-
cursor: pointer;
4-
}
5-
.input-group {
6-
.input-group-btn {
7-
.dropdown-menu>.selected>a {
8-
background-color: @color-pf-blue !important;
9-
border-color: #0076b7 !important;
10-
color: @color-pf-white !important;
11-
}
12-
}
13-
}
14-
.category-select{
2+
.category-select {
153
display: flex;
164
}
17-
.category-select-value{
5+
.category-select-value {
186
border-left-width: 0 !important;
197
}
208
}
219
.filter-pf.filter-fields {
2210
.form-group {
23-
padding-left: 0;
2411
width: 275px;
2512
}
2613
}
@@ -45,6 +32,9 @@ pf-filter-panel {
4532
&:-ms-input-placeholder { font-style: italic; padding-left: 10px; } // Internet Explorer 10+
4633
&::-webkit-input-placeholder { font-style: italic; padding-left: 10px;} // Safari and Chrome
4734
}
35+
.inline-filter-pf > .dropdown {
36+
margin-right: 10px;
37+
}
4838
.filter-panel-container {
4939
padding: 10px;
5040
.keyword-filter {
@@ -64,87 +54,56 @@ pf-filter-panel {
6454
}
6555
}
6656
}
67-
.list-inline > li {
68-
padding-right: 0;
69-
}
70-
.toolbar-pf-results {
71-
border-top: none;
72-
margin-left: 10px;
73-
vertical-align: middle;
74-
.single-label {
75-
padding: 6px;
76-
.pf-filter-label-category {
77-
background-color: @color-pf-blue-500;
78-
font-weight: 700;
79-
padding-right: 2px;
80-
padding-left: 0;
81-
}
82-
.pficon-close {
83-
padding-right: 6px;
84-
}
85-
}
86-
p {
87-
padding-right: 10px;
88-
padding-left: 10px;
89-
}
90-
}
9157
}
9258

93-
.pf-filter-label-category {
94-
background-color: @color-pf-blue-300;
59+
.filter-pf-active-label {
60+
margin-right: 5px;
61+
}
62+
63+
.filter-pf-category-item {
64+
margin-bottom: 5px;
65+
}
66+
67+
.pf-filter-category-label {
9568
font-weight: 700;
96-
padding: 6px;
97-
.category-values {
98-
padding-left: 4px;
69+
padding: 5px 0 6px 5px;
70+
margin-right: 5px;
71+
72+
&.multiples {
73+
background-color: @color-pf-blue-300;
74+
padding-right: 5px;
75+
}
76+
}
77+
78+
.filter-pf-category-values.list-inline {
79+
margin-left: 0;
80+
> li {
81+
margin-left: 5px;
82+
padding: 0;
9983
}
10084
}
10185

86+
10287
.filter-pf {
10388
&.inline-filter-pf {
104-
flex: 1 1 100%;
105-
margin: 15px 15px 7px 0;
106-
10789
pf-filter-fields,
108-
pf-filter-results {
90+
pf-filter-results,
91+
pf-filter-panel-results {
10992
display: inline-block;
11093
}
111-
112-
.form-group {
113-
margin-bottom: 0;
114-
margin-right: 15px;
94+
pf-filter-fields {
95+
vertical-align: middle;
11596
}
11697

117-
.toolbar-pf-results {
118-
border-top: none;
119-
margin: 0;
120-
121-
.col-sm-12 {
122-
float: left;
123-
padding: 0;
124-
}
125-
126-
h5,
127-
p,
128-
ul {
129-
line-height: 1.43;
130-
padding-bottom: 6px;
131-
padding-top: 6px;
132-
}
133-
134-
.list-inline {
135-
margin-bottom: -5px;
136-
padding-right: 5px;
137-
138-
> li {
139-
margin-bottom: 5px;
140-
}
98+
.filter-fields {
99+
> .form-group {
100+
margin-bottom: 3px;
101+
margin-right: 15px;
141102
}
142103
}
143-
}
144-
145-
.toolbar-pf-results {
146-
.list-inline {
147-
margin-left: 0;
104+
.toolbar-pf-results {
105+
border-top: none;
106+
margin-top: 0;
148107
}
149108
}
150109
}

0 commit comments

Comments
 (0)