Fix for Bug 1211210 in the ui where the tile list for builder images …

…don't clear correctly in some situations.

Remove animation transition css from _core, import new _component-animations and scope rule to .show-hide class

assets/app/styles/_component-animations.less

@@ -0,0 +1,22 @@
+//
+// Component animations
+// --------------------------------------------------
+.show-hide.fade {
+  opacity: 0;
+  .transition(opacity 0.2s ease 0s);
+  &.in {
+    opacity: 1;
+  }
+}
+.collapse {
+  display: none;
+  &.in {
+    display: block;
+  }
+}
+.collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  .transition(height .10s ease);
+}

assets/app/styles/_core.less

@@ -342,37 +342,4 @@ select:invalid {
 }
 .input-number {
   width: 60px;
-}
-
-
-//
-// Component animations
-// --------------------------------------------------
-.fade {
-  opacity: 0;
-  .transition(opacity 0.2s ease 0s);
-  &.in {
-    opacity: 1;
-  }
-}
-.modal-backdrop {
-  &.fade {
-    transition: opacity 0.15s linear 0s;  
-
-    &.in {
-      opacity: 0.5;
-    }
-  }
-}
-.collapse {
-  display: none;
-  &.in {
-    display: block;
-  }
-}
-.collapsing {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-  .transition(height .10s ease);
-}
+}

assets/app/styles/_tile.less

@@ -20,7 +20,7 @@
     .box-sizing(border-box);
     .tile-table-cell {
       display: table-cell;
-      vertical-align: middle;
+      vertical-align: top;
       &:first-child {
         width:55px;
       }

assets/app/styles/main.less

@@ -55,13 +55,14 @@
 ------------------------------------------------- */
 @import "_variables.less";
 @import "_mixins.less";
+@import "_buttons.less";
+@import "_component-animations.less";
+@import "_core.less";
 @import "_flexbox.less";
-@import "_openshift-logos-icon.less";
-@import "_openshift-icon.less";
-@import "_tile.less";
 @import "_messages.less";
-@import "_buttons.less";
+@import "_openshift-icon.less";
+@import "_openshift-logos-icon.less";
 @import "_pods.less";
 @import "_responsive-utilities.less";
 @import "_sidebar.less";
-@import "_core.less";
+@import "_tile.less";

assets/app/views/catalog/images.html

@@ -14,7 +14,8 @@ <h1>Select a builder image</h1>
       <div ng-if="!builders.length">There are no builder images to select from.  To add a builder to your project run <code>osc create -f &lt;image_repository_file&gt; -n {{projectName}}</code></div>
       <div ng-if="builders.length">
         <div class="row">
-          <catalog-image image-repo="builder.imageRepo" image-tag="builder.imageRepoTag" project="projectName" source-url="sourceURL" ng-repeat="builder in builders | orderBy : 'name'"></catalog-image>
+          <catalog-image image-repo="builder.imageRepo" image-tag="builder.imageRepoTag" project="projectName" source-url="sourceURL" ng-repeat-start="builder in builders | orderBy : 'name'"></catalog-image>
+          <div ng-repeat-end ng-if="($index % 3) == 2" class="clearfix"></div>
         </div>
       </div>
       <div click-to-reveal link-text="Don't see the image you are looking for?">
@@ -26,7 +27,8 @@ <h2>
           </span>
         </h2>
         <div class="row">
-          <catalog-image image-repo="image.imageRepo" image-tag="image.imageRepoTag" project="projectName" source-url="sourceURL" ng-repeat="image in images | orderBy : 'name'"></catalog-image>
+          <catalog-image image-repo="image.imageRepo" image-tag="image.imageRepoTag" project="projectName" source-url="sourceURL" ng-repeat-start="image in images | orderBy : 'name'"></catalog-image>
+          <div ng-repeat-end ng-if="($index % 3) == 2" class="clearfix"></div>
         </div>
       </div>      
     </div>

assets/app/views/catalog/templates.html

@@ -14,7 +14,8 @@ <h1>Select a template</h1>
       <div ng-if="!templates.length">There are no templates to select from.  To add a template to your project run <code>osc create -f &lt;template_file&gt; -n {{projectName}}</code></div>
       <div ng-if="templates.length">
         <div class="row">
-          <catalog-template template="template" project="projectName" ng-repeat="template in templates | orderBy : 'metadata.name'"></catalog-template>
+          <catalog-template template="template" project="projectName" ng-repeat-start="template in templates | orderBy : 'metadata.name'"></catalog-template>
+          <div ng-repeat-end ng-if="($index % 3) == 2" class="clearfix"></div>
         </div>
       </div>
     </div>