create a jobwrapper span to address long job names spillover

Really long job names like gate-tempest-devstack-vm-neutron-large-ops
end up having a really negative effect on the zuul status page as
it pushes their status bar down into the next row, making it really
confusing about what's going on.

Fix this through making a jobwrapper class which is display: table,
so it is at least clear what goes with what. Longer term we may
want to do something more clever about overflows, but this at least
removes some confusion.

Change-Id: I1e6130724e59748cbf88996120a377498de26a36
This commit is contained in:
Sean Dague 2013-11-25 14:12:20 -05:00
parent 2ffc67af94
commit f8de8ba8b3
2 changed files with 7 additions and 3 deletions

View File

@ -91,6 +91,10 @@ td.tree {
.change > .header > .time {
float: right;
}
.jobwrapper {
display: table;
width: 100%;
}
.job {
display: block;
line-height: 1.5;
@ -242,7 +246,7 @@ progress[aria-valuenow]:before {
Queue lengths: <span id="trigger_event_queue_length"></span> events,
<span id="result_event_queue_length"></span> results.
&nbsp;&nbsp;&nbsp;&nbsp;
Filter projects:
Filter projects:
<span class="projects_filter_container">
<input type="text" id="projects_filter" />
<!--

View File

@ -269,7 +269,7 @@ function format_change(change, change_queue) {
} else if (result == 'UNSTABLE') {
result_class += " result_unstable";
}
html += '<span class="job">';
html += '<span class="jobwrapper"><span class="job">';
if (job['url'] !== null) {
html += '<a href="'+job['url']+'">';
}
@ -287,7 +287,7 @@ function format_change(change, change_queue) {
if (job['voting'] == false) {
html += ' (non-voting)';
}
html += '</span>';
html += '</span></span>';
});
html += '</div></div></td></tr>';