fix(pfFilterPanel): Updated filter results at mobile

Author: dtaylor113

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

@@ -24,6 +24,6 @@ <h5>
         </span>
       </li>
     </ul>
-    <p><a class="clear-filters" ng-click="$ctrl.clearAllFilters()" ng-if="$ctrl.config.appliedFilters.length > 0">Clear All Filters</a></p>
+    <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>
   </span>
 </span>

src/filters/filters.less

@@ -66,26 +66,53 @@ pf-filter-panel {
   }
   .list-inline > li {
     padding-right: 0;
+    padding-left: 0;
+    padding-bottom: 6px;
+    margin-right: 4px;
+    :last-child {
+      margin-right: 0px;
+    }
+    @media (min-width: @screen-md-min) {
+      padding-bottom: 2px;
+      padding-left: 5px;
+      margin-right: 0;
+    }
   }
   .toolbar-pf-results {
     border-top: none;
     margin-left: 10px;
     vertical-align: middle;
     .single-label {
       padding: 6px;
+      padding-bottom: 6px;
+      @media (min-width: @screen-md-min) {
+        padding-bottom: 8px;
+      }
       .pf-filter-label-category {
         background-color: @color-pf-blue-500;
         font-weight: 700;
         padding-right: 2px;
         padding-left: 0;
+        padding-bottom: 6px;
       }
       .pficon-close {
         padding-right: 6px;
       }
     }
+    .clear-filters {
+      margin-top: -10px;
+      @media (min-width: @screen-md-min) {
+        margin-top: 0px;
+      }
+    }
     p {
+      display: block;
       padding-right: 10px;
-      padding-left: 10px;
+      padding-left: 0px;
+      @media (min-width: @screen-md-min) {
+        display: inline-block;
+        padding-left: 10px;
+      }
     }
   }
 }
@@ -94,6 +121,12 @@ pf-filter-panel {
   background-color: @color-pf-blue-300;
   font-weight: 700;
   padding: 6px;
+  padding-bottom: 6px;
+  margin-right: 6px;
+  @media (min-width: @screen-md-min) {
+    margin-right: 2px;
+    padding-bottom: 8px;
+  }
   .category-values {
     padding-left: 4px;
   }

styles/angular-patternfly.less

@@ -1,4 +1,5 @@
 @import "../node_modules/patternfly/dist/less/color-variables.less";
+@import "../node_modules/bootstrap/less/variables.less";
 @import "misc.less";
 @import "../src/card/card.less";
 @import "../src/charts/charts.less";

test/filters/filter-panel.spec.js

@@ -152,7 +152,7 @@ describe('Directive:  pfFilterPanel', function () {
     expect(tagOne).toContain("Value 2");
     expect(tagOne).not.toContain("Value 3");
 
-    var clearAll = element.find('.clear-filters');
+    var clearAll = element.find('.clear-filters a');
     expect(clearAll.length).toBe(1);
     eventFire(clearAll[0], 'click');
     $scope.$digest();