-
Bug
-
Resolution: Unresolved
-
Minor
-
None
-
Jenkins: 2.263.1
Pipeline: Stage View Plugin: 2.19
Theme Manager is installed, but the theme is set to default.
There are two issues here:
- Duration is hidden behind the progress bar
- Duration runs off the end of the stage-wrapper
I found I could get a better behaviour by updating the style to:
- Set duration to sit on top
- Set position to relative (to set correct width)
- Set line-height to set correct progress bar height
.jobsTable .stage-cell .stage-wrapper .duration {
text-align: center;
position: relative!important;
line-height: 4.05em;
padding-bottom: 1em;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
border-radius: 4px;
z-index: 1;
}
As seen here:
I also tried changing the stage-cell progress bar opacity. It made it a little more readable but it could be confused with the progress being unknown.
A quick look in chrome shows a similar behaviour:
Before:
After:
And a similar bad behaviour in Safari:
[JENKINS-65331] Stage view duration hidden behind progress bar
| Description |
Original:
There are two issues here:
- Duration is hidden behind the progress bar - Even Duration runs off the end of the stage-wrapper !Screenshot 2021-04-09 at 14.09.16.png|thumbnail! I found I could get a better behaviour by updating the style to: - Set duration to sit on top - Set position to relative (to set correct width) - Set line-height to set correct progress bar height ``` .jobsTable .stage-cell .stage-wrapper .duration { text-align: center; position: relative!important; line-height: 4.05em; padding-bottom: 1em; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); border-radius: 4px; z-index: 1; } ``` As seen here: !Screenshot 2021-04-09 at 14.11.45.png|thumbnail! I also tried changing the stage-cell progress bar opacity. It made it a little more readable but it could be confused with the progress being unknown. !Screenshot 2021-04-09 at 14.12.40.png|thumbnail! A quick look in chrome shows a similar behaviour: Before: !Screenshot 2021-04-09 at 14.14.42.png|thumbnail! After: !Screenshot 2021-04-09 at 14.22.16.png|thumbnail! And a similar bad behaviour in Safari: !Screenshot 2021-04-09 at 14.23.57.png|thumbnail! |
New:
There are two issues here:
- Duration is hidden behind the progress bar - Even Duration runs off the end of the stage-wrapper !Screenshot 2021-04-09 at 14.09.16.png|thumbnail! I found I could get a better behaviour by updating the style to: - Set duration to sit on top - Set position to relative (to set correct width) - Set line-height to set correct progress bar height ``` .jobsTable .stage-cell .stage-wrapper .duration { text-align: center; position: relative!important; line-height: 4.05em; padding-bottom: 1em; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); border-radius: 4px; z-index: 1; } ``` As seen here: !Screenshot 2021-04-09 at 14.11.45.png|thumbnail! I also tried changing the stage-cell progress bar opacity. It made it a little more readable but it could be confused with the progress being unknown. !Screenshot 2021-04-09 at 14.12.40.png|thumbnail! A quick look in chrome shows a similar behaviour: Before: !Screenshot 2021-04-09 at 14.14.42.png|thumbnail! After: !Screenshot 2021-04-09 at 14.22.16.png|thumbnail! And a similar bad behaviour in Safari: !Screenshot 2021-04-09 at 14.23.57.png|thumbnail! |
| Description |
Original:
There are two issues here:
- Duration is hidden behind the progress bar - Even Duration runs off the end of the stage-wrapper !Screenshot 2021-04-09 at 14.09.16.png|thumbnail! I found I could get a better behaviour by updating the style to: - Set duration to sit on top - Set position to relative (to set correct width) - Set line-height to set correct progress bar height ``` .jobsTable .stage-cell .stage-wrapper .duration { text-align: center; position: relative!important; line-height: 4.05em; padding-bottom: 1em; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); border-radius: 4px; z-index: 1; } ``` As seen here: !Screenshot 2021-04-09 at 14.11.45.png|thumbnail! I also tried changing the stage-cell progress bar opacity. It made it a little more readable but it could be confused with the progress being unknown. !Screenshot 2021-04-09 at 14.12.40.png|thumbnail! A quick look in chrome shows a similar behaviour: Before: !Screenshot 2021-04-09 at 14.14.42.png|thumbnail! After: !Screenshot 2021-04-09 at 14.22.16.png|thumbnail! And a similar bad behaviour in Safari: !Screenshot 2021-04-09 at 14.23.57.png|thumbnail! |
New:
There are two issues here:
- Duration is hidden behind the progress bar - Duration runs off the end of the stage-wrapper !Screenshot 2021-04-09 at 14.09.16.png|thumbnail! I found I could get a better behaviour by updating the style to: - Set duration to sit on top - Set position to relative (to set correct width) - Set line-height to set correct progress bar height ``` .jobsTable .stage-cell .stage-wrapper .duration { text-align: center; position: relative!important; line-height: 4.05em; padding-bottom: 1em; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); border-radius: 4px; z-index: 1; } ``` As seen here: !Screenshot 2021-04-09 at 14.11.45.png|thumbnail! I also tried changing the stage-cell progress bar opacity. It made it a little more readable but it could be confused with the progress being unknown. !Screenshot 2021-04-09 at 14.12.40.png|thumbnail! A quick look in chrome shows a similar behaviour: Before: !Screenshot 2021-04-09 at 14.14.42.png|thumbnail! After: !Screenshot 2021-04-09 at 14.22.16.png|thumbnail! And a similar bad behaviour in Safari: !Screenshot 2021-04-09 at 14.23.57.png|thumbnail! |
| Description |
Original:
There are two issues here:
- Duration is hidden behind the progress bar - Duration runs off the end of the stage-wrapper !Screenshot 2021-04-09 at 14.09.16.png|thumbnail! I found I could get a better behaviour by updating the style to: - Set duration to sit on top - Set position to relative (to set correct width) - Set line-height to set correct progress bar height ``` .jobsTable .stage-cell .stage-wrapper .duration { text-align: center; position: relative!important; line-height: 4.05em; padding-bottom: 1em; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); border-radius: 4px; z-index: 1; } ``` As seen here: !Screenshot 2021-04-09 at 14.11.45.png|thumbnail! I also tried changing the stage-cell progress bar opacity. It made it a little more readable but it could be confused with the progress being unknown. !Screenshot 2021-04-09 at 14.12.40.png|thumbnail! A quick look in chrome shows a similar behaviour: Before: !Screenshot 2021-04-09 at 14.14.42.png|thumbnail! After: !Screenshot 2021-04-09 at 14.22.16.png|thumbnail! And a similar bad behaviour in Safari: !Screenshot 2021-04-09 at 14.23.57.png|thumbnail! |
New:
There are two issues here:
- Duration is hidden behind the progress bar - Duration runs off the end of the stage-wrapper !Screenshot 2021-04-09 at 14.09.16.png|thumbnail! I found I could get a better behaviour by updating the style to: - Set duration to sit on top - Set position to relative (to set correct width) - Set line-height to set correct progress bar height {code:css} .jobsTable .stage-cell .stage-wrapper .duration { text-align: center; position: relative!important; line-height: 4.05em; padding-bottom: 1em; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); border-radius: 4px; z-index: 1; } {code} As seen here: !Screenshot 2021-04-09 at 14.11.45.png|thumbnail! I also tried changing the stage-cell progress bar opacity. It made it a little more readable but it could be confused with the progress being unknown. !Screenshot 2021-04-09 at 14.12.40.png|thumbnail! A quick look in chrome shows a similar behaviour: Before: !Screenshot 2021-04-09 at 14.14.42.png|thumbnail! After: !Screenshot 2021-04-09 at 14.22.16.png|thumbnail! And a similar bad behaviour in Safari: !Screenshot 2021-04-09 at 14.23.57.png|thumbnail! |
| Issue Type | Original: Task [ 3 ] | New: Bug [ 1 ] |
| Assignee | Original: Sam Van Oort [ svanoort ] |
I have have added a PR for this, but found I couldn't package the plugin to test it locally:
https://github.com/jenkinsci/pipeline-stage-view-plugin/pull/146