Merge pull request #519 from spadgett/checkbox-styles

Fix checkbox filter spacing
openshift · Oct 20, 2017 · a22fd27 · a22fd27
2 parents b53588a + 636bc75
commit a22fd27
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 8 deletions.
diff --git a/dist/less/services-view.less b/dist/less/services-view.less
@@ -144,6 +144,10 @@ services-view,
   .services-items-filter {
     flex: 1 1 100%;
     margin: (@grid-gutter-width / 2) (@grid-gutter-width / 2) (@grid-gutter-width / 4);
+    div.checkbox {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
   }
 
   @media(min-width: @screen-xs-min) {

diff --git a/dist/origin-web-catalogs.css b/dist/origin-web-catalogs.css
diff --git a/dist/origin-web-catalogs.js b/dist/origin-web-catalogs.js
@@ -953,7 +953,7 @@ webpackJsonp([ 0, 1 ], [ function(e, t) {
     }();
     i.$inject = [ "$rootScope" ], t.RecentlyViewedServiceItems = i;
 }, function(e, t) {
-    e.exports = '<pf-filter-panel config="$ctrl.config">\n  <div class="filter-panel-container">\n    <input type="text" ng-model="$ctrl.keywordFilter.value"\n           class="keyword-filter"\n           placeholder="{{$ctrl.keywordFilter.placeholder}}"\n           ng-keypress="$ctrl.onKeywordKeyPress($event)"\n           autocorrect="off"\n           autocapitalize="none"\n           spellcheck="false">\n    <div class="category" ng-repeat="filter in $ctrl.filterPanelModel" ng-if="!$first">\n      {{filter.title}}\n      <span\n        class="pficon pficon-info vendor-info-icon"\n        data-toggle="tooltip"\n        aria-hidden="true"\n        data-original-title="This filter will only apply to items which contain publisher information. Items that do not have a publisher will not be shown in the filter results.">\n      </span>\n      <ul>\n        <li ng-repeat="value in filter.values">\n          <label>\n            <input type="checkbox"\n                   ng-model="value.selected"\n                   ng-change="$ctrl.filterChanged()">\n            <span class="category-option-label">{{value.title}}</span>\n          </label>\n        </li>\n      </ul>\n    </div>\n  </div>\n</pf-filter-panel>\n';
+    e.exports = '<pf-filter-panel config="$ctrl.config">\n  <div class="filter-panel-container">\n    <input type="text" ng-model="$ctrl.keywordFilter.value"\n           class="keyword-filter"\n           placeholder="{{$ctrl.keywordFilter.placeholder}}"\n           ng-keypress="$ctrl.onKeywordKeyPress($event)"\n           autocorrect="off"\n           autocapitalize="none"\n           spellcheck="false">\n    <div class="category" ng-repeat="filter in $ctrl.filterPanelModel" ng-if="!$first">\n      {{filter.title}}\n      <span\n        class="pficon pficon-info vendor-info-icon"\n        data-toggle="tooltip"\n        aria-hidden="true"\n        data-original-title="This filter will only apply to items which contain publisher information. Items that do not have a publisher will not be shown in the filter results.">\n      </span>\n      <ul>\n        <li ng-repeat="value in filter.values">\n          <div class="checkbox">\n            <label class="category-option-label">\n              <input type="checkbox"\n                     ng-model="value.selected"\n                     ng-change="$ctrl.filterChanged()">\n              {{value.title}}\n            </label>\n          </div>\n        </li>\n      </ul>\n    </div>\n  </div>\n</pf-filter-panel>\n';
 }, function(e, t) {
     e.exports = '\x3c!-- Use angular-schema-form to show a form based on the parameter JSON schema. --\x3e\n<ng-form class="catalog-parameters" ng-class="{\'readonly\': $ctrl.readOnly}"\n  sf-model="$ctrl.hideValues ? $ctrl.hiddenModel : $ctrl.model"\n  sf-form="$ctrl.parameterForm"\n  sf-schema="$ctrl.readOnly ? $ctrl.readonlyParameterSchema : $ctrl.parameterSchema"\n  sf-options="$ctrl.parameterFormDefaults">\n</ng-form>\n';
 }, function(e, t) {

diff --git a/src/components/catalog-filter/catalog-filter.html b/src/components/catalog-filter/catalog-filter.html
@@ -17,12 +17,14 @@
       </span>
       <ul>
         <li ng-repeat="value in filter.values">
-          <label>
-            <input type="checkbox"
-                   ng-model="value.selected"
-                   ng-change="$ctrl.filterChanged()">
-            <span class="category-option-label">{{value.title}}</span>
-          </label>
+          <div class="checkbox">
+            <label class="category-option-label">
+              <input type="checkbox"
+                     ng-model="value.selected"
+                     ng-change="$ctrl.filterChanged()">
+              {{value.title}}
+            </label>
+          </div>
         </li>
       </ul>
     </div>

diff --git a/src/styles/services-view.less b/src/styles/services-view.less
@@ -144,6 +144,10 @@ services-view,
   .services-items-filter {
     flex: 1 1 100%;
     margin: (@grid-gutter-width / 2) (@grid-gutter-width / 2) (@grid-gutter-width / 4);
+    div.checkbox {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
   }
 
   @media(min-width: @screen-xs-min) {

diff --git a/test/services-view.spec.ts b/test/services-view.spec.ts
@@ -438,6 +438,6 @@ describe('servicesView', () => {
 
     var vendorFilters = jQuery(element).find('.category-option-label');
     expect(vendorFilters.length).toBe(4);
-    expect(jQuery(vendorFilters[2]).text()).toBe('Vendor B, Inc.');
+    expect(jQuery(vendorFilters[2]).text().trim()).toBe('Vendor B, Inc.');
   });
 });