Adjust pipeline-stage widths to accomodate more stages based on browser widths.

Fixes openshift#925

Author: sg00dwin

app/styles/_pipeline.less

@@ -145,8 +145,11 @@
       text-align: center;
     }
     // hide arrow on last stage
-    &:last-child:before {
-      display: none;
+    &:last-child {
+      &:before {
+        display: none;
+      }
+
     }
     &.no-stages {
       align-items: center;
@@ -261,7 +264,7 @@
   .pipeline .pipeline-stage {
     padding-right: (@pipeline-padding * 5.2);
     padding-bottom: (@pipeline-padding + 5);
-    width: 50%;
+    width: calc(100% / 2);
     &:before {
       bottom: auto;
       content: '\2192';
@@ -286,21 +289,32 @@
   .build-summary {
     border-bottom-width: 0;
     border-right: 1px solid @build-pipeline-border-color;
-    .flex(@columns: 0 0 175px);
+    .flex(@columns: 0 0 135px);
     .flex-direction(@direction: column);
     .justify-content(@justify: center);
   }
 }
 
 @media (min-width: @screen-md-min) {
   .pipeline .pipeline-stage {
-    width: 33.333333%;
+    width: calc(100% / 4);
   }
 }
 
 @media (min-width: @screen-lg-min) {
   .pipeline .pipeline-stage {
-    width: 25%;
+    width: calc(100% / 5);
+  }
+}
+@media (min-width: (@screen-lg-min + 200)) {
+  .pipeline .pipeline-stage {
+    width: calc(100% / 6);
+  }
+}
+
+@media (min-width: @screen-xlg-min) {
+  .pipeline .pipeline-stage {
+    width: calc(100% / 7);
   }
 }
 

app/views/directives/_build-pipeline-expanded.html

@@ -31,7 +31,7 @@
     <div class="pipeline">
       <div class="pipeline-stage" ng-repeat="stage in jenkinsStatus.stages track by stage.id">
         <div column class="pipeline-stage-column">
-          <div class="pipeline-stage-name" ng-class="build.status.phase">
+          <div title="{{stage.name}}" class="pipeline-stage-name" ng-class="build.status.phase">
             {{stage.name}}
           </div>
           <pipeline-status ng-if="stage.status" status="stage.status"></pipeline-status>

dist/scripts/templates.js

@@ -5242,7 +5242,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"pipeline\">\n" +
     "<div class=\"pipeline-stage\" ng-repeat=\"stage in jenkinsStatus.stages track by stage.id\">\n" +
     "<div column class=\"pipeline-stage-column\">\n" +
-    "<div class=\"pipeline-stage-name\" ng-class=\"build.status.phase\">\n" +
+    "<div title=\"{{stage.name}}\" class=\"pipeline-stage-name\" ng-class=\"build.status.phase\">\n" +
     "{{stage.name}}\n" +
     "</div>\n" +
     "<pipeline-status ng-if=\"stage.status\" status=\"stage.status\"></pipeline-status>\n" +

dist/styles/main.css

@@ -4570,18 +4570,22 @@ to{background-color:transparent}
 .build-summary,.stage{text-align:center}
 .build-summary{border-bottom:1px solid #d1d1d1;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex;-webkit-flex-direction:row;-moz-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-around;-moz-justify-content:space-around;justify-content:space-around;padding:5px;position:relative}
 .build-timestamp{color:#9c9c9c}
-@media (min-width:400px){.pipeline .pipeline-stage{padding-right:52px;padding-bottom:15px;width:50%}
+@media (min-width:400px){.pipeline .pipeline-stage{padding-right:52px;padding-bottom:15px;width:calc(50%)}
 .pipeline .pipeline-stage:before{bottom:auto;content:'\2192';left:auto;right:10px;top:37%}
 }
 @media (min-width:600px){.build-links,.build-timestamp{padding-top:0}
 .build-pipeline{-webkit-flex-direction:row;-moz-flex-direction:row;-ms-flex-direction:row;flex-direction:row;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex}
 .build-pipeline .build-name{white-space:nowrap}
-.build-summary{border-bottom-width:0;border-right:1px solid #d1d1d1;-webkit-flex:0 0 175px;-moz-flex:0 0 175px;-ms-flex:0 0 175px;flex:0 0 175px;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-moz-justify-content:center;justify-content:center}
+.build-summary{border-bottom-width:0;border-right:1px solid #d1d1d1;-webkit-flex:0 0 135px;-moz-flex:0 0 135px;-ms-flex:0 0 135px;flex:0 0 135px;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-moz-justify-content:center;justify-content:center}
 }
 .console-os .top-header,.pipeline-status-bar{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex}
-@media (min-width:992px){.pipeline .pipeline-stage{width:33.333333%}
+@media (min-width:992px){.pipeline .pipeline-stage{width:calc(25%)}
 }
-@media (min-width:1200px){.pipeline .pipeline-stage{width:25%}
+@media (min-width:1200px){.pipeline .pipeline-stage{width:calc(20%)}
+}
+@media (min-width:1400px){.pipeline .pipeline-stage{width:calc(16.66666667%)}
+}
+@media (min-width:1600px){.pipeline .pipeline-stage{width:calc(14.28571429%)}
 }
 .pipeline-status-bar .clip1:before,.pipeline-status-bar .clip2:before,.pipeline-status-bar .pipeline-line:before{background-color:#d1d1d1}
 .pipeline-status-bar .inner-circle-fill{background-color:#fff;opacity:0}