Merge pull request #987 from sg00dwin/pipeline-stage-issue925

Merged by openshift-bot

Author: OpenShift Bot

app/styles/_pipeline.less

@@ -261,7 +261,7 @@
   .pipeline .pipeline-stage {
     padding-right: (@pipeline-padding * 5.2);
     padding-bottom: (@pipeline-padding + 5);
-    width: 50%;
+    width: (100% / 2);
     &:before {
       bottom: auto;
       content: '\2192';
@@ -286,21 +286,32 @@
   .build-summary {
     border-bottom-width: 0;
     border-right: 1px solid @build-pipeline-border-color;
-    .flex(@columns: 0 0 175px);
+    .flex(@columns: 0 0 125px);
     .flex-direction(@direction: column);
     .justify-content(@justify: center);
   }
 }
 
 @media (min-width: @screen-md-min) {
   .pipeline .pipeline-stage {
-    width: 33.333333%;
+    width: (100% / 4);
   }
 }
 
 @media (min-width: @screen-lg-min) {
   .pipeline .pipeline-stage {
-    width: 25%;
+    width: (100% / 5);
+  }
+}
+@media (min-width: (@screen-lg-min + 200)) {
+  .pipeline .pipeline-stage {
+    width: (100% / 6);
+  }
+}
+
+@media (min-width: @screen-xlg-min) {
+  .pipeline .pipeline-stage {
+    width: (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

@@ -5247,7 +5247,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

@@ -4578,12 +4578,16 @@ to{background-color:transparent}
 @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 125px;-moz-flex:0 0 125px;-ms-flex:0 0 125px;flex:0 0 125px;-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:25%}
 }
-@media (min-width:1200px){.pipeline .pipeline-stage{width:25%}
+@media (min-width:1200px){.pipeline .pipeline-stage{width:20%}
+}
+@media (min-width:1400px){.pipeline .pipeline-stage{width:16.66666667%}
+}
+@media (min-width:1600px){.pipeline .pipeline-stage{width: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}