fix(Catalog tiles): decrease the vertical spacing between catalog til…

…es (patternfly#669) affects: patternfly3-react-lerna-root, patternfly-react-extensions ISSUES CLOSED: patternfly#668
redallen · Sep 27, 2018 · d78e2e7 · d78e2e7
1 parent 47e61db
commit d78e2e7
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 12 deletions.
diff --git a/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less b/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   height: @catalog-tile-pf-height;
-  margin: 0 20px @catalog-tile-pf-margin-bottom 0;
+  margin: 0 15px @catalog-tile-pf-margin-bottom 0;
   padding: 15px;
   width: @catalog-tile-pf-width;
 
@@ -70,11 +70,11 @@
 }
 
 .catalog-tile-view-pf-category {
-  margin: 10px 0;
+  margin: 10px 0 15px;
 }
 
 .catalog-tile-view-pf-category-header {
-  padding-right: 20px;
+  padding-right: 15px;
 }
 
 .catalog-tile-view-pf-category-header-title {

diff --git a/packages/patternfly-3/patternfly-react-extensions/less/variables.less b/packages/patternfly-3/patternfly-react-extensions/less/variables.less
@@ -1,6 +1,6 @@
 @catalog-tile-pf-height:                230px;
 @catalog-tile-pf-width:                 220px;
-@catalog-tile-pf-margin-bottom:         20px;
+@catalog-tile-pf-margin-bottom:         15px;
 @catalog-tile-pf-total-height:          ~"calc(@{catalog-tile-pf-height} + @{catalog-tile-pf-margin-bottom} - 2px)";
 @vertical-tab-pf-color:                 initial;
 @vertical-tab-pf-active-color:          @color-pf-blue-400;
diff --git a/...ternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss b/...ternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   height: $catalog-tile-pf-height;
-  margin: 0 20px $catalog-tile-pf-margin-bottom 0;
+  margin: 0 15px $catalog-tile-pf-margin-bottom 0;
   padding: 15px;
   width: $catalog-tile-pf-width;
 
@@ -41,8 +41,8 @@
     font-size: 16px;
     padding-left: 5px;
 
-    > .fa,
-    > .pficon {
+    >.fa,
+    >.pficon {
       vertical-align: top;
     }
   }
@@ -70,11 +70,11 @@
 }
 
 .catalog-tile-view-pf-category {
-  margin: 10px 0;
+  margin: 10px 0 15px;
 }
 
 .catalog-tile-view-pf-category-header {
-  padding-right: 20px;
+  padding-right: 15px;
 }
 
 .catalog-tile-view-pf-category-header-title {

diff --git a/...patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_variables.scss b/...patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_variables.scss
@@ -1,6 +1,6 @@
 $catalog-tile-pf-height:                230px;
 $catalog-tile-pf-width:                 220px;
-$catalog-tile-pf-margin-bottom:         20px;
+$catalog-tile-pf-margin-bottom:         15px;
 $catalog-tile-pf-total-height:          calc(#{$catalog-tile-pf-height} + #{$catalog-tile-pf-margin-bottom} - 2px);
 $vertical-tab-pf-color:                 initial;
 $vertical-tab-pf-active-color:          $color-pf-blue-400;
diff --git a/...y-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js b/...y-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js
@@ -36,8 +36,8 @@ class CatalogTileViewCategory extends React.Component {
         rows = 2;
       }
 
-      const numShown = Math.floor(this.categoryContainer.clientWidth / 240) * rows;
-      const rightSpacerWidth = this.categoryContainer.clientWidth % 240;
+      const numShown = Math.floor(this.categoryContainer.clientWidth / 235) * rows;
+      const rightSpacerWidth = this.categoryContainer.clientWidth % 235;
       this.setState({ numShown, rightSpacerWidth });
     }
   };