Skip to content

Commit b765c69

Browse files
dtaylor113dtaylor113
authored
Merge pull request #4 from jeff-phillips-18/dtaylor113-pfFilterPanel-responsiveness
Less/HTML simplifications
2 parents af88166 + 2cde205 commit b765c69

File tree

7 files changed

+150
-219
lines changed

7 files changed

+150
-219
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 class="clear-filters"><a href="javascript:void(0);" 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: 39 additions & 113 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,120 +54,56 @@ pf-filter-panel {
6454
}
6555
}
6656
}
67-
.list-inline > li {
68-
padding-right: 0;
69-
padding-left: 0;
70-
padding-bottom: 6px;
71-
margin-right: 4px;
72-
:last-child {
73-
margin-right: 0px;
74-
}
75-
@media (min-width: @screen-md-min) {
76-
padding-bottom: 2px;
77-
padding-left: 5px;
78-
margin-right: 0;
79-
}
80-
}
81-
.toolbar-pf-results {
82-
border-top: none;
83-
margin-left: 10px;
84-
vertical-align: middle;
85-
.single-label {
86-
padding: 6px;
87-
padding-bottom: 6px;
88-
@media (min-width: @screen-md-min) {
89-
padding-bottom: 8px;
90-
}
91-
.pf-filter-label-category {
92-
background-color: @color-pf-blue-500;
93-
font-weight: 700;
94-
padding-right: 2px;
95-
padding-left: 0;
96-
padding-bottom: 6px;
97-
}
98-
.pficon-close {
99-
padding-right: 6px;
100-
}
101-
}
102-
.clear-filters {
103-
margin-top: -10px;
104-
@media (min-width: @screen-md-min) {
105-
margin-top: 0px;
106-
}
107-
}
108-
p {
109-
display: block;
110-
padding-right: 10px;
111-
padding-left: 0px;
112-
@media (min-width: @screen-md-min) {
113-
display: inline-block;
114-
padding-left: 10px;
115-
}
116-
}
117-
}
11857
}
11958

120-
.pf-filter-label-category {
121-
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 {
12268
font-weight: 700;
123-
padding: 6px;
124-
padding-bottom: 6px;
125-
margin-right: 6px;
126-
@media (min-width: @screen-md-min) {
127-
margin-right: 2px;
128-
padding-bottom: 8px;
69+
padding: 5px 0 6px 5px;
70+
margin-right: 5px;
71+
72+
&.multiples {
73+
background-color: @color-pf-blue-300;
74+
padding-right: 5px;
12975
}
130-
.category-values {
131-
padding-left: 4px;
76+
}
77+
78+
.filter-pf-category-values.list-inline {
79+
margin-left: 0;
80+
> li {
81+
margin-left: 5px;
82+
padding: 0;
13283
}
13384
}
13485

86+
13587
.filter-pf {
13688
&.inline-filter-pf {
137-
flex: 1 1 100%;
138-
margin: 15px 15px 7px 0;
139-
14089
pf-filter-fields,
141-
pf-filter-results {
90+
pf-filter-results,
91+
pf-filter-panel-results {
14292
display: inline-block;
14393
}
144-
145-
.form-group {
146-
margin-bottom: 0;
147-
margin-right: 15px;
94+
pf-filter-fields {
95+
vertical-align: middle;
14896
}
14997

150-
.toolbar-pf-results {
151-
border-top: none;
152-
margin: 0;
153-
154-
.col-sm-12 {
155-
float: left;
156-
padding: 0;
157-
}
158-
159-
h5,
160-
p,
161-
ul {
162-
line-height: 1.43;
163-
padding-bottom: 6px;
164-
padding-top: 6px;
165-
}
166-
167-
.list-inline {
168-
margin-bottom: -5px;
169-
padding-right: 5px;
170-
171-
> li {
172-
margin-bottom: 5px;
173-
}
98+
.filter-fields {
99+
> .form-group {
100+
margin-bottom: 3px;
101+
margin-right: 15px;
174102
}
175103
}
176-
}
177-
178-
.toolbar-pf-results {
179-
.list-inline {
180-
margin-left: 0;
104+
.toolbar-pf-results {
105+
border-top: none;
106+
margin-top: 0;
181107
}
182108
}
183109
}

0 commit comments

Comments
 (0)