Addition of truncate class to tile headers and when no deployments have started.

Fixes #1175

Author: sg00dwin

app/styles/_overview.less

@@ -398,8 +398,10 @@
     .rc-header {
       .text-muted();
       padding: 5px 10px;
-      // Prevent the content from overlapping the deployment shield
-      margin-right: @shield-width-lg;
+      &.rc-header-shield {
+        // Prevent the content from overlapping the deployment shield
+        margin-right: @shield-width-lg;
+      }
     }
     image-names {
       // truncate long image names

app/views/overview/_dc.html

@@ -1,8 +1,8 @@
 <div class="overview-tile" ng-class="{ 'deployment-in-progress': inProgressDeployment }">
   <ng-include src="'views/overview/_service-header.html'"></ng-include>
   <div class="overview-tile-header">
-    <div class="rc-header">
-      <div>
+    <div class="rc-header" ng-class="{ 'rc-header-shield' : activeReplicationController}">
+      <div class="truncate">
         Deployment Config
         <a ng-href="{{deploymentConfig | navigateResourceURL}}">{{deploymentConfig.metadata.name}}</a>
         <small class="overview-timestamp" ng-if="activeReplicationController && !inProgressDeployment">
@@ -63,11 +63,8 @@ <h2>No deployments.</h2>
           </div>
         </div>
         <div ng-if="!pipelinesForDC[deploymentConfig.metadata.name].length">
-          <p>
             No deployments have started for
-            <a ng-href="{{deploymentConfig | navigateResourceURL}}">{{deploymentConfig.metadata.name}}</a>.
-          </p>
-
+            <div class="truncate mar-bottom-xl"><a ng-href="{{deploymentConfig | navigateResourceURL}}">{{deploymentConfig.metadata.name}}</a>.</div>
           <button ng-if="'deploymentconfigs' | canI : 'update'" class="btn btn-primary" ng-click="startDeployment(deploymentConfig)">
             Start Deployment
           </button>

app/views/overview/_deployment.html

@@ -2,7 +2,7 @@
   <ng-include src="'views/overview/_service-header.html'"></ng-include>
   <div class="overview-tile-header">
     <div class="rc-header">
-      <div>
+      <div class="truncate">
         Deployment
         <a ng-href="{{deployment | navigateResourceURL}}">{{deploymentName}}</a>
         <small class="overview-timestamp" ng-if="latestReplicaSet">

app/views/overview/_pod.html

@@ -1,7 +1,7 @@
 <div class="overview-tile" ng-if="pod.kind === 'Pod'">
   <ng-include src="'views/overview/_service-header.html'"></ng-include>
   <div class="rc-header"> <!-- TODO may want different treatment for a pod-name? -->
-    <div>
+    <div class="truncate">
       Pod
       <a ng-href="{{pod | navigateResourceURL}}">{{pod.metadata.name}}</a>
       <small class="overview-timestamp">

app/views/overview/_set.html

@@ -2,7 +2,7 @@
   <ng-include src="'views/overview/_service-header.html'"></ng-include>
   <div class="overview-tile-header">
     <div class="rc-header">
-      <div>
+      <div class="truncate">
         {{set.kind | humanizeKind : true}}
         <a ng-href="{{set | navigateResourceURL}}">{{set.metadata.name}}</a>
         <small class="overview-timestamp">

dist/scripts/templates.js

@@ -11297,8 +11297,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"overview-tile\" ng-class=\"{ 'deployment-in-progress': inProgressDeployment }\">\n" +
     "<ng-include src=\"'views/overview/_service-header.html'\"></ng-include>\n" +
     "<div class=\"overview-tile-header\">\n" +
-    "<div class=\"rc-header\">\n" +
-    "<div>\n" +
+    "<div class=\"rc-header\" ng-class=\"{ 'rc-header-shield' : activeReplicationController}\">\n" +
+    "<div class=\"truncate\">\n" +
     "Deployment Config\n" +
     "<a ng-href=\"{{deploymentConfig | navigateResourceURL}}\">{{deploymentConfig.metadata.name}}</a>\n" +
     "<small class=\"overview-timestamp\" ng-if=\"activeReplicationController && !inProgressDeployment\">\n" +
@@ -11356,10 +11356,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "<div ng-if=\"!pipelinesForDC[deploymentConfig.metadata.name].length\">\n" +
-    "<p>\n" +
     "No deployments have started for\n" +
-    "<a ng-href=\"{{deploymentConfig | navigateResourceURL}}\">{{deploymentConfig.metadata.name}}</a>.\n" +
-    "</p>\n" +
+    "<div class=\"truncate mar-bottom-xl\"><a ng-href=\"{{deploymentConfig | navigateResourceURL}}\">{{deploymentConfig.metadata.name}}</a>.</div>\n" +
     "<button ng-if=\"'deploymentconfigs' | canI : 'update'\" class=\"btn btn-primary\" ng-click=\"startDeployment(deploymentConfig)\">\n" +
     "Start Deployment\n" +
     "</button>\n" +
@@ -11429,7 +11427,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<ng-include src=\"'views/overview/_service-header.html'\"></ng-include>\n" +
     "<div class=\"overview-tile-header\">\n" +
     "<div class=\"rc-header\">\n" +
-    "<div>\n" +
+    "<div class=\"truncate\">\n" +
     "Deployment\n" +
     "<a ng-href=\"{{deployment | navigateResourceURL}}\">{{deploymentName}}</a>\n" +
     "<small class=\"overview-timestamp\" ng-if=\"latestReplicaSet\">\n" +
@@ -11499,7 +11497,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"overview-tile\" ng-if=\"pod.kind === 'Pod'\">\n" +
     "<ng-include src=\"'views/overview/_service-header.html'\"></ng-include>\n" +
     "<div class=\"rc-header\"> \n" +
-    "<div>\n" +
+    "<div class=\"truncate\">\n" +
     "Pod\n" +
     "<a ng-href=\"{{pod | navigateResourceURL}}\">{{pod.metadata.name}}</a>\n" +
     "<small class=\"overview-timestamp\">\n" +
@@ -11690,7 +11688,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<ng-include src=\"'views/overview/_service-header.html'\"></ng-include>\n" +
     "<div class=\"overview-tile-header\">\n" +
     "<div class=\"rc-header\">\n" +
-    "<div>\n" +
+    "<div class=\"truncate\">\n" +
     "{{set.kind | humanizeKind : true}}\n" +
     "<a ng-href=\"{{set | navigateResourceURL}}\">{{set.metadata.name}}</a>\n" +
     "<small class=\"overview-timestamp\">\n" +

dist/styles/main.css

@@ -4449,7 +4449,8 @@ ul.messenger-theme-flat .messenger-message.alert-info .messenger-message-inner:b
 .overview .service-title .service-name .pficon{margin-right:7px;vertical-align:-2px}
 .overview .overview-tile{border-left:1px solid #d6d6d6;width:100%}
 .overview .overview-tile .overview-tile-header{color:#9c9c9c;position:relative}
-.overview .overview-tile .rc-header{color:#9c9c9c;padding:5px 10px;margin-right:50px}
+.overview .overview-tile .rc-header{color:#9c9c9c;padding:5px 10px}
+.overview .overview-tile .rc-header.rc-header-shield{margin-right:50px}
 .overview .overview-tile image-names{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .overview .no-deployments-block,.overview .shield .shield-number{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex}
 .overview .overview-tile .overview-tile-body{-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:10px;position:relative}