diff --git a/app/styles/_pipeline.less b/app/styles/_pipeline.less index 897544a81d..60200ed0f2 100644 --- a/app/styles/_pipeline.less +++ b/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,7 +286,7 @@ .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); } @@ -294,13 +294,24 @@ @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); } } diff --git a/app/views/directives/_build-pipeline-expanded.html b/app/views/directives/_build-pipeline-expanded.html index 7be51a67d6..8426823cc8 100644 --- a/app/views/directives/_build-pipeline-expanded.html +++ b/app/views/directives/_build-pipeline-expanded.html @@ -31,7 +31,7 @@
-
+
{{stage.name}}
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js index 96e253512c..5c5c2b38ff 100644 --- a/dist/scripts/templates.js +++ b/dist/scripts/templates.js @@ -5247,7 +5247,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function( "
\n" + "
\n" + "
\n" + - "
\n" + + "
\n" + "{{stage.name}}\n" + "
\n" + "\n" + diff --git a/dist/styles/main.css b/dist/styles/main.css index d240b1c70f..d61c813cc9 100644 --- a/dist/styles/main.css +++ b/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}