This way, it grows vertically rather than horizontally. Horizontal may be more "logical", but this is more practical.
EVYSAFB2LYZWBCFCEZSV6JVGRMYN3ALIZCBZG3IZVUDUXCLFYELAC
WYMEG4VPYR4AE54S5KJYL6WDILJ4GDVJA23AHKUZDLTFFZOPAIBAC
3K53ZLNX7WYB2A5QJZW7GIFBJWYQO2YXV2B7MS3OBN3VH6KIC6NAC
CQQSJLONTAKIWT4AEEDZFLFAFCSIPEGWLBJDJIS7VJK6FJ3LZ2RAC
DEMSSSB22UI2ZN26C56UYO4NZWMDCRYKLAQARGOTSORSDXX3ZNNQC
4WZQW2N6NJSIKSK7DCOV2YVEG5C45LLUM2FCCZRLISUXUGMBGF6QC
IK53RV4VGOHLCZGQCCIKPB45M3C7M7YMNBOJFBGZJ4LWIZNU4QNQC
ODNCGFQ5FPKFI624BVMLW7PJ2EFJOR3TY66OCZM42UNNTWBCF2TQC
KKJNJHO5SJBDWHW5X3N53DOFQPI7W7VB3KZ47E5WUEYCQFXM5PVQC
PZL3SZM3U3BYJX2RGYXC6NMBG7WQHFWHSYDYXZ7Q5VZA3EDYVPIQC
J5UVLXOK6EDIL5I7VKWH4V2QDS4DPD7FHRK6XBWSXFRQS4JKXFZQC
S5GCSCNSR43NZ23DR22G7E7ZWNCSQ44WUPXLESYHJCM7XBKED3SQC
D5QIOJGPKQJIYBUCSC3MFJ3TXLPNZ2XMI37GXMFRVRFWWR2VMTFAC
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>#</th>
[% FOREACH j IN constituentJobs %]
<th>[% HTML.escape(j) %]</th>
[% END %]
</tr>
</thead>
<tbody>
[% FOREACH agg IN aggregates.keys.nsort.reverse %]
<tr>
<td><a class="row-link" href="[% c.uri_for('/build' agg) %]">[% agg %]</a></td>
[% FOREACH j IN constituentJobs %]
<td>
[% r = aggregates.$agg.$j; IF r.id %]
<a href="[% c.uri_for('/build' r.id) %]">
[% INCLUDE renderBuildStatusIcon size=16 build=r %]
</a>
[% END %]
</td>
[% END %]
</tr>
[% END %]
</tbody>
</table>
<hr/>
<div class="well well-small">This is an <em>aggregate job</em>:
its success or failure is determined entirely by the result of
building its <em>constituent jobs</em>. The table below shows
the status of each constituent job for the [%
aggregates.keys.size %] most recent builds of the
aggregate.</div>
<th>#</th>
[% FOREACH j IN constituentJobs %]
<th>[% HTML.escape(j) %]</th>
<th>Job</th>
[% FOREACH agg IN aggs %]
<th class="rotate-45">
[% agg_ = aggregates.$agg %]
<div><span class="[% agg_.build.finished == 0 ? "text-info" : (agg_.build.buildstatus == 0 ? "text-success" : "text-warning") %] override-link">
<a href="[% c.uri_for('/build' agg) %]">[% agg %]</a>
</span></div></th>
<td><a class="row-link" href="[% c.uri_for('/build' agg) %]">[% agg %]</a></td>
[% FOREACH j IN constituentJobs %]
<td>
[% r = aggregates.$agg.$j; IF r.id %]
<th style="width: 1em;">[% INCLUDE renderJobName project=project.name jobset=jobset.name job=j %]</th>
[% FOREACH agg IN aggs %]
<td>
[% r = aggregates.$agg.constituents.$j; IF r.id %]
/* Rotated table headers, borrowed from http://jimmybonney.com/articles/column_header_rotation_css */
.tab-content {
margin-right: 5em;
overflow: visible;
}
td.centered {
text-align: center;
}
.table-header-rotated th.rotate-45{
height: 80px;
width: 40px;
min-width: 40px;
max-width: 40px;
position: relative;
vertical-align: bottom;
padding: 0;
font-size: 100%;
line-height: 0.9;
}
.table-header-rotated th.rotate-45 > div {
position: relative;
top: 0px;
left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
height: 100%;
-ms-transform:skew(-45deg,0deg);
-moz-transform:skew(-45deg,0deg);
-webkit-transform:skew(-45deg,0deg);
-o-transform:skew(-45deg,0deg);
transform:skew(-45deg,0deg);
overflow: hidden;
border-left: 1px solid #dddddd;
}
.table-header-rotated th.rotate-45 span {
-ms-transform:skew(45deg,0deg) rotate(315deg);
-moz-transform:skew(45deg,0deg) rotate(315deg);
-webkit-transform:skew(45deg,0deg) rotate(315deg);
-o-transform:skew(45deg,0deg) rotate(315deg);
transform:skew(45deg,0deg) rotate(315deg);
position: absolute;
bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
display: inline-block;
// width: 100%;
width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
text-align: left;
// white-space: nowrap; /*whether to display in one line or not*/
}