Incorporation of UI animation effects for deployment transitions on overview.

The row-expanded-top contains the overview-pod-template and animation-block, which will contain
metrics if active, and the overview-deployment-donut. During deployment the previous and current
deployment donut charts are grouped and either slideIn from the left or slideDown at mobile widths.
At >992 because of space constraints the pod-template and metrics fade out and hidden to allow
for both donuts and arrow, and fade in when complete. As the previous-donut scales down and removed
it fades out.

- Markup structure is controlled by flexbox and 50% widths
- Metrics are only beneath a tab when >480
- Networking and builds sections using col-md-6 to match 50% widths above

Author: sg00dwin

app/styles/_overview.less

@@ -141,24 +141,47 @@
   .data-toolbar-label {
     margin-right: 7px;
   }
-  // TODO: improve on this as it's pretty hacky
-  .deployment-connector-arrow {
-    display: inline-block;
-    font-size: 300%;
-    line-height: 1;
-    margin: 50px 0 0 10px;
-    text-align: center;
-    .text-muted();
-    @media (max-width: @screen-xs-max) {
-      margin: -3px auto 0 -4px;
-      transform: rotate(90deg);
-      width: 100%
+  .deployment-connector {
+    align-items: flex-end;
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: center;
+    @media (min-width: @screen-sm-min) {
+      align-items: center;
+      justify-content: flex-end;
+    }
+    .deployment-connector-arrow {
+      align-items: center;
+      display: flex;
+      font-size: 300%;
+      .text-muted();
+      &:before {
+        content: '\2192';
+        // center arrow
+        margin-top: -8px;
+        padding-right: 0;
+      }
+      @media (max-width: @screen-xs-max) {
+        &:before {
+          content: '\2191';
+          // center arrow when donuts stacked
+          margin-top: -20px;
+          padding-right: 23px;
+        }
+      }
     }
   }
   .expanded-section {
     margin-top: 20px;
     > .row > [class^=col-] {
       margin-bottom: 10px;
+      @media (min-width: @screen-lg-min) {
+        // aligns 2nd columns with metrics
+        &.overview-builds-msg,
+        &.overview-routes {
+          padding-left: 0;
+        }
+      }
     }
     h3 {
       line-height: 1.4;
@@ -201,6 +224,7 @@
     min-width: 19px;
   }
   .list-pf-details {
+    .fade-in();
     @media (min-width: @screen-sm-min) {
       justify-content: flex-end;
     }
@@ -225,6 +249,7 @@
     }
     .list-pf-container {
       display: block; // so that .word-break() will work in IE
+      overflow: hidden; // so animation offsets are hidden
     }
     .pod-donut {
       .text-center();
@@ -320,7 +345,7 @@
       max-width: 80px;
     }
     .usage-label {
-      // Make sure the labels align with the bottom of the chart.
+    // Make sure the labels align with the bottom of the chart.
       line-height: 1;
       margin-bottom: -1px;
     }
@@ -346,7 +371,7 @@
     margin: 0 20px 10px;
   }
   overview-list-row + overview-list-row .list-pf-item.active {
-    // avoid double borders when list-pf-item is open
+  // avoid double borders when list-pf-item is open
     margin-top: -1px;
   }
   .overview-route {
@@ -396,7 +421,145 @@
       margin-top: 10px;
     }
   }
-}
+
+  // Deployment animations
+  @keyframes deploymentSlideDown {
+    0% {
+      // align previous and latest donut start position
+      transform: translateY(-220px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes deploymentSlideIn {
+    0% {
+      // align previous and latest donut start position
+      transform: translateX(240px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  .row-expanded-top {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    @media (min-width: @screen-lg-min) {
+      // width needed to enable flex to trigger word-break on content
+      .overview-pod-template,
+      .overview-animation-block {
+        width: 50%;
+      }
+    }
+    .overview-pod-template {
+      flex: 1 1 auto;
+      .pod-template-block {
+        // add space so text can't touch metrics or doughnut
+        padding-right: 10px;
+        &.ng-leave-prepare {
+          // prevent previous-donut initial "flash" before animation
+          display: none;
+        }
+      }
+    }
+    .overview-animation-block {
+      display: flex;
+      flex: 1 1 auto;
+      justify-content: center;
+      @media (min-width: @screen-sm-min) {
+        &.animation-in-progress .overview-deployment-donut .latest-donut {
+          justify-content: flex-end;
+        }
+      }
+      .overview-deployment-donut {
+        @media (min-width: @screen-sm-min) {
+          display: flex;
+          flex: 1 1 0%;
+          // prevents resize jump; set height since the donut isn't displayed exactly when expanded-section is rendered
+          height: 150px;
+          max-width: 450px;
+        }
+        &.ng-enter {
+          animation: deploymentSlideIn 750ms ease forwards;
+        }
+        &.stacked-template {
+          .overview-pod-template {
+            min-width: 100%;
+          }
+          @media (max-width: @screen-xs-max) {
+            display: flex;
+            // stack latest deployment-donut above previous-donut
+            flex-direction: column-reverse;
+            &.ng-enter {
+              animation: deploymentSlideDown 750ms ease forwards;
+            }
+          }
+        }
+        .previous-donut {
+          display: flex;
+          flex: 1 1 auto;
+          .fade-out();
+          &.ng-enter-prepare {
+            // prevent previous-donut initial "flash" before animation
+            display: none;
+          }
+          @media (max-width: @screen-xs-max) {
+            flex-direction: column;
+            deployment-donut {
+              // move arrow to point at latest deployment-donut
+              order: 2;
+            }
+          }
+        }
+        .latest-donut {
+          display: flex;
+          flex: 1 1 auto;
+          // right align donut
+          justify-content: flex-end;
+        }
+      }
+    }
+    &.metrics-active {
+      @media (max-width: @screen-md-max) {
+        flex-direction: column;
+        .overview-pod-template {
+          min-width: 100%;
+          order: 3;
+        }
+      }
+      .overview-animation-block {
+        @media (min-width: @screen-xs-min) and (max-width: @screen-md-max) {
+          // add spacing when pod-template-block is stacked beneath
+          padding-bottom: 20px;
+          justify-content: space-between;
+          &.animation-in-progress {
+            justify-content: center;
+          }
+        }
+      }
+      .overview-metrics {
+        display:none;
+        // display metrics beside donut
+        @media (min-width: @screen-xs-min) {
+          display:block;
+          .fade-in();
+          .fade-out();
+          width: 50%;
+        }
+      }
+    }
+    &.metrics-not-active {
+      .overview-pod-template {
+        // prevent wrapping of flex containers
+        width: 50%;
+      }
+    }
+  }
+
+} // end overview-new
 
 .overview {
   font-weight: @overview-font-weight;

app/views/_pod-template.html

@@ -56,7 +56,7 @@
           <div class="icon-wrap">
             <span class="fa fa-code" aria-hidden="true"></span>
           </div>
-          <div flex>
+          <div flex class="word-break">
             <span class="pod-template-key">Source:</span>
             <span ng-switch="build.spec.source.type">
               <span ng-switch-when="Git">

app/views/overview/_builds.html

@@ -1,12 +1,12 @@
 <div ng-if="overviewBuilds.buildConfigs.length" class="expanded-section">
   <div class="section-title hidden-xs">Builds</div>
   <div ng-repeat="buildConfig in overviewBuilds.buildConfigs track by (buildConfig | uid)" class="row">
-    <div class="col-sm-5">
+    <div class="col-sm-5 col-md-6">
       <h3 class="mar-top-xs">
         <a ng-href="{{buildConfig | navigateResourceURL}}">{{buildConfig.metadata.name}}</a>
       </h3>
     </div>
-    <div class="col-sm-7">
+    <div class="col-sm-7 col-md-6 overview-builds-msg">
       <div ng-if="!(overviewBuilds.recentBuildsByBuildConfig[buildConfig.metadata.name] | hashSize)">
         No builds.
       </div>